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>

landing/src/app/ui/site-header.scss

@@ -6,7 +6,11 @@
   position: sticky;
   top: 0;
   z-index: 50;
-  background-color: color-mix(in srgb, var(--pi-color-white, #fff) 88%, transparent);
+  background-color: color-mix(
+    in srgb,
+    var(--pi-color-white, #fff) 88%,
+    transparent
+  );
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--pi-color-grey-200, #e4e4ea);
 }
@@ -160,3 +164,24 @@
   color: var(--pi-color-grey-600, #5b5b6b);
   cursor: pointer;
 }
+
+// A shadow under the header once the page moves, so it reads as floating over
+// the content rather than as part of it. Tied to the scroll in CSS; without
+// scroll-driven animations the border alone does the job, as before.
+@keyframes header-lift {
+  to {
+    border-bottom-color: transparent;
+    box-shadow: 0 10px 30px -18px
+      color-mix(in srgb, var(--pi-color-primary) 45%, transparent);
+  }
+}
+
+@supports (animation-timeline: scroll()) {
+  @media (prefers-reduced-motion: no-preference) {
+    .landing-header {
+      animation: header-lift linear both;
+      animation-timeline: scroll(root);
+      animation-range: 0 5rem;
+    }
+  }
+}