ui polish pass: scroll-driven effects (card reveal, header shadow, reading progress), nav underline-grow, card meta icons, og:image svg fallback, apple-touch-icon+favicon, hero 472->180KB + preload, article cover CLS guard, ::selection, per-article lang, robots noindex (demo); article: db-cms comparison diagram, 6-year pros/cons, reuse section

DESIGN.md

@@ -120,7 +120,18 @@ ctao.org drifts looping nebula videos under Galaxy vignettes; our translation:
    (Cherenkov .16 / Azure .12 / Indigo .10) drifting on a 36s alternate
    cycle. Opt-in via `<Base ambient>`: **home only**. Body text NEVER sits on
    a moving gradient — cards, panels and bands are solid layers above it.
-4. One-shot hero `rise` stagger; unified hover system (below). Nothing else.
+4. One-shot hero `rise` stagger; unified hover system (below).
+5. **CSS scroll-driven effects** (2026 pass; `animation-timeline`, no JS —
+   "no scroll-triggered motion" below means no JS/observer motion): card
+   reveal on viewport entry (`view()`, entry 0–35%), header shadow fading in
+   over the first 80px of scroll, article reading-progress bar (2px Cherenkov
+   under the header — functional navigation state, same budget line as the
+   TOC scrollspy). All behind `@supports (animation-timeline: view())`,
+   compositor-only (the header shadow animates a pseudo-element's OPACITY,
+   never box-shadow in keyframes), auto-killed by the reduce block.
+6. Micro-interactions: nav underline-grow (2px white rule, `scaleX` 0→1 on
+   hover, held on `aria-current`) and 1px press-down on `.btn`/navlink
+   `:active`. Nothing else.
 
 **One hover language** (mid-pass audit: hovers were inconsistent per element;
 ctao.org uses a single quiet-fade token — we do the same): every interactive