Add Three.js page graphics and GSAP site-wide motion system

- Home hero: full-height, with an interactive 3D wireframe of my face
  (MediaPipe landmarks from my-photo.png) rendered as a network graph
  with packets, scan sweeps and an assemble-on-load entry animation
- Inner pages: shared PageHero with a themed scene per page
  (About helix, Skills geodesic sphere, Work infra stack, Blog signal
  waves, Contact globe with connection arcs)
- Shared Three.js stage (framing, GSAP entry, pointer, off-screen
  pausing, reduced motion) with lazily loaded per-scene chunks
- GSAP motion system: data-reveal / data-reveal-stagger / data-parallax
  attributes, SplitText headings, divider draw-in, page exit fade,
  no-JS and reduced-motion fallbacks
- Mobile: graphic stacks above the text

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/styles/globals.css

@@ -103,3 +103,14 @@
 .markdown-rendered hr {
     @apply opacity-20 my-6;
 }
+
+/* ---- Motion system (see src/components/lib/motion/motion.ts) ---- */
+html.motion:not(.motion-fallback) [data-reveal],
+html.motion:not(.motion-fallback) [data-reveal-stagger] > * {
+    visibility: hidden;
+}
+
+.motion-line {
+    padding-bottom: 0.08em;
+    margin-bottom: -0.08em;
+}