Motion intro

Build a 12-second motion-graphics intro, 1920×1080, as ONE self-contained HTML file, following the storyboard below exactly.

Hard rules

Build a 12-second motion-graphics intro, 1920×1080, as ONE self-contained HTML file, following the storyboard below exactly.

Hard rules
- Everything lives in a single HTML file: inline CSS and JavaScript only. No external URLs of any kind: no CDNs, libraries, web fonts, remote images or network requests. The file will be opened offline, straight from disk. Animate with CSS, the Web Animations API, inline SVG and/or plain JavaScript.
- It must run in a current desktop Chrome with a 1920×1080 viewport and zero console errors.
- Build the storyboard beats as DOM and/or inline SVG elements (not drawn inside a canvas), so their positions can be measured. A canvas is fine for the background only.

Storyboard (times in seconds from the start)
1. 0.0–1.2 — `line`: a thin horizontal line draws itself from the left edge to the right edge of the frame, at mid-height, and stays on screen at least until 4.2.
2. 1.2–2.3 — `title`: the title "SAME PRICE." types in letter by letter: character number i (counting from 0) appears at exactly 1.2 + 0.1 × i seconds. The full title stays on screen until 9.0.
3. 3.0–4.2 — `card-a` and `card-b`: two cards slide in, card A from the left edge and card B from the right edge, and settle side by side below the title by 4.2. They stay until the end.
   - Card A text: "HAIKU 5.5" and "$0.10 in · $0.50 out" and "per 1M tokens"
   - Card B text: "GPT-6 LUNA" and "$0.10 in · $0.50 out" and "per 1M tokens"
4. 5.0–8.0 — `counter-a` and `counter-b`: in the lower part of each card (or just below it), a counter labelled "COST PER TASK" counts up from "$0.00" at 5.0 to "$0.21" (card A) and "$0.07" (card B), easing out over the three seconds, and shows the final value from 8.0 on. The value always shows as a dollar sign and two decimals.
5. 9.0–9.6 — the title "SAME PRICE." is replaced by "DIFFERENT BILL." with a transition of your choice, finished by 9.6, and it holds until 12.0.
6. Throughout 0–12: a subtle ambient background motion, so the picture is never completely still.

Composition rules
- No text ever overlaps another text element, at any moment, including while things are moving.
- From 4.2 on, every beat element except the line stays inside the safe area (5% margin from each edge of the frame).
- Make it bold, not timid: the title's font size is at least 8% of the frame height (86 px), and each card is at least 22% of the frame width wide.
- Style: a premium tech-channel look. Dark background, one strong accent color, confident typography.

Testing contract (an automated tester relies on these, so they must be exact)
- The beat elements carry data-beat="line", data-beat="title", data-beat="card-a", data-beat="card-b", data-beat="counter-a" and data-beat="counter-b". A counter may sit inside its card.
- The textContent of the title element is always exactly the text visible at that moment ("" before 1.2 s, then "S", "SA", ... and later "DIFFERENT BILL."). The textContent of each counter element is always exactly the value shown (for example "$0.13"), without the label.
- window.nerdict = {
    duration: 12,
    seek(t) → renders exactly the frame at t seconds, synchronously (the frame is ready when seek returns), and holds it (no playback) until seek or play is called again,
    play() → plays from 0 in real time
  }
  seek(t) must be a pure function of t: the same t always gives the same frame, whatever was shown before.
- On load, it plays by itself (looping is fine).

Output format: reply with the complete file inside a single ```html code block and nothing else.