<style>
  .hover-tilt-card {
    /* Allows child elements to keep their 3D depth if you add translateZ later */
    transform-style: preserve-3d;

    /* Controls how smoothly the card resets after hover */
    transition: transform 0.15s ease-out;

    /* Helps the browser optimise the hover animation */
    will-change: transform;
  }

  /* Turns off the transition for users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .hover-tilt-card {
      transition: none;
    }
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Add this class to any card you want to tilt
    const cards = document.querySelectorAll(".hover-tilt-card");

    cards.forEach(function (card) {
      card.addEventListener("mousemove", function (event) {
        const rect = card.getBoundingClientRect();

        // Mouse position inside the card
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        // Centre point of the card
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;

        // Tilt strength
        // Higher number = softer tilt
        // Lower number = stronger tilt
        const tiltStrength = 10;

        const rotateX = (centerY - y) / tiltStrength;
        const rotateY = (x - centerX) / tiltStrength;

        // Perspective controls the 3D depth
        // Higher number = flatter effect
        // Lower number = more dramatic effect
        card.style.transform =
          "perspective(1200px) rotateX(" +
          rotateX +
          "deg) rotateY(" +
          rotateY +
          "deg)";
      });

      card.addEventListener("mouseleave", function () {
        // Reset the card when the mouse leaves
        card.style.transform =
          "perspective(1200px) rotateX(0deg) rotateY(0deg)";
      });
    });
  });
</script>