/* ============================================================
   MODE MARKETING — ANIMATIONS CSS
   GSAP-ready classes. Elements start hidden; JS reveals them.
   ============================================================ */

/* Base state for scroll-reveal elements */
.reveal {
    opacity: 0;
    transform: translateY(24px);
}

/* Once GSAP fires, it removes inline styles — but this class
   acts as a fallback / no-JS fallback */
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

/* Page load hero elements — start hidden, JS animates in */
.hero-reveal {
    opacity: 0;
    transform: translateY(16px);
}

/* Stagger groups */
.stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
}

/* No-motion fallback */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .hero-reveal,
    .stagger-children > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}