Make 3D graph canvas fixed to viewport behind scrolling content

Canvas now position:fixed covering full viewport. Content scrolls
over it while the 3D vendor network stays in place as a persistent
background effect.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

Author: 3 people

docs/projects/nthpartyfinder/index.html

@@ -770,11 +770,11 @@
   pointer-events: none;
 }
 #vendor-graph {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 100vh;
   z-index: 0;
   pointer-events: none;
 }
@@ -821,8 +821,9 @@
 <div class="haze haze-blue"></div>
 <div class="haze haze-purple"></div>
 
+<canvas id="vendor-graph"></canvas>
+
 <header class="hero">
-  <canvas id="vendor-graph"></canvas>
   <div class="hero-overlay"></div>
   <div class="container">
     <h1 class="hero-title">
@@ -1069,7 +1070,7 @@ <h2 class="section-title">Ready to Find Your Nth Party?</h2>
 
 // ── SETUP ──
 const canvas = document.getElementById('vendor-graph');
-const hero = canvas.parentElement;
+const hero = document.querySelector('.hero');
 const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
 renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
 
@@ -1304,9 +1305,8 @@ <h2 class="section-title">Ready to Find Your Nth Party?</h2>
 
 // ── RESIZE ──
 function resize() {
-  const rect = hero.getBoundingClientRect();
-  const w = rect.width;
-  const h = rect.height;
+  const w = window.innerWidth;
+  const h = window.innerHeight;
   renderer.setSize(w, h);
   camera.aspect = w / h;
   camera.updateProjectionMatrix();