/* * scroll-scrub-video.css — fixed styles + all degradation states (LIVE-SEEK variant) * Provenance: research/prompts/neural-interface.md * #video-layer (position:fixed inset:0 z-index:1 background:#000; L54-60), * #video-layer video (object-fit:cover; opacity:0; will-change:transform,filter,opacity; L61-68), * #bottom-blur progressive blur band (L70-81). * * The root is the scrub scene. For the scroll driver the consumer gives the PAGE its * scroll runway (tall content / a 500vh sticky section — atlas invariant) and the * video layer is a fixed backdrop. Copy/choreography targets are marked with * data-scrub-hero / data-scrub-desc / data-scrub-cinematic / data-scrub-reveal. */ .ssv-root { position: relative; width: 100%; } /* Video layer: fixed full-viewport backdrop behind content (NI #video-layer L54-60). */ .ssv-video-layer { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; background: #000; /* stand-in bg while video loads — NI L58 */ user-select: none; pointer-events: none; } /* The scrubbed video (NI #video-layer video L61-68). opacity:0 until entrance lifts it. */ .ssv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; will-change: transform, filter, opacity; display: block; } /* Progressive bottom blur band (NI #bottom-blur L70-81) — keeps bottom-left copy legible as the video's final third is heavily blurred. Optional: add
. */ .ssv-bottom-blur { position: fixed; bottom: 0; left: 0; width: 100%; height: 150px; z-index: 30; pointer-events: none; user-select: none; background: linear-gradient(to bottom, transparent, #000); -webkit-mask-image: linear-gradient(to top, #000 50%, transparent); mask-image: linear-gradient(to top, #000 50%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Cinematic paragraph needs a 3D context on its parent (NI #cinematic-section L249-254). */ [data-scrub-cinematic] { transform-style: preserve-3d; will-change: transform, opacity; } /* In-view reveal default (NI #stats-section L269-278): hidden until JS adds .ssv-revealed. */ [data-scrub-reveal] { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } [data-scrub-reveal].ssv-revealed { opacity: 1; transform: translateY(0) scale(1); } /* ---------------- Degradation states (contract) ---------------- */ /* prefers-reduced-motion: no scrub choreography. JS pins the video at a resting frame, opacity:1, and forces all copy/reveals visible. CSS backstops the video opacity + kills entrance transform/blur so a static frame + copy at rest is shown. */ @media (prefers-reduced-motion: reduce) { .ssv-video { opacity: 1 !important; filter: none !important; transform: none !important; } [data-scrub-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } [data-scrub-hero], [data-scrub-desc], [data-scrub-cinematic] { opacity: 1 !important; transform: none !important; } } .ssv-root.ssv-reduced .ssv-video { opacity: 1; } /* no-JS: JS never runs, so the