script.js

/* ============================================================
   THE LIFE & DEATH OF A STAR — interactions
   ============================================================ */

/* ---------- 1. Animated starfield ---------- */
(function starfield() {
  const canvas = document.getElementById('starfield');
  const ctx = canvas.getContext('2d');
  let w, h, stars, shootTimer = 0;

  function resize() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
    const count = Math.min(260, Math.floor((w * h) / 6000));
    stars = Array.from({ length: count }, () => ({
      x: Math.random() * w,
      y: Math.random() * h,
      r: Math.random() * 1.4 + 0.3,
      tw: Math.random() * Math.PI * 2,
      sp: Math.random() * 0.015 + 0.004,
      z: Math.random() * 0.5 + 0.5
    }));
  }

  let shooters = [];
  function spawnShooter() {
    shooters.push({
      x: Math.random() * w,
      y: Math.random() * h * 0.5,
      len: Math.random() * 120 + 80,
      sp: Math.random() * 6 + 6,
      life: 1
    });
  }

  function draw() {
    ctx.clearRect(0, 0, w, h);
    for (const s of stars) {
      s.tw += s.sp;
      const a = 0.45 + Math.sin(s.tw) * 0.4;
      ctx.beginPath();
      ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255,255,255,${a * s.z})`;
      ctx.fill();
    }

    // occasional shooting star
    shootTimer++;
    if (shootTimer > 180 && Math.random() < 0.02) { spawnShooter(); shootTimer = 0; }
    shooters = shooters.filter(sh => sh.life > 0);
    for (const sh of shooters) {
      const dx = sh.sp, dy = sh.sp * 0.5;
      const grad = ctx.createLinearGradient(sh.x, sh.y, sh.x - sh.len, sh.y - sh.len * 0.5);
      grad.addColorStop(0, `rgba(255,255,255,${sh.life})`);
      grad.addColorStop(1, 'rgba(255,255,255,0)');
      ctx.strokeStyle = grad;
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(sh.x, sh.y);
      ctx.lineTo(sh.x - sh.len, sh.y - sh.len * 0.5);
      ctx.stroke();
      sh.x += dx; sh.y += dy; sh.life -= 0.012;
    }

    requestAnimationFrame(draw);
  }

  window.addEventListener('resize', resize);
  resize();
  draw();
})();

/* ---------- 2. Scroll progress bar ---------- */
const progressBar = document.getElementById('progress-bar');
window.addEventListener('scroll', () => {
  const scrolled = document.documentElement.scrollTop;
  const max = document.documentElement.scrollHeight - window.innerHeight;
  progressBar.style.width = (scrolled / max) * 100 + '%';
}, { passive: true });

/* ---------- 3. Reveal-on-scroll + accent theming ---------- */
const root = document.documentElement;
const sections = document.querySelectorAll('.stage, .outro');

const revealObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('reveal');
      const accent = entry.target.getAttribute('data-accent');
      if (accent) root.style.setProperty('--accent', accent);
    }
  });
}, { threshold: 0.25 });

sections.forEach(s => revealObserver.observe(s));

/* ---------- 4. Active timeline dot ---------- */
const navLinks = document.querySelectorAll('#timeline-nav a');
const stageMap = {};
navLinks.forEach(link => {
  const id = link.getAttribute('href').slice(1);
  stageMap[id] = link;
});

const navObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      navLinks.forEach(l => l.classList.remove('active'));
      const link = stageMap[entry.target.id];
      if (link) link.classList.add('active');
    }
  });
}, { threshold: 0.5 });

document.querySelectorAll('section[id^="stage"]').forEach(s => navObserver.observe(s));

/* ---------- 5. Supernova "detonate" button ---------- */
const detonateBtn = document.getElementById('detonate');
if (detonateBtn) {
  // create overlay element once
  const overlay = document.createElement('div');
  overlay.id = 'flash-overlay';
  document.body.appendChild(overlay);

  detonateBtn.addEventListener('click', () => {
    overlay.classList.remove('boom');
    // force reflow so the animation can restart
    void overlay.offsetWidth;
    overlay.classList.add('boom');
    spawnExplosionParticles();
  });

  function spawnExplosionParticles() {
    const N = 40;
    for (let i = 0; i < N; i++) {
      const p = document.createElement('div');
      const angle = (i / N) * Math.PI * 2;
      const dist = 120 + Math.random() * 220;
      const size = Math.random() * 6 + 2;
      p.style.cssText = `
        position:fixed; left:50%; top:50%; z-index:201;
        width:${size}px; height:${size}px; border-radius:50%;
        background:hsl(${Math.random() * 50 + 10},100%,${60 + Math.random() * 30}%);
        box-shadow:0 0 8px currentColor; pointer-events:none;
        transition:transform 1.4s cubic-bezier(.1,.7,.3,1), opacity 1.4s ease;
      `;
      document.body.appendChild(p);
      requestAnimationFrame(() => {
        p.style.transform = `translate(${Math.cos(angle) * dist}px, ${Math.sin(angle) * dist}px)`;
        p.style.opacity = '0';
      });
      setTimeout(() => p.remove(), 1500);
    }
  }
}

/* ---------- 6. Hero parallax on the star ---------- */
const heroStar = document.querySelector('.hero-star');
window.addEventListener('scroll', () => {
  if (!heroStar) return;
  const y = window.scrollY;
  if (y < window.innerHeight) {
    heroStar.style.transform = `translateY(${y * 0.3}px) scale(${1 - y / 2400})`;
    heroStar.style.opacity = String(1 - y / (window.innerHeight * 0.8));
  }
}, { passive: true });