Bring the landing to life as it scrolls

- Each section assembles itself on arrival: heading first, then what it
  holds, and a grid's cards one after another — instead of the whole
  section fading in as one block.
- The hero enters on load, piece by piece, in CSS, so it plays with or
  without JavaScript; the stats come last and count up from zero.
- The hero's lights drift and fade as it scrolls away, and the header
  gains a shadow once the page moves — scroll-driven animations, no
  listeners; browsers without them simply do not animate.

The count only runs if the page hydrates before the stats appear at
0.8s: after that the figure has been read, and dropping it to zero to
count again would be a flicker. Server-rendered HTML carries the real
numbers and nothing hidden, and prefers-reduced-motion turns all of it
off.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -424,11 +424,21 @@ Two pieces, both of which have to survive a page that renders on the server:
   so the arrows have to be asked for, and the controls only appear at all once
   there are more items than fit — with two testimonials it degrades to a plain
   row, which is the right answer.
-- **`ui/reveal.ts`** fades each section in as it arrives. The hidden state is
-  *not* in the server-rendered HTML: it only applies under `html.reveal-ready`,
-  a class the directive adds at runtime, so a visitor without JavaScript reads a
-  full page instead of a blank column. `prefers-reduced-motion` skips the
-  observer entirely.
+- **`ui/reveal.ts`** assembles each section as it arrives: its heading first,
+  then what it holds, and a grid's cards one after another (up to eight, then
+  together). The hidden state is *not* in the server-rendered HTML: it only
+  applies under `html.reveal-ready`, a class the directive adds at runtime, so
+  a visitor without JavaScript reads a full page instead of a blank column.
+- **The hero enters on load**, in CSS (`hero.scss`), so it plays with or
+  without JavaScript: eyebrow, title, lead, buttons, and the stats last, at
+  0.8s. The stats count up from zero — but only if the page hydrates before
+  then (`COUNT_UP_BEFORE_MS` in `stat-grid.ts`). Later than that the number has
+  already been read, and dropping it to zero to count again would be a flicker.
+- **Scroll-driven, no JavaScript**: the hero's lights drift and fade as it
+  scrolls away, and the header gains a shadow once the page moves
+  (`animation-timeline: scroll()`). Browsers without it simply do not animate.
+
+`prefers-reduced-motion` turns every one of these off.
 
 `PiThemeService` owns the shell class, pinned to `alternative` in
 `app.config.ts` — the library's marketing look: pill buttons with a gradient