/* ============================================================================ SCP Motion - bold cinematic scroll system Stack: GSAP + ScrollTrigger + SplitType (masked line reveals) + Lenis (smooth scroll) Behavior: headings unmask line-by-line; blocks enter one direction and exit another; parallax on imagery; pinned showcase sections. ANTI-FOUC / FAIL-OPEN CONTRACT: Elements are hidden ONLY when has the `motion-armed` class, which an inline script adds *synchronously before paint* AND only when the user has not asked for reduced motion. So if JS is disabled, fails to load, or reduced-motion is on, nothing is ever hidden - the page renders normally. The engine adds `motion-off` if libraries fail mid-load, which also reveals everything. ============================================================================ */ /* ---- Lenis smooth-scroll plumbing ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-smooth iframe { pointer-events: none; } /* ---- Pre-reveal hidden states (only while armed) ---- */ html.motion-armed [data-motion] { will-change: transform, opacity; } html.motion-armed [data-motion~="rise"] { opacity: 0; transform: translate3d(0, 64px, 0); } html.motion-armed [data-motion~="fade"] { opacity: 0; } html.motion-armed [data-motion~="from-left"] { opacity: 0; transform: translate3d(-80px, 0, 0); } html.motion-armed [data-motion~="from-right"] { opacity: 0; transform: translate3d(80px, 0, 0); } html.motion-armed [data-motion~="zoom"] { opacity: 0; transform: scale(1.06); } /* ---- Masked line reveal for headings ---- */ /* The heading box is held invisible until the engine has split it into lines and pushed each line below its clip box; then the engine flips it visible and animates lines up. */ html.motion-armed [data-motion~="mask"] { opacity: 0; } [data-motion~="mask"] .line { overflow: hidden; display: block; } [data-motion~="mask"] .line-inner { display: block; will-change: transform; } /* ---- Parallax imagery ---- */ [data-parallax] { will-change: transform; } [data-parallax-wrap] { overflow: hidden; } /* ---- FAIL-OPEN + reduced motion: reveal everything, no transforms ---- */ html.motion-off [data-motion] { opacity: 1 !important; transform: none !important; } html.motion-off [data-motion~="mask"] .line-inner { transform: none !important; } @media (prefers-reduced-motion: reduce) { [data-motion], html.motion-armed [data-motion], html.motion-armed [data-motion~="mask"] { opacity: 1 !important; transform: none !important; } [data-motion~="mask"] .line-inner { transform: none !important; } }