Tilt 3D

<!-- Tilt 3D — 3D tilt toward cursor (vanilla JS) -->
<div class="nuda-tilt3d">
  <div class="nuda-tilt3d__inner">
    <h3 class="nuda-tilt3d__title">Tilt 3D</h3>
    <p class="nuda-tilt3d__desc">Tilts toward your cursor</p>
  </div>
</div>

/* ── Tilt 3D ─────────────────────────────────────────────────
   Tilt driven by JS via --nuda-t3-rx / -ry custom properties.
   Customize:
     --nuda-t3-bg     : card background
   ──────────────────────────────────────────────────────────── */
.nuda-tilt3d {
  --nuda-t3-rx: 0deg;
  --nuda-t3-ry: 0deg;

  width: 280px;
  perspective: 800px;
}

.nuda-tilt3d__inner {
  padding: 32px 24px;
  background: linear-gradient(135deg, #18181b, #09090b);
  border: 1px solid rgba(228, 255, 84, 0.15);
  border-radius: 16px;
  color: #fafafa;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  transform: rotateX(var(--nuda-t3-rx)) rotateY(var(--nuda-t3-ry));
  transition: transform 0.15s ease;
  will-change: transform;
}

.nuda-tilt3d__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
}

.nuda-tilt3d__desc {
  font-size: 0.85rem;
  opacity: 0.65;
  margin: 6px 0 0;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-tilt3d__inner {
    transition: none;
    transform: none !important;
  }
}

/* ── Tilt 3D — vanilla JS ────────────────────────────────────
   Maps cursor position to rotateX / rotateY.
   Respects prefers-reduced-motion.
   ──────────────────────────────────────────────────────────── */
;(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  var maxTilt = 14; /* degrees */

  document.querySelectorAll(".nuda-tilt3d").forEach(function (card) {
    var inner = card.querySelector(".nuda-tilt3d__inner");
    if (!inner) return;

    card.addEventListener("mousemove", function (e) {
      var rect = card.getBoundingClientRect();
      var x = (e.clientX - rect.left) / rect.width;
      var y = (e.clientY - rect.top) / rect.height;
      inner.style.setProperty("--nuda-t3-rx", ((0.5 - y) * maxTilt) + "deg");
      inner.style.setProperty("--nuda-t3-ry", ((x - 0.5) * maxTilt) + "deg");
    });

    card.addEventListener("mouseleave", function () {
      inner.style.setProperty("--nuda-t3-rx", "0deg");
      inner.style.setProperty("--nuda-t3-ry", "0deg");
    });
  });
})();