/* ============================================================ "The Strike" — scroll-driven intro (spec: 2026-08-01) Progressive enhancement: everything here is inert until the engine (js/intro/intro.js) passes its guards and adds `intro-on` to . No JS / reduced motion → static hero. Animation uses transform + opacity ONLY (mobile perf rule). ============================================================ */ .intro-track { display: none; } html.intro-on .intro-track { display: block; position: relative; height: 650vh; /* scroll track — spec range 600–700vh */ } html.intro-on .hero { display: none; } /* the intro replaces the static hero */ @media (prefers-reduced-motion: reduce) { html.intro-on .intro-track { display: none; } html.intro-on .hero { display: block; } } .intro-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: var(--cream); } .scene { position: absolute; inset: 0; visibility: hidden; /* engine toggles per chapter */ } .scene-layer { position: absolute; inset: 0; will-change: transform, opacity; /* few elements, long-lived — acceptable */ } .scene-layer img { width: 100%; height: 100%; object-fit: cover; } .scene-layer--contain img { object-fit: contain; padding: 12%; } /* video beats — the three clips arrive at different aspect ratios (1280x720, 944x972, 1184x776), so cover-crop them to the stage rather than letterboxing a mismatched set. */ .scene--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--ink); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* legibility scrim under copy — static, never animated */ .scene-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 26, 23, 0) 45%, rgba(28, 26, 23, 0.55) 100%); pointer-events: none; } .scene-copy { position: absolute; left: 50%; bottom: clamp(4rem, 12vh, 7.5rem); transform: translateX(-50%); width: min(92vw, 30ch); max-width: none; text-align: center; font-family: var(--display); font-size: clamp(1.5rem, 4.6vw, 3.4rem); line-height: 1.06; text-transform: uppercase; letter-spacing: 0.005em; text-wrap: balance; text-shadow: 0 2px 24px rgba(28, 26, 23, 0.6); opacity: 0; } .scene-copy--tagline { color: var(--paper); } /* beat 5: the tagline lands */ .scene-copy--dark { color: var(--ink); text-shadow: none; } /* light stages */ .intro-skip { position: absolute; right: clamp(1rem, 4vw, 2.5rem); bottom: clamp(1rem, 4vh, 2rem); z-index: 5; font-family: var(--body); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); background: rgba(28, 26, 23, 0.35); border: 2px solid currentColor; border-radius: 999px; padding: 0.6rem 1.4rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .intro-skip.is-on { opacity: 1; pointer-events: auto; }