/* Keep the headline's natural word wrapping and readable text without JavaScript. */
.editorial-hero .hero-word {
    display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
    .editorial-hero .hero-word {
        animation: landing-word-in 900ms cubic-bezier(.16, 1, .3, 1) both;
        animation-delay: calc(140ms + var(--word-index) * 65ms);
    }

    .editorial-hero .hero-kicker,
    .editorial-hero .eyebrow,
    .editorial-hero .hero-side,
    .editorial-hero .proof-strip {
        animation: landing-rise-in 1s cubic-bezier(.16, 1, .3, 1) backwards;
    }

    .editorial-hero .eyebrow { animation-delay: 80ms; }
    .editorial-hero .hero-side { animation-delay: 420ms; }
    .editorial-hero .proof-strip { animation-delay: 650ms; }

    .editorial-hero .proof-strip span {
        animation: landing-rise-in 800ms cubic-bezier(.16, 1, .3, 1) backwards;
        animation-delay: 720ms;
    }

    .editorial-hero .proof-strip span:nth-child(2) { animation-delay: 800ms; }
    .editorial-hero .proof-strip span:nth-child(3) { animation-delay: 880ms; }
    .editorial-hero .proof-strip span:nth-child(4) { animation-delay: 960ms; }

    .editorial-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(ellipse at 35% 40%, rgba(102, 204, 255, .16), transparent 60%);
        animation: landing-glow-drift 16s ease-in-out infinite alternate;
    }

    .editorial-hero::after {
        animation: landing-ring-in 1.8s cubic-bezier(.16, 1, .3, 1) backwards;
    }

    /* Keyboard navigation reveals the card immediately during its entrance. */
    .editorial-hero .hero-side:focus-within { animation: none; }
}

@keyframes landing-word-in {
    from { opacity: 0; transform: translateY(.45em) rotate(1.5deg); }
    75% { opacity: 1; transform: translateY(-.025em) rotate(0); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes landing-rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes landing-ring-in {
    from { opacity: 0; transform: translateX(45px) scale(.94); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes landing-glow-drift {
    from { transform: translate3d(-3%, -2%, 0); opacity: .5; }
    to { transform: translate3d(5%, 4%, 0); opacity: 1; }
}