perf(hub): stop iPhone scroll crashes — GIFs to H.264 video, render-skip offscreen sections

Fast scrolling to the bottom stats killed the tab on iPhone (Safari and
Chrome, both WebKit). Two causes, both memory:

- The demo strip embedded animated GIFs that decode to ~730MB of RGBA
  frames on index alone (~1.26GB on demos.html). Replaced with H.264
  <video muted loop playsinline preload=none> + poster JPEGs
  (hardware-decoded, 8-48x smaller files). An IntersectionObserver
  plays/pauses within 200px of the viewport and beyond 1200px drops the
  src entirely so the media pipeline is fully released.

- A fling rasterized the whole ~32k-px page of gradient cards at once.
  Below-fold sections (demos strip, matrices, deck, footer; demo rows on
  demos.html) now use content-visibility:auto with contain-intrinsic-size
  placeholders (plain-length fallback first for Safari 15.4-16, which
  lacks the auto keyword).

Measured (Chromium renderer RSS, 390x844@3x, repeated fling to bottom,
3 runs each): index peak 807MB -> 420MB and memory is released after
scrolling (settles 350MB) instead of pinned; demos.html 631MB -> 222MB.
Functional suite passes in WebKit + Chromium, mobile + desktop: masonry
integrity under render-skip, video play/pause/teardown/resume rings,
deck switch, search, flip lifecycle, no horizontal overflow, zero page
errors.