Build a single self-contained landing page — one index.html with all CSS and JS inline, no frameworks, no build step — for a fictional private yacht charter brand called VELORIA. The whole page sits over one cinematic clip of a superyacht cruising open ocean at golden hour. The yacht is the hero from the first frame to the last; every section arranges itself AROUND the hull, never on top of it.

THE MEDIA — load it straight from these URLs, nothing to download or attach: video    https://thinkingods.com/demos/veloria-yacht/assets/yacht.mp4 poster   https://thinkingods.com/demos/veloria-yacht/assets/yacht-poster.jpg card 1   https://thinkingods.com/demos/veloria-yacht/assets/t1.jpg card 2   https://thinkingods.com/demos/veloria-yacht/assets/t2.jpg card 3   https://thinkingods.com/demos/veloria-yacht/assets/t3.jpg card 4   https://thinkingods.com/demos/veloria-yacht/assets/t4.jpg

THE TRICK, and the reason this works: the video is position: fixed, full-bleed and BEHIND everything, and the first four sections have NO background at all.
- <video id="bgVideo" autoplay muted loop playsinline preload="auto"> with the poster, object-fit: cover, inside a fixed .bg layer at z-index 0. Content scrolls over it at z-index 10. Never give a section a solid fill until the last one — a single filled band breaks the illusion that you are on the boat
- One scrim over the video, built from three gradients so the yacht in the centre stays untouched: left-to-right rgba(3,8,13,.78) → .35 at 32% → transparent at 55%; bottom-up .8 → transparent at 38%; top-down .55 → transparent at 18%. Copy only ever lives in the dark left third, the bottom band or the top corners
- Each of sections 01–04 is exactly one screen (100vh, min-height 760px) and uses absolutely positioned groups, so the layout reads like a film frame: margins of clamp(20px,5.5vw,80px) on the left and clamp(20px,10.4vw,150px) on the right (the right edge leaves room for the section index)

VIDEO MODE: const VIDEO_MODE = new URLSearchParams(location.search).get('mode') || 'loop'.
- 'loop' (default): play() on load. If play() rejects, start it on the first pointerdown
- 'scrub': remove autoplay, pause, loop off. On scroll (passive, throttled with requestAnimationFrame) set currentTime = progress × (duration − 0.05), where progress = scrollY / (innerHeight × 3), clamped 0–1, so the clip plays exactly once across the first four screens. Also run it on loadedmetadata

CHROME, fixed above everything (z-index 30):
- Header, 96px tall, 40px side padding: left, a frosted-glass pill logo "VELORIA" in the display serif, 21px, letter-spacing .34em. Centre, four links ONBOARD · THE VOYAGE · DESTINATIONS · RESERVE (13px, 600, .14em tracking, uppercase, 52px apart) that anchor to the sections. Right, a solid accent pill "BOOK A CHARTER" in ink-coloured text
- Section index, fixed right: 40px, top: 170px: a vertical stack of 01–05 links, right-aligned, 22px gap, 55% ivory. The active one turns accent and shows its label (HOME, ONBOARD, VOYAGE, DESTINATIONS, RESERVE) sliding in from 8px to its left. Drive it with an IntersectionObserver at threshold .5 over [data-i] sections
- Frosted glass everywhere means: rgba(8,15,22,.42), backdrop-filter blur(18px) saturate(120%) (with the -webkit- prefix), 1px border rgba(244,239,230,.16)

THE FIVE BEATS:

01 HERO — copy left, stat card bottom-right, yacht centre.
- Left group at top clamp(140px,22vh,200px), width min(540px,80vw): an accent eyebrow with a 40px rule, "PRIVATE CREWED CHARTERS" (12px, 600, .28em); h1 in the serif at clamp(56px,6.7vw,96px), weight 500, line-height .92, "The open sea, reserved for you." with "reserved" in italic; a 16px lede at 88% opacity, max 400px: "Crewed superyachts across the Mediterranean and the Indian Ocean. Choose the yacht, set the course, and every nautical mile is handled."; two 54px pills — solid accent "RESERVE A CHARTER" and glass "STEP ABOARD" with a down arrow in a 32px translucent circle
- Glass card bottom: 56px, right edge, 380px wide, 24px radius: "FEATURED CHARTER" label, "Aurelle" in 30px serif, and a huge serif "38m" (64px, the m at 26px) top-right; a 3px track filled 72% in accent; "SUMMER DATES FILLING · AMALFI COAST"; a hairline, then four stats — 10 Guests, 5 Cabins, 7 Crew, [PRICE] Per day — values 22px 600, labels 10px uppercase
- Bottom-left: "SCROLL TO SET SAIL" beside a 1px × 40px line that draws down and away on a 2.2s loop
- Load-in: four stagger classes .ld1–.ld4 rise 40px and fade in over 1.1–1.2s on cubic-bezier(.2,.7,.2,1) at .15s, .35s, .55s, .8s. As you scroll, the hero copy rises 90px and fades out over the first 520px

02 ONBOARD — four cards float at the corners, title bottom-centre.
- Four image cards, width clamp(220px,20vw,290px), aspect-ratio 29/22, 28px radius, hairline border, shadow 0 30px 60px rgba(0,0,0,.35). Positions: left margin at top 14.5%; left margin + 8.5vw at top 44.5%; right margin at top 14.5%; right margin + 8.5vw at top 44.5% — a staggered pair on each side with the hull framed between them
- Each card: the image object-fit cover (scales 1.06 on hover over .6s), a dark gradient from the top-left, a two-line serif label top-left at 28px — "Swim / platform", "Sun / deck", "Silent / hull", "Golden / hour runs" — and a 48px glass circle top-right with a diagonal arrow. Write real alt text
- Left cards fly in from translateX(-120px) scale(.92), right cards from +120px; the second card on each side lags behind the first
- Bottom-centre at 9%: "Made to glide" in the serif at clamp(64px,7.2vw,104px) with "glide" in italic, and under it, max 560px at 17px: "A private chef, a full crew and every water toy aboard. The yacht runs quietly around the way you like your days."

03 THE VOYAGE — almost empty. The yacht owns the frame.
- Bottom-left, bottom 96px, width min(760px,56vw): a 64px × 2px accent line that grows from the left, then h2 at clamp(52px,5.7vw,82px), "Charter the coastline nobody else can reach." with "nobody else" in italic
- Bottom-right, bottom 104px, width min(400px,30vw): "Your captain plans the route around weather, anchorages and your pace. Quiet coves at dawn, a harbour dinner at dusk, and open water in between." and an accent link "SEE WHERE WE SAIL →"

04 DESTINATIONS — heading top-left, tiles along the bottom edge.
- Top-left at 150px: accent eyebrow "WHERE WE SAIL", h2 at clamp(50px,5.3vw,76px), "Four coastlines, one season each." ("season" italic)
- Bottom 64px, spanning between the margins: a 4-column grid (16px gap) of glass tiles, 22px radius, min-height 170px, darkening on hover. Each: accent number and an uppercase season on one row, a 32px serif name, a 14px line — 01 May – Oct, Amalfi Coast, "Positano at dusk, lunch anchored off Li Galli." 02 Jun – Sep, Cyclades, "Whitewashed harbours from Mykonos to Milos." 03 Nov – Apr, Maldives, "Atoll to atoll, sandbank dinners after dark." 04 Nov – May, Andaman Islands, "Quiet anchorages off Havelock and Neil."
- Tiles rise in one after another

05 RESERVE — the only solid surface. It slides up over the video like a sheet.
- margin 0 24px, padding 80px clamp(24px,7.2vw,104px) 40px, background #0B121A, radius 32px 32px 0 0, faint hairline border with no bottom edge, shadow 0 -40px 80px rgba(0,0,0,.4). Normal height, not one screen
- Two columns (1.05fr 1fr, 72px gap). Left: a pill badge with an accent dot, "NOW BOOKING THE SEASON"; a serif blockquote at clamp(44px,4.4vw,64px), "You don't rent a yacht. You borrow the horizon." ("horizon" italic); a paragraph: "Tell us where, when and who. A charter manager replies within [RESPONSE TIME] with yacht options, a route and an all-in quote."
- Right: a quote form titled "REQUEST A CHARTER QUOTE". A 2×2 grid of labelled fields — Destination (select of the four coastlines + "Not sure yet"), Yacht (Aurelle · 38 m, Any motor yacht, Any sailing yacht), Dates (text, placeholder "e.g. 12–19 June"), Guests (2/4/6/8/10) — then an Email field sharing a row with an accent "Get my quote" button, and a small privacy line. Inputs 52px, background #121B25, hairline border that brightens on focus, 12px radius, uppercase 11px labels. There is no backend: on submit, preventDefault and reveal a status line "Thank you. A charter manager will be in touch." in accent
- Footer inside the same panel, after a hairline at 88px: a 2fr + 3×1fr grid — a four-point star in accent plus "VELORIA" with a one-line description; Charter links; Company links; Contact with [EMAIL ADDRESS], [PHONE NUMBER], Instagram, YouTube. Then "VELORIA" as a giant serif wordmark at clamp(90px,17vw,250px), ivory at 5% opacity, and a legal row with © 2026 Veloria Yacht Charters, Privacy and Terms
- Leave the [BRACKETED] placeholders as they are. Never invent prices, contact details or statistics

THE MOTION SYSTEM. Use native CSS scroll-driven animations inside @supports (animation-timeline: view()):
- .rv / .rv2 / .rv3 rise 70px and fade in, animation-range entry 15% → cover 45%, entry 25% → cover 52%, entry 32% → cover 58% (that is the stagger)
- .inl / .inl2 and .inr / .inr2 are the side fly-ins above, ranges entry 10–22% → cover 42–56%
- .line scales X from 0, transform-origin left
- the hero's exit uses animation-timeline: scroll(root), range 0 520px Then a fallback for browsers without scroll timelines: if CSS.supports('animation-timeline: view()') is false, add .no-sda to <html>, start those elements at their "from" state with a 1s opacity / 1.1s transform transition (second and third items delayed .15s / .3s), and add .in from an IntersectionObserver at threshold .2. Content must never stay invisible. html gets scroll-behavior: smooth and scroll-snap-type: y proximity, each section scroll-snap-align: start.

TYPE AND COLOUR: Cormorant Garamond (400, 500 + italics) for every display line, set at weight 500 with italic words at 400. Manrope (400–700) for body, labels and buttons; uppercase labels at 10–13px with .12–.28em tracking. Tokens on :root — --accent:#C9A96E, --ink:#0B1622, --ivory:#F4EFE6, --muted:rgba(244,239,230,.72), --panel:#0B121A; body background #05090E. Headlines over video get text-shadow 0 2px 24px rgba(0,0,0,.35). Pill buttons, hairline borders, 22–28px radii, no purple, no generic gradients, no emoji, icons as inline stroke SVG. Give real serif and sans-serif fallbacks so it still reads if the webfonts fail.

RESPONSIVE ≤900px: hide the header links and the section index; turn off scroll-snap. Sections become auto-height (min 100vh) flex columns with 120px top padding, content pushed to the bottom, and every absolutely positioned group returns to normal flow at full width. Onboard becomes a 2-column grid of cards with "Made to glide" above them, left-aligned. Tiles, the reserve grid, the form grid and the footer all go to one column. No horizontal scroll, 20px side gutter.

prefers-reduced-motion: no load-ins, no scroll animations, no scroll cue loop, smooth scrolling off — everything simply visible.

When you're done, tell me how to switch between loop and scrub mode, and which three lines to change to use my own clip.

- The clip. Any 16:9, ~8s H.264 shot where the subject holds the centre of the frame and the left third and bottom band stay calm, so copy has somewhere to sit. A slow drone orbit or a tracking shot works best — the default export from Flow, Veo, Runway or Kling. Swap the video and poster URLs; keep it under ~5 MB
- The mode. Loop if the clip loops cleanly, scrub (?mode=scrub) if it is one continuous move — then scrolling drives the camera. For smooth scrubbing export with a keyframe every half second
- The brand and the four cards. VELORIA, the hero line, the four onboard labels and their image URLs, and the four destinations are all plain text in the prompt
- The palette. --accent, --ink, --ivory and --panel are all on :root. Pick the accent from the warmest highlight in your footage