3D Card Tilt

<!-- Tilt is scoped to the card and gated on (pointer: fine); touch stays flat. -->
<div class="tilt-card rounded-2xl border border-gray-200 bg-white p-6 shadow-lg transition-transform duration-200 ease-out will-change-transform motion-reduce:transition-none dark:border-gray-800 dark:bg-gray-900">
  <div class="mb-4 h-10 w-10 rounded-xl bg-gradient-to-br from-blue-500 to-indigo-600"></div>
  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Tilt me</h3>
  <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Move your cursor across the card to see it respond in 3D.</p>
</div>

<script>
  (function () {
    var node = document.querySelector('.tilt-card');
    if (!node) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    if (!window.matchMedia('(pointer: fine)').matches) return;
    node.addEventListener('pointermove', function (e) {
      var rect = node.getBoundingClientRect();
      var px = (e.clientX - rect.left) / rect.width - 0.5;
      var py = (e.clientY - rect.top) / rect.height - 0.5;
      node.style.transform = 'perspective(800px) rotateY(' + px * 24 + 'deg) rotateX(' + -py * 24 + 'deg)';
    });
    node.addEventListener('pointerleave', function () {
      node.style.transform = 'perspective(800px) rotateY(0deg) rotateX(0deg)';
    });
  })();
</script>