<canvas id="sparkleCanvas" style="position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none;"></canvas>
<script>
  const canvas = document.getElementById("sparkleCanvas");
  const ctx = canvas.getContext("2d");
  let w, h;
  let particles = [];

  function resize() {
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
  }

  window.addEventListener("resize", resize);
  resize();

  function createParticles(count) {
    for (let i = 0; i < count; i++) {
      particles.push({
        x: Math.random() * w,
        y: Math.random() * h,
        r: Math.random() * 1.5 + 0.5,
        alpha: Math.random(),
        dx: (Math.random() - 0.5) * 0.2,
        dy: (Math.random() - 0.5) * 0.2
      });
    }
  }

  createParticles(200);

  function animate() {
    ctx.clearRect(0, 0, w, h);
    for (let p of particles) {
      p.x += p.dx;
      p.y += p.dy;
      p.alpha += (Math.random() - 0.5) * 0.05;
      p.alpha = Math.min(1, Math.max(0.1, p.alpha));

      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fillStyle = `rgba(255, 255, 255, ${p.alpha})`;
      ctx.fill();

      if (p.x < 0 || p.x > w || p.y < 0 || p.y > h) {
        p.x = Math.random() * w;
        p.y = Math.random() * h;
      }
    }
    requestAnimationFrame(animate);
  }

  animate();
</script>