/* ============================================================================ Boswell — motion.css ---------------------------------------------------------------------------- Initial + revealed states for scroll-driven reveals. Two principles: 1. WITHOUT JS, everything is visible (no `.js-motion` flag on means .reveal elements show normally). This is the non-JS / reduced-motion fallback path. 2. WITH JS + motion allowed, site-motion.js adds `.js-motion` to , which switches `.reveal` into a hidden state until `.is-revealed` is added by IntersectionObserver. The hero is the one exception — its `.reveal` children are shown immediately so the Download CTA is in view at scroll=0 (SAU-668). ============================================================================ */ html.js-motion .reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 700ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform 700ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); will-change: opacity, transform; } html.js-motion .reveal[data-reveal="scale"] { transform: translate3d(0, 18px, 0) scale(0.985); } html.js-motion .reveal.is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } /* Hero reveals are visible immediately when motion is on. A previous GSAP ScrollTrigger pin cascaded them in based on scroll progress, but that left the Download CTA hidden until the user scrolled past the hero — see SAU-668. site-motion.js no longer pins the hero; the cascade for below-the-fold content still runs via IntersectionObserver. */ html.js-motion .hero .reveal { opacity: 1; transform: translate3d(0, 0, 0) scale(1); transition: none; } /* Belt-and-braces: if the user prefers reduced motion AND somehow ended up with .js-motion (e.g. matched media changed after init), force visible. */ @media (prefers-reduced-motion: reduce) { html.js-motion .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }