/* ==========================================================================
   reveals.css — scroll-reveal states. JS adds .is-in via IntersectionObserver.
   Without JS (or with reduced motion) everything is visible.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); will-change: opacity, transform; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stagger > .reveal { transition-delay: calc(var(--i, 0) * 90ms); }

/* Hero entrance — orchestrated once on load */
.js [data-hero-in] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .hero.is-in [data-hero-in] { opacity: 1; transform: none; }
.js .hero.is-in [data-hero-in]:nth-of-type(1) { transition-delay: .05s; }
.js .hero.is-in .hero__title { transition-delay: .15s; }
.js .hero.is-in .hero__copy .btn { transition-delay: .3s; }
.js .hero.is-in .hero__pill { transition-delay: .5s; }
.js .hero.is-in .hero__visual { transition-delay: .25s; }

/* Section rule grows from the left */
.js .sec-head .sec-rule { transform: scaleX(0); transition: transform var(--dur-slow) var(--ease-out) .25s; }
.js .sec-head.is-in .sec-rule { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
	.js .reveal, .js [data-hero-in], .js .sec-head .sec-rule { opacity: 1; transform: none; transition: none; }
}