// Glitter Hover Effekt – nur beim Hovern aktiv
document.querySelectorAll(".door").forEach(door => {
  let canvas, ctx, particles = [], anim;

  // Canvas vorbereiten
  function setupCanvas() {
    if (canvas) return;
    canvas = document.createElement("canvas");
    canvas.width = door.offsetWidth * 1.4; // etwas größer für Randflug
    canvas.height = door.offsetHeight * 1.4;
    canvas.style.position = "absolute";
    canvas.style.top = "-20%";
    canvas.style.left = "-20%";
    canvas.style.pointerEvents = "none";
    canvas.style.zIndex = "10";
    door.appendChild(canvas);
    ctx = canvas.getContext("2d");
  }

  // Partikel erzeugen
  function createParticles() {
    particles = Array.from({ length: 60 }, () => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      r: Math.random() * 1.5 + 0.3,
      alpha: Math.random() * 0.8 + 0.2,
      vx: (Math.random() - 0.5) * 0.8,
      vy: (Math.random() - 0.7) * 1.2,
      life: Math.random() * 80 + 30
    }));
  }

  // Zeichnen
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    particles.forEach(p => {
      ctx.beginPath();
      const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.r * 3);
      grad.addColorStop(0, `rgba(255, 230, 120, ${p.alpha})`);
      grad.addColorStop(1, "transparent");
      ctx.fillStyle = grad;
      ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
      ctx.fill();

      // Bewegung
      p.x += p.vx;
      p.y += p.vy;
      p.alpha -= 0.015;
      p.life--;
    });
    particles = particles.filter(p => p.life > 0 && p.alpha > 0);
    if (particles.length > 0) anim = requestAnimationFrame(draw);
  }

  // Hover Start
  door.addEventListener("mouseenter", () => {
    setupCanvas();
    createParticles();
    cancelAnimationFrame(anim);
    draw();
  });

  // Hover Ende
  door.addEventListener("mouseleave", () => {
    cancelAnimationFrame(anim);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  });
});