Driftline. Built from one prompt.

Build a one-screen morning surf-report page for "DRIFTLINE" using React, TypeScript, Vite, Tailwind CSS. The scene: three layered SVG wave bands drifting at different speeds over a dawn gradient. No images, no 3D library.

FONTS: "Newsreader" (400 italic, 500) and "Karla" (400, 600) from Google Fonts; utilities `.font-news` and `.font-karla`.

SKY: page background `linear-gradient(180deg, #ffe8d6 0%, #ffc4a3 38%, #e78895 70%, #6d5b7b 100%)` on a `fixed inset-0 z-0` layer.

WAVES (absolute inset-x-0 bottom-0 z-0, three stacked SVGs each `w-[200%] h-[26vh] absolute bottom-0`): each SVG is one smooth sine-ish path (e.g. `M0,96 C240,64 480,128 720,96 C960,64 1200,128 1440,96 L1440,320 L0,320 Z` in a 1440x320 viewBox, preserveAspectRatio="none"). Fills and motion:
- Back band: `fill="rgba(109, 91, 123, 0.5)"`, `animation: drift 26s linear infinite`, bottom offset 14vh
- Mid band: `fill="rgba(90, 74, 110, 0.7)"`, `animation: drift 17s linear infinite reverse`, bottom offset 7vh
- Front band: `fill="#41335a"`, `animation: drift 11s linear infinite`, bottom 0
`@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }` (each SVG contains its path twice side by side so the loop is seamless).

HEADER (relative z-10, flex justify-between items-center px-6 sm:px-10 py-6, text-[#41335a]):
- "DRIFTLINE" in `font-karla font-semibold text-[15px] tracking-[0.4em]`
- "POINT MERCY, CA — SUNRISE 06:41" in `font-karla text-[11px] tracking-[0.25em] uppercase opacity-70`

REPORT CARD (relative z-10, h-[70vh] flex items-center px-6 sm:px-14):
- Headline: "Waist-high and glassy." in `font-news italic text-[clamp(2.6rem,8vw,6rem)] leading-[1.02] tracking-[-1px] text-[#41335a] max-w-3xl`
- Sub: "South swell holding through Thursday. Offshore till ten. Call in sick — we'll write the note." in `font-karla text-sm sm:text-base text-[#41335a]/75 max-w-md mt-6 leading-relaxed`
- Stats row (mt-9, flex gap-4 flex-wrap): three frosted chips `bg-white/25 backdrop-blur-sm border border-white/40 rounded-2xl px-5 py-3`, values in `font-karla font-semibold text-xl text-[#41335a]`, labels `text-[10px] tracking-[0.3em] uppercase text-[#41335a]/60 mt-0.5`:
  - "3-4 FT" / "swell" ; "7 KT" / "offshore" ; "61°F" / "water"

Headline types itself: a useTypewriter effect revealing "Waist-high and glassy." at 55ms per character starting after 400ms, with a 2px blinking caret (`@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }`) that disappears when done. Chips float up after the typing finishes (`opacity-0 translate-y-4` → visible, transition 0.6s ease). Single App.tsx + src/styles.css.

svg-wavesgradientcalm