<section class="cwb-stage" id="cwbStage">
  <div class="cwb-intro-overlay"><p>Scroll ↓ to chart the sky</p></div>
  <canvas id="cwbCanvas"></canvas>
  <div class="cwb-hud"><span id="cwbCount">0</span> / <span id="cwbTotal">0</span> links traced</div>
</section>
<section class="cwb-bottom"><p>The constellation is complete.</p></section>

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#03040c;color:#fff;font-family:system-ui,-apple-system,sans-serif}
.cwb-bottom{min-height:70vh;display:flex;justify-content:center;align-items:center;color:#7c83a6;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.cwb-stage{height:100vh;position:relative;overflow:hidden;background:#03040c}
.cwb-intro-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;pointer-events:none;z-index:5;color:#7c83a6;font-size:15px;letter-spacing:.08em;text-transform:uppercase;transition:opacity .4s ease;}
#cwbCanvas{display:block;width:100%;height:100%}
.cwb-hud{position:absolute;left:24px;bottom:24px;font-variant-numeric:tabular-nums;font-size:13px;letter-spacing:.14em;color:#a5b4fc;text-transform:uppercase;opacity:.8}

const canvas = document.getElementById('cwbCanvas');
const countEl = document.getElementById('cwbCount');
const totalEl = document.getElementById('cwbTotal');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 200);
camera.position.set(0, 0, 42);

// A fixed field of stars scattered through a sphere volume. Positions never
// change after creation, so the edge list computed below stays valid forever.
const STAR_COUNT = 260;
const starPositions = new Float32Array(STAR_COUNT * 3);
const starVec = [];
for (let i = 0; i < STAR_COUNT; i++) {
  const r = 14 + Math.random() * 26;
  const theta = Math.random() * Math.PI * 2;
  const phi = Math.acos(2 * Math.random() - 1);
  const v = new THREE.Vector3(
    r * Math.sin(phi) * Math.cos(theta),
    r * Math.sin(phi) * Math.sin(theta),
    r * Math.cos(phi)
  );
  starVec.push(v);
  starPositions[i * 3] = v.x;
  starPositions[i * 3 + 1] = v.y;
  starPositions[i * 3 + 2] = v.z;
}

const starGeo = new THREE.BufferGeometry();
starGeo.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
const starMat = new THREE.PointsMaterial({
  color: 0xdbeafe,
  size: 0.55,
  sizeAttenuation: true,
  transparent: true,
  opacity: 0.9,
});
const starField = new THREE.Points(starGeo, starMat);
scene.add(starField);

// A second, sparse point cloud reused as "pulse" markers — one per star,
// invisible until that star's first edge appears, then briefly flashed big.
const pulseSizes = new Float32Array(STAR_COUNT).fill(0);
const pulseGeo = new THREE.BufferGeometry();
pulseGeo.setAttribute('position', new THREE.BufferAttribute(starPositions.slice(), 3));
pulseGeo.setAttribute('pulseSize', new THREE.BufferAttribute(pulseSizes, 1));
const pulseMat = new THREE.PointsMaterial({
  color: 0x67e8f9,
  size: 0.1,
  sizeAttenuation: true,
  transparent: true,
  opacity: 0,
  blending: THREE.AdditiveBlending,
  depthWrite: false,
});
const pulseField = new THREE.Points(pulseGeo, pulseMat);
scene.add(pulseField);

// Precompute a fixed, sorted edge list by nearest-neighbor distance. Building
// this once at load time (rather than every frame) is what makes the reveal
// cheap: scroll only ever moves a draw-range cursor through a static array.
const candidates = [];
for (let i = 0; i < STAR_COUNT; i++) {
  for (let j = i + 1; j < STAR_COUNT; j++) {
    const d = starVec[i].distanceTo(starVec[j]);
    if (d < 7.5) candidates.push({ i, j, d });
  }
}
candidates.sort((a, b) => a.d - b.d);
// Cap the total edge count so the web reads as constellations, not a mesh blob.
const edges = candidates.slice(0, Math.min(220, candidates.length));

const linePositions = new Float32Array(edges.length * 2 * 3);
edges.forEach((e, idx) => {
  const a = starVec[e.i], b = starVec[e.j];
  const o = idx * 6;
  linePositions[o] = a.x; linePositions[o + 1] = a.y; linePositions[o + 2] = a.z;
  linePositions[o + 3] = b.x; linePositions[o + 4] = b.y; linePositions[o + 5] = b.z;
});
const lineGeo = new THREE.BufferGeometry();
lineGeo.setAttribute('position', new THREE.BufferAttribute(linePositions, 3));
// Start fully hidden — setDrawRange(0, 0) renders nothing without touching
// the underlying buffer, so revealing edges never re-uploads geometry.
lineGeo.setDrawRange(0, 0);
const lineMat = new THREE.LineBasicMaterial({
  color: 0x67e8f9,
  transparent: true,
  opacity: 0.75,
  blending: THREE.AdditiveBlending,
  depthWrite: false,
});
const lines = new THREE.LineSegments(lineGeo, lineMat);
scene.add(lines);

totalEl.textContent = edges.length;

const introEl = document.querySelector('.cwb-intro-overlay');
gsap.registerPlugin(ScrollTrigger);

const web = { t: 0 };
gsap.to(web, {
  t: 1,
  ease: 'none',
  scrollTrigger: {
    trigger: '#cwbStage',
    start: 'top top',
    end: '+=450%',
    scrub: 0.6,
    pin: true,
  },
});

function resize() {
  const w = canvas.clientWidth, h = canvas.clientHeight;
  renderer.setSize(w, h, false);
  camera.aspect = w / h;
  camera.updateProjectionMatrix();
}

let revealedCount = 0;
const flashUntil = new Float32Array(STAR_COUNT); // clock time each star's flash should fade by
let clock = 0;

function animate() {
  requestAnimationFrame(animate);
  if (introEl) introEl.style.opacity = (web.t > 0.03) ? '0' : '1';
  clock += 0.016;

  const t = Math.max(0, Math.min(1, web.t));
  const targetCount = Math.round(t * edges.length);

  // Only touch the geometry when the target actually changes, and only ever
  // grow/shrink the draw range — never rebuild the buffer or attributes.
  if (targetCount !== revealedCount) {
    if (targetCount > revealedCount) {
      for (let k = revealedCount; k < targetCount; k++) {
        const e = edges[k];
        // Flash whichever endpoint hasn't been lit yet, right as its first edge appears.
        flashUntil[e.i] = clock + 0.6;
        flashUntil[e.j] = clock + 0.6;
      }
    }
    revealedCount = targetCount;
    lineGeo.setDrawRange(0, revealedCount * 2);
    countEl.textContent = revealedCount;
  }

  const sizes = pulseGeo.getAttribute('pulseSize');
  let anyPulse = false;
  for (let i = 0; i < STAR_COUNT; i++) {
    const remain = flashUntil[i] - clock;
    if (remain > 0) {
      sizes.array[i] = 1.6 * (remain / 0.6);
      anyPulse = true;
    } else if (sizes.array[i] !== 0) {
      sizes.array[i] = 0;
    }
  }
  if (anyPulse) sizes.needsUpdate = true;
  // PointsMaterial has one uniform size for the whole cloud, so the flash is
  // approximated by nudging overall opacity — cheap and visually sufficient.
  pulseMat.opacity = anyPulse ? 0.9 : 0;
  pulseMat.size = 0.9;

  // Gentle continuous parallax rotation, independent of the reveal progress,
  // so the web still feels alive even while paused mid-scroll.
  starField.rotation.y += 0.0009;
  lines.rotation.y += 0.0009;
  pulseField.rotation.y += 0.0009;
  starField.rotation.x = Math.sin(clock * 0.05) * 0.08;
  lines.rotation.x = starField.rotation.x;
  pulseField.rotation.x = starField.rotation.x;

  camera.position.x = Math.sin(t * Math.PI * 0.4) * 4;
  camera.lookAt(0, 0, 0);

  renderer.render(scene, camera);
}

resize();
window.addEventListener('resize', resize);
animate();