// Bratonien Glitter Hover Effekt – feiner, rieselnder Staub
document.querySelectorAll(".door").forEach(door => {
  let canvas, ctx, particles = [], anim, hovering = false;

  // Canvas vorbereiten
  function setupCanvas() {
    if (canvas) return;
    canvas = document.createElement("canvas");
    canvas.width = door.offsetWidth * 1.4;
    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");
  }

  // Neue Partikel erzeugen (feiner, sanfter)
  function addParticles() {
    for (let i = 0; i < 3; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: -5, // startet oben, rieselt nach unten
        r: Math.random() * 0.8 + 0.2,
        alpha: Math.random() * 0.6 + 0.3,
        vx: (Math.random() - 0.5) * 0.2, // leichtes Driften
        vy: Math.random() * 0.6 + 0.3,   // nach unten
        life: Math.random() * 200 + 80
      });
    }
  }

  // Zeichnen und Bewegung
  function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (hovering) addParticles();

    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, 235, 160, ${p.alpha})`);
      grad.addColorStop(0.3, `rgba(255, 220, 120, ${p.alpha * 0.8})`);
      grad.addColorStop(1, "transparent");
      ctx.fillStyle = grad;
      ctx.arc(p.x, p.y, p.r * 3, 0, Math.PI * 2);
      ctx.fill();

      // Bewegung – feines Rieseln
      p.x += p.vx;
      p.y += p.vy;
      p.alpha -= 0.002;
      p.life--;
    });

    particles = particles.filter(p => p.life > 0 && p.y < canvas.height && p.alpha > 0);
    anim = requestAnimationFrame(draw);
  }

  // Hover starten
  door.addEventListener("mouseenter", () => {
    setupCanvas();
    hovering = true;
    cancelAnimationFrame(anim);
    draw();
  });

  // Hover beenden
  door.addEventListener("mouseleave", () => {
    hovering = false;
    setTimeout(() => {
      if (!hovering) {
        cancelAnimationFrame(anim);
        particles = [];
        ctx.clearRect(0, 0, canvas.width, canvas.height);
      }
    }, 300);
  });
});