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 KINGFISHER. The hero is a video of a kingfisher flying in and landing on a twig against a flat sage backdrop; the page UI then reveals itself around the perched bird.

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

THE TRICK, and the reason this works: a giant word sits BEHIND the bird using mix-blend-mode, not masking.
- Set the word "Kingfisher" ("fisher" in italic) in a display serif at clamp(90px, 17vw, 300px), centred, top: 13vh, in a colour barely darker than the backdrop (#ADBAA7 on #B6C3B0)
- Give it mix-blend-mode: darken. At every pixel the browser keeps the darker of word and video — the bird is darker than the word everywhere, so the bird wins and appears to fly IN FRONT of the type. No cut-out, no alpha channel, no per-frame masking
- Fade the word's lower half into the backdrop with mask-image: linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.35) 62%,transparent 86%) so the descenders dissolve instead of colliding with the twig

MATCH THE PAGE TO THE FOOTAGE AT RUNTIME: on loadeddata, draw a 1px patch from the video's top-right corner (94% x, 12% y) into a 1×1 canvas, read the pixel, and write it to --bg; set --ghost to that colour × 0.955. The page and the video then share one continuous backdrop whatever the footage. Wrap it in try/catch — reading pixels throws on a file:// page — and fall back to the CSS values.

THE CHOREOGRAPHY: const REVEAL_AT = 4.3 (seconds; the moment the bird lands — change it to match your clip). On timeupdate, once currentTime >= REVEAL_AT, add .is-revealed to the hero. Every UI element carries .rv: opacity 0, translateY(18px), blur(6px), transitioning over .9s with a stagger of calc(var(--d) * 90ms) — nav, eyebrow, h1, lede, buttons, trust row, card 1, card 2, strip. Nothing typographic moves until the bird has settled.

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.

LAYOUT (hero, 100svh, overflow hidden):
- Legibility overlay: left-to-right gradient from --bg at 70% to transparent at 38%, plus a bottom gradient to --bg at 55%
- Nav: small two-tone bird mark and KINGFISHER (700, letter-spacing .22em) left; mono links LIBRARY · TEMPLATES · PROMPTS · PRICING centre; SIGN IN and a dark pill GET ACCESS right
- Left copy, vertically centred then pushed ~76px down so it clears the giant word, max-width 470px: mono eyebrow with a 28px rule, "CINEMATIC PROMPT LIBRARY"; h1 in serif clamp(44px,5vw,76px), line-height .95, "Websites that land with precision" (italic word in teal); a 15px lede; an orange gradient pill CTA with the arrow in a circle, and an underlined "Watch a build ↗"
- Right cluster, min(400px,34vw): a trust row of 4 overlapping gradient avatars, then two dark cards side by side with the second dropped 18px. Each: a mono header (PROMPTS / 01, MOTION / 02), a square canvas thumbnail with a caption over a bottom gradient, a big serif stat (Copy · Paste, 60fps), three dots with the first orange
- The thumbnails are crops of the video's own final frame: once the bird lands, drawImage the video into each card's <canvas> using fractional crops (data-crop="x,y,size"; 0.555,0.335,0.22 for the head, 0.43,0.60,0.24 for the wing), fading in over a teal/orange radial placeholder. drawImage still works on file:// — it is only readback that is blocked
- Bottom strip: mono "SPECIES 01" with Alcedo atthis in italic serif, a centred "DELHI NCR · 28.61° N", and a frosted replay pill that resets .is-revealed, hides the thumbnails and restarts the video

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:#B6C3B0, --paper:#E3E8DE, --ink:#10201F, --ink-2:#2E3D3A, --ink-3:#4E5E58, --line:rgba(16,32,31,.14), --ghost:#ADBAA7, --orange:#E8732A, --orange-2:#F3A15E, --teal:#0E7C86, --panel:#0F1D1C, --panel-2:#172A28. Easing cubic-bezier(.2,.7,.1,1). Hairline borders, generous whitespace, 18–26px rounded dark cards with deep soft shadows, 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: "Why a Kingfisher". A gradient from --bg to --paper over the first 220px with a hairline on top. A two-column header — mono kicker "02 FIELD NOTES — WHY A KINGFISHER" (the 02 in orange) and a serif h2 at clamp(40px,5.2vw,78px), "It waits, reads the water, then lands in one clean motion" — beside a 16px paragraph. Then a bento grid (1.35fr 1fr 1fr, 16px gap) of four notes: a dark one spanning two rows on the beak that reshaped the Shinkansen, with an SVG dive arc from PERCH to ENTRY that draws itself via stroke-dashoffset; a light one on structural colour with three swatch chips; a light one on the nictitating membrane; and a light one spanning two columns on waiting still, with an SVG eye/target. Light cards are rgba(255,255,255,.45), hairline border, 22px radius, each with a mono "NOTE 0X · TOPIC" index. Close with a dark stats band split into four by faint dividers — LENGTH 16 cm with a ruler that fills to 80%, WEIGHT ~40 g with a solid circle beside a dashed one, COLOUR Zero with a shimmering teal-to-cobalt bar, STRIKE "One dive" in italic orange with a self-drawing curve — then a serif closing line and the orange CTA. Reveal these with an IntersectionObserver at threshold .18, fading up 28px with staggered delays; the arcs and the ruler animate once their card is in view.

RESPONSIVE ≤900px: hide the nav links and SIGN IN; the giant word goes to 22vw; the hero becomes a flex column with the copy and cards flowing below the bird (about 46svh of top padding); drop the second card's offset; switch the overlay to a bottom-up --bg gradient. The notes go to one column and the stats band to 2×2. 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 bird in my clip lands at a different second.

- The clip. Any locked-camera shot on a flat backdrop where the subject is darker 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 settles; everything else is timed off that one number
- The palette. --bg, --ghost, --orange and --teal are all on :root, and the runtime sampler re-matches --bg to your own footage anyway