Build a single self-contained landing page — one index.html with all CSS and JS inline, no frameworks, no build step — for a fictional cinematic prompt library called MAKO. The hero is a video of a mako shark swimming up out of deep blue water and opening its jaws at the camera; the page UI then reveals itself on the bite.

THE VIDEO — load it straight from this URL, nothing to download or attach: https://thinkingods.com/demos/mako-hero/hero.mp4 <video src="…" muted playsinline preload="auto"> — absolutely positioned, object-fit: cover, NO loop, so the open-jawed final frame holds once it ends.

THE TRICK, and the reason this works: a giant word sits BEHIND the shark using mix-blend-mode, not masking.
- Set the word "MAKO" in a display serif at clamp(120px, 26vw, 460px), centred, top: 9vh, line-height .8, in a colour a shade LIGHTER than the water (#102745 on #071A33)
- Give it mix-blend-mode: lighten. At every pixel the browser keeps the lighter of word and video — the shark is lighter than the word everywhere, so the shark wins and appears to swim IN FRONT of the type. No cut-out, no alpha channel, no per-frame masking
- Fade the word's lower half into the water with mask-image: linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.3) 66%,transparent 88%)
- The word starts at opacity 0 and letter-spacing .02em; once the video plays it fades in over 1.8s while the tracking tightens to -.01em over 2.6s

MATCH THE PAGE TO THE FOOTAGE AT RUNTIME: on loadeddata, draw a small patch from the video's top-left water (3% x, 8% y, 4% of the frame) into a 1×1 canvas, read the pixel, and write it to --bg; set --ghost to that colour plus (9, 13, 18) in RGB — a shade lighter, which is what the lighten blend needs. Wrap it in try/catch — reading pixels throws on a file:// page — and fall back to the CSS values.

THE CHOREOGRAPHY: const REVEAL_AT = 5.0 (seconds; the moment the jaws are fully open — change it to match your clip). On timeupdate, once currentTime >= REVEAL_AT, add .is-revealed to the hero, plus a .bite class for 600ms that runs a .5s impact shake (translate -3px,2px → 2px,-2px → -1px,1px → 0). Every UI element carries .rv: opacity 0, translate 0 18px, blur(6px), transitioning over .9s with a stagger of calc(var(--d) * 90ms) — nav 0, eyebrow 2, h1 3, lede 4, buttons 5, the four dock cells 6–9. Nothing typographic moves until the bite.

THE DEPTH GAUGE (left edge, top 18vh to bottom 24vh, 46px wide): a vertical mono label DEPTH (writing-mode vertical-rl, rotated 180°), a 10px track of ticks every 12px, a 16×2px cyan marker with a cyan glow, and a tabular-nums readout "000m". While the shark swims, drive it from the video: progress = currentTime / REVEAL_AT, readout = round(progress × 200) padded to three digits, marker top = progress × 100%. On the bite it locks at 200m and the readout turns coral.

NEVER LEAVE THE HERO BLANK. Reveal anyway on the video's `ended` and `error` events, if play() rejects, and after a hard 9s timeout. If readyState >= 2 when the script runs, start immediately — loadeddata may already have fired. Honour prefers-reduced-motion by jumping to the last frame and revealing with no transitions, no shake and no looping animations.

LAYOUT (hero, 100svh, overflow hidden, isolation: isolate):
- Legibility overlay: a left-to-right gradient from --bg at 78% to transparent at 42%, plus a bottom gradient to --deep at 80%
- Nav: a small two-tone fin mark (bone fin, one coral slash) and MAKO (700, letter-spacing .28em) left; mono links LIBRARY · TEMPLATES · PROMPTS · PRICING centre, the first in bone and the rest muted; SIGN IN and a bone pill GET ACCESS with navy text right
- Left copy at left: clamp(76px, 8vw, 128px), top: 34vh, max-width 520px, so it clears the gauge: a cyan mono eyebrow with a 28px rule, "CINEMATIC PROMPT LIBRARY · DROP 02"; h1 in serif clamp(56px, 7.4vw, 118px), line-height .88, "Websites / that bite." with "bite." in italic coral; a 15px lede, "Video-first hero templates and copy-paste prompts. Drop in one clip, paste one prompt, and ship a page nobody scrolls past."; a coral gradient pill "Get the library" with the arrow in a circle and a soft coral glow, and an underlined "Watch the build ↗"
- A frosted glass dock along the bottom (20px radius, 1px hairline gaps between cells, backdrop-filter blur(18px) saturate(1.2)), four cells on repeat(3, 1fr) .9fr. Three cells each pair a 64px rounded thumbnail with a mono key and a serif value: PROMPTS / Copy · Paste (the dot in cyan), MOTION / 60fps, VIDEO / One take. The fourth: mono "SPECIES 02" over Isurus oxyrinchus in italic serif, and a frosted mono "replay" pill that removes .is-revealed, resets the gauge to 000 and restarts the video
- The thumbnails are crops of the video's own final frame, hosted beside it: https://thinkingods.com/demos/mako-hero/thumb-eye.jpg https://thinkingods.com/demos/mako-hero/thumb-jaw.jpg https://thinkingods.com/demos/mako-hero/thumb-tail.jpg They start at scale(1.15) and settle to 1 over 1.6s on the reveal

TYPE AND COLOUR: Instrument Serif (400 + italic) for headlines, Manrope (400–700) for body and buttons, JetBrains Mono (400/500) for uppercase labels at 9–11px with .14–.2em tracking. Tokens on :root — --bg:#071A33, --deep:#040E1E, --ghost:#102745, --bone:#EDEAE3, --ink-2:#B7C3D1, --ink-3:#7D8FA6, --line:rgba(237,234,227,.12), --cyan:#5FD4E8, --red:#F0524A, --red-2:#FF7A6B, --glass:rgba(10,28,52,.42). Easing cubic-bezier(.2,.7,.1,1). Hairline borders, 22–26px rounded cards, pill buttons. No purple, no generic gradients, no emoji. The page must still read correctly if the webfonts fail — give real serif and sans-serif fallbacks.

BELOW THE FOLD, one section: "Dive log". A --deep to #06142A to --deep gradient with a hairline on top. A two-column header — mono kicker "02 DIVE LOG — WHY A MAKO" (the 02 in coral) and a serif h2 at clamp(40px, 5.2vw, 78px), "Built for speed, / tuned to strike once." (the second line italic cyan) — beside a 16px paragraph on the mako being built end to end for one fast, decisive move. Then a bento grid (1.35fr 1fr 1fr, 16px gap) of four logs, each with a mono "LOG 0X · TOPIC" index: a feature tile spanning two rows on dermal denticles, "Skin made of tiny teeth", ending in a 150px panel of crossed scale lines that drift sideways on a 9s loop, labelled "WATER FLOW →"; "A sixth sense" on the ampullae of Lorenzini; "Never runs out" on teeth that keep replacing themselves, with a row of seven bone triangles; and a tile spanning two columns, "It never stops moving", on makos breathing by swimming, beside three cyan rings pulsing out from a coral dot. Tiles get a mono lesson line with a coral arrow, e.g. "→ TEXTURE THAT DOES A JOB", "→ FEEL WHAT THE USER NEEDS". Close with a navy stats band split into four by hairlines — LENGTH ~4m with a tick ruler that fills cyan to 80%, BODY HEAT Warm with a blue-to-cyan-to-coral bar and a marker that slides to 72%, TEETH Endless with six triangles fading in and out in turn, STRIKE "One bite" in italic coral with a self-drawing curve — then a serif line "Pick a template. Paste the prompt. / Make it bite." and the coral CTA. Reveal these with an IntersectionObserver at threshold .18, fading up 28px with staggered delays; the ruler, bar and curve animate once in view.

RESPONSIVE: ≤980px the dock goes to two columns with the species cell spanning both. ≤900px hide the nav links, SIGN IN and the gauge; the video becomes the top 64svh (object-position 58% 60%) fading into --deep; the giant word goes to 30vw; the copy and the dock flow below the shark (about 56svh of top padding); the bento goes to one column and the stats band to 2×2. ≤520px the dock is one column. No horizontal scroll, 16px side gutter throughout.

When you're done, tell me the REVEAL_AT value you used and how to change it if the shark in my clip bites at a different second.

- The clip. Any locked-camera shot on a dark, even backdrop where the subject is lighter than the background, and holds still for the last 2-3 seconds. 16:9, ~8s, H.264 — the default export from Flow, Veo, Runway or Kling
- REVEAL_AT. Set it to the second your subject strikes; the gauge, the shake and the reveal are all timed off that one number
- The palette. --bg, --ghost, --cyan and --red are all on :root, and the runtime sampler re-matches --bg to your own footage anyway