.hero-media img {
    animation: heroZoom 18s var(--ease-out) forwards;
}

.hero-overlay {
    animation: fadeIn 1.1s var(--ease-out) both;
}

.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .lead,
.hero-copy .hero-actions,
.page-hero .eyebrow,
.page-hero h1,
.page-hero .lead {
    opacity: 0;
    transform: translateY(28px);
    animation: riseIn 900ms var(--ease-out) forwards;
}

.hero-copy .eyebrow,
.page-hero .eyebrow { animation-delay: 180ms; }
.hero-copy h1,
.page-hero h1 { animation-delay: 320ms; }
.hero-copy .lead,
.page-hero .lead { animation-delay: 480ms; }
.hero-copy .hero-actions { animation-delay: 640ms; }

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.stagger > .reveal,
.stagger > .cat-card,
.stagger > .adv-card,
.stagger > .need-item,
.stagger > .audience article,
.stagger > .pay-card,
.stagger > .flow-item,
.stagger > .value-card,
.stagger > .tex-card,
.stagger > .material-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}

.stagger.is-visible > .reveal,
.stagger.is-visible > .cat-card,
.stagger.is-visible > .adv-card,
.stagger.is-visible > .need-item,
.stagger.is-visible > .audience article,
.stagger.is-visible > .pay-card,
.stagger.is-visible > .flow-item,
.stagger.is-visible > .value-card,
.stagger.is-visible > .tex-card,
.stagger.is-visible > .material-card {
    opacity: 1;
    transform: none;
}

.stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; }
.stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; }
.stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; }

.flow.is-visible .flow-line {
    animation: drawLine 1.4s var(--ease-out) both;
}

@keyframes riseIn {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes heroZoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@keyframes drawLine {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes quizIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}