/* ============================================================ DevCo · Cross-section flow — scroll-snap + cross-dissolve ------------------------------------------------------------ The "flowing like water" seam treatment. Two concerns, both driven entirely by section-flow.js — this stylesheet only declares the surfaces the JS animates and the safety rules that guarantee no empty void ever appears. 1. CROSS-DISSOLVE — as a section leaves the top of the viewport its CONTENT (the inner .dc-shell wrapper, or #role-scene for §04) eases out: a subtle fade + a few pixels of lift + a hair of scale-down. The incoming section's content eases in the same way. ScrollTrigger scrubs the whole thing. Transform + opacity ONLY. 2. SNAP — purely JS (Lenis scrollTo). No native CSS scroll-snap (it fights Lenis). Nothing to declare here beyond keeping the snap-eligible sections honest. VOID-PROOF CONTRACT ------------------- A section BACKGROUND is never animated and always fully covers its box. Only the CONTENT layer fades/moves. So at any scroll position — mid-dissolve, mid-snap, anywhere — the viewport is always covered by a section background. This file owns NOTHING that another agent's stylesheet declares. It adds one data-attribute hook (`data-flow-content`) and a will-change. It does not change layout, sizing, colour or position of any existing element. ============================================================ */ /* ------------------------------------------------------------ The content layer the dissolve animates. section-flow.js tags each section's inner wrapper with data-flow-content. We only promote it to its own paint layer so the fade/transform stays at 60fps. No visual change at rest (opacity:1, no transform). ------------------------------------------------------------ */ [data-flow-content]{ will-change:opacity,transform; } /* When the flow engine is active the JS sets inline opacity/ transform via GSAP. At rest (no JS, pre-init, or after a ScrollTrigger.kill) the content must read fully visible — GSAP only ever animates between visible states, but this guarantees the resting baseline regardless. */ .dc-flow-ready [data-flow-content]{ opacity:1; } /* ------------------------------------------------------------ Void insurance. The dissolve animates content, never background — but as a belt-and-braces guarantee against any sub-pixel gap at a seam while a snap glide is in flight, every snap-eligible section is told to always cover at least the viewport. These sections are already full-height by design; this is a floor, not a new height, so it causes no layout shift. `dc-flow-section` is added by the JS only to sections it actually manages, so untagged / short sections are untouched. ------------------------------------------------------------ */ .dc-flow-section{ min-height:100svh; /* svh: stable under mobile UI chrome */ min-height:100vh; /* fallback for engines without svh */ } /* The two tall set-pieces are intentionally taller than one viewport — never clamp them. Their inner sticky scenes own their own height; the flow engine only snaps their START. */ #role, #role.dc-flow-section, #pathway.dc-flow-section{ min-height:0; /* release the floor for tall sections */ } /* …but #pathway is still a .dc-section and must still cover — its own section CSS already guarantees full-bleed background, so releasing the floor here only prevents an artificial over-tall box; the background still covers. */ /* ------------------------------------------------------------ A snap is in progress — a tiny, optional polish hook. While the JS is gliding the page to a snap point it adds `dc-snapping` to . Nothing visual depends on it here; it exists so other agents (or future work) can react. Kept empty-but-declared so the class is documented. ------------------------------------------------------------ */ html.dc-snapping{ /* snap glide in flight — reserved hook */ } /* ------------------------------------------------------------ Touch / coarse pointers. On touch devices the JS runs dissolve-only (snapping off — momentum scrolling makes JS snap feel like a fight). Nothing to change visually; the dissolve surface above already applies. Declared for documentation. ------------------------------------------------------------ */ @media (pointer:coarse){ /* snapping disabled in JS; cross-dissolve still active */ } /* ------------------------------------------------------------ Reduced motion — mandatory hard off. The JS already bails entirely under prefers-reduced-motion (no snap, no dissolve, ScrollTrigger never created). This block is the CSS guarantee: if any inline opacity/transform were ever left on a content node, force it back to a fully visible, static resting state. ------------------------------------------------------------ */ @media (prefers-reduced-motion:reduce){ [data-flow-content]{ opacity:1 !important; transform:none !important; will-change:auto; } .dc-flow-section{ /* keep the cover floor (harmless, no motion) but never let it introduce scrolling oddities */ min-height:100vh; } html.dc-snapping{ /* never set under reduced motion */ } }