const cards = document.querySelectorAll(".card");

cards.forEach(el => {
  // Variable pour suivre si la souris est sur la carte
  let isHovered = false;

  // Événement lorsque la souris entre dans la carte
  el.addEventListener("mouseenter", () => {
    
    // La souris est sur la carte
    isHovered = true;
  });

  // Événement lorsque la souris bouge à l'intérieur de la carte
  el.addEventListener("mousemove", e => {
    if (isHovered) {

      // Récupérer les dimensions et la position de la carte
      let elRect = el.getBoundingClientRect();

      // Calculer la position de la souris relative à la carte
      let x = e.clientX - elRect.x;
      let y = e.clientY - elRect.y;

      // Calculer les angles de rotation en fonction de la position de la souris
      let midCardWidth = elRect.width / 2;
      let midCardHeight = elRect.height / 2;
      let angleY = -(x - midCardWidth) / 8;
      let angleX = (y - midCardHeight) / 8;

      // Calculer les coordonnées du dégradé radial en fonction de la position de la souris
      let glowX = (x / elRect.width) * 100;
      let glowY = (y / elRect.height) * 100;

      // Appliquer les transformations CSS à l'élément enfant numéro 0 et 1 de la carte
      el.children[0].style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.1)`;
      el.children[1].style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg) scale(1.1)`;
      // Appliquer le dégradé radial au fond d'arrière-plan de l'élément enfant numéro 1 de la carte
      el.children[1].style.background = `radial-gradient(circle at ${glowX}% ${glowY}%, rgb(184, 196, 211), transparent)`;
    }
  });

  // Événement lorsque la souris quitte la carte
  el.addEventListener("mouseleave", () => {
    // La souris n'est plus sur la carte
    isHovered = false;
    // Réinitialiser les transformations CSS des éléments enfants de la carte
    el.children[0].style.transform = "rotateX(0) rotateY(0)";
    el.children[1].style.transform = "rotateX(0) rotateY(0)";
    // Réinitialiser le fond d'arrière-plan de l'élément enfant numéro 1 de la carte
    el.children[1].style.background = "";
  });
});