/* ============================================================================ FROZEN HERO CORE. Shared by every round-5 mockup. DO NOT EDIT PER DESIGN. Leif's constraint: the video layout, size, crop, sequence and treatment stay exactly as approved. The ONLY thing a design may change is --zone, the height of the video area. Everything else about the footage is locked here so no design file can drift. ============================================================================ */ /* ---- page shell (not video treatment, but shared by all twenty) ---- 🔴 Clamping `body` alone is not enough. Every design sets body to 100dvh with overflow:hidden, yet `html` keeps its own auto height, so the document box can still exceed the viewport: 11-Ticket measured body=844 / hero=844 / all children <=844 while html.scrollHeight was 862. Nineteen of the twenty happened to compute to zero, which made them lucky rather than correct. Clamp the shell. */ html{height:100%;overflow:hidden} .stage{ position:absolute;top:0;left:0;right:0; height:var(--zone,62vh); overflow:hidden;z-index:0; } .stage video, .stage img.poster{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover; object-position:50% 38%; /* approved framing: face high, crop off the bottom */ } /* two clips stacked and crossfaded; the controller advances on `ended` */ .stage video{opacity:0;transition:opacity .8s ease} .stage video.on{opacity:1} .stage img.poster{display:none} /* ============================================================================ D40 (2026-07-20): the hero loop plays for EVERY visitor, including those with prefers-reduced-motion set. This is a deliberate product decision by Leif, recorded here so it survives the next cleanup. It replaces the previous fallback, which hid the video and showed the still frame under that media query. That fallback was never actually reaching anyone: `html.force-motion` shipped on from the original cutover and outranked it (0,2,2 vs 0,1,1), so video played for everyone regardless. Removing the scaffolding on 2026-07-20 exposed the fallback for the first time and the hero went static on reduced-motion machines - which is how the whole thing was found. Full postmortem in D40. 🔴 Do NOT re-add a reduced-motion rule that hides .stage video without asking. The absence of that rule IS the decision. If you want it back, it needs to be a policy change, not a tidy-up. 🔴 D41: after ANY change to this site, VALIDATE THE HERO VIDEO ACTUALLY PLAYS in a real browser before calling the work done. Never skip it, never infer it from the code. deploy/verify-hero.mjs does it in ~40s. Two things intentionally NOT changed: - the CTA text scramble is still gated on prefers-reduced-motion in the JS. It is rapid, repeating, high-frequency motion, which is squarely what the media query exists for. The hero is slow and ambient. - html.autoplay-blocked (end of file) still wins over everything. A browser that REFUSES to play video is a different case from a visitor who asked for less motion, and it still gets the still frame. ============================================================================ */ /* (autoplay-blocked rules live at the END of this file: they must win over every other display rule, including html.force-motion below.) */ /* mockup-only override so the sequence stays previewable on a machine with Windows animations switched off */ html.force-motion .stage video{display:block} html.force-motion .stage img.poster{display:none} /* ---- decode/scramble label, shared so every CTA behaves identically ---- */ .scr{position:relative;display:inline-block} .scr-ghost{visibility:hidden} .scr-live{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; white-space:pre; font:inherit;letter-spacing:inherit; } /* ============================================================================ 🔴 AUTOPLAY REFUSED. Must be LAST and uses !important deliberately. iOS Safari blocks all video autoplay in Low Power Mode regardless of muted/playsinline, and some in-app browsers do the same. When play() is refused we swap to the still frame. This has to beat `html.force-motion .stage video{display:block}` above. Both selectors are specificity 0,2,2, so without !important whichever appears later wins, and force-motion did: a real iPhone on Low Power Mode got a black hero with a dead play placeholder over it (2026-07-19). A browser that refuses to play video should never be shown a video element, whatever any other class asks for. Hence the hard override. ============================================================================ */ html.autoplay-blocked .stage video{display:none !important} html.autoplay-blocked .stage img.poster{display:block !important}