/* Motion layer - calm and optimistic ("rising"). Hidden states exist ONLY when the head script
   added .js to <html>, so crawlers/no-JS see everything. transform/opacity only. Reduced motion
   shows everything instantly. Nothing loops for more than ~5 s. */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.from-left { transform: translateX(-28px); }
.js .reveal.from-right { transform: translateX(28px); }
.js .reveal.from-left.in, .js .reveal.from-right.in { transform: none; }

/* swoosh underline draw-in */
.js .lane-dash, .js .heading-underline::after { transform: scaleX(0); transform-origin: left; transition: transform .8s ease .1s; }
.js .lane-dash.in, .js .heading-underline.in::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .js .reveal, .js .lane-dash, .js .heading-underline::after { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .swoosh-path { animation: none !important; stroke-dashoffset: 0 !important; }
    .js .spark-star { animation: none !important; opacity: 1 !important; }
    .hero-chip { transform: none !important; }
    html { scroll-behavior: auto !important; }
}