/* Animations (from your React inline styles) */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 1.2s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 1s ease-out forwards; }

/* Hero content state (visibility when active vs scrolled away) */
#heroContent {
    transition: all 0.7s ease;
}
#heroContent.hero-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}
#heroContent.hero-hidden {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(4px);
}

/* Process steps text transitions */
/* .process-step-inner {
    opacity: 0.2;
    transform: translateY(2rem);
    transition: all 0.7s ease;
}
.process-step.process-active .process-step-inner {
    opacity: 1;
    transform: translateY(0);
} */


/* Process steps text transitions */
/* Process steps text transitions */
/* Base animation */
.process-step-inner {
    opacity: 0.2;
    transform: translateY(2rem);
    transition: all 0.7s ease;
}

/* Desktop – pinned text in the right column */
@media (min-width: 768px) {
    .process-step-inner {
        position: sticky;
        top: 20vh;
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile – pinned text, under the image */
@media (max-width: 767px) {
    .process-step-inner {
        position: sticky;
        top: 80vh;              /* just under the ~50vh image */
        /* background: #FAF7F5; */
        padding-top: 1.5rem;
        padding-bottom: 2rem;
        z-index: 25;opacity: 0;
    }
}

/* Default active state */
.process-step.process-active .process-step-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile override: when JS adds .mobile-hide-text, hide active text */
@media (max-width: 767px) {
    #processSection.mobile-hide-text .process-step.process-active .process-step-inner {
        opacity: 0;
        transform: translateY(1rem);
        pointer-events: none;
    }
}





/* Step image transitions mirror your Tailwind classes */
.step-image {
    transition: opacity 0.7s ease, transform 0.7s ease;
    opacity: 0;
    transform: scale(1.1);
}
.step-image.active {
    opacity: 1;
    transform: scale(1);
}





/* Hero overlay transition */
#heroOverlay {
    transition: opacity 1s ease;
}