Spotlight Card

<!-- Spotlight Card — spotlight follows cursor on card -->
<div class="nuda-spotlight-card">
  <div class="nuda-spotlight-card__light"></div>
  <div class="nuda-spotlight-card__content">
    <h3 class="nuda-spotlight-card__title">Spotlight Card</h3>
    <p class="nuda-spotlight-card__desc">Cursor spotlight follows you</p>
  </div>
</div>

/* ── Spotlight Card ──────────────────────────────────────────
   Spotlight is a radial-gradient positioned via JS.
   Customize:
     --nuda-sp-bg        : card background
     --nuda-sp-clr       : text color
     --nuda-sp-radius    : corner radius
     --nuda-sp-light     : spotlight color
     --nuda-sp-size      : spotlight diameter
   ──────────────────────────────────────────────────────────── */
.nuda-spotlight-card {
  --nuda-sp-bg: #0f0f23;
  --nuda-sp-clr: #e0e7ff;
  --nuda-sp-radius: 16px;
  --nuda-sp-light: rgba(99, 102, 241, 0.15);
  --nuda-sp-size: 300px;
  --nuda-sp-x: 50%;
  --nuda-sp-y: 50%;

  position: relative;
  width: 280px;
  padding: 28px 20px;
  background: var(--nuda-sp-bg);
  border-radius: var(--nuda-sp-radius);
  overflow: hidden;
  color: var(--nuda-sp-clr);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* The light layer */
.nuda-spotlight-card__light {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle var(--nuda-sp-size) at var(--nuda-sp-x) var(--nuda-sp-y),
    var(--nuda-sp-light),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.nuda-spotlight-card:hover .nuda-spotlight-card__light {
  opacity: 1;
}

.nuda-spotlight-card__content {
  position: relative;
  z-index: 1;
}

.nuda-spotlight-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.nuda-spotlight-card__desc {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 6px 0 0;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-spotlight-card__light {
    transition: none;
  }
}

/* ── Spotlight Card — vanilla JS ─────────────────────────────
   Positions the radial-gradient spotlight at cursor coordinates.
   Respects prefers-reduced-motion.
   ──────────────────────────────────────────────────────────── */
;(function () {
  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

  document.querySelectorAll(".nuda-spotlight-card").forEach(function (card) {
    card.addEventListener("mousemove", function (e) {
      var rect = card.getBoundingClientRect();
      var x = e.clientX - rect.left;
      var y = e.clientY - rect.top;
      card.style.setProperty("--nuda-sp-x", x + "px");
      card.style.setProperty("--nuda-sp-y", y + "px");
    });
  });
})();