Spotlight Card

<div class="nuda-spotlight-card">
  <div class="nuda-spotlight-card__inner">
    <strong>Spotlight</strong>
    <span>Move your cursor over me</span>
  </div>
</div>

/* Spotlight Card — a radial glow follows the cursor via CSS vars. */
.nuda-spotlight-card {
  --sx: 50%;
  --sy: 50%;
  position: relative;
  width: 240px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: #0c0c10;
  overflow: hidden;
  isolation: isolate;
}

.nuda-spotlight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--sx) var(--sy), rgba(228, 255, 84, 0.18), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

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

.nuda-spotlight-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-spotlight-card::before { transition: none; }
}

/* Spotlight Card — vanilla JS
   Tracks the cursor and updates the --sx / --sy spotlight position. */
(function () {
  document.querySelectorAll(".nuda-spotlight-card").forEach(function (card) {
    card.addEventListener("mousemove", function (e) {
      var r = card.getBoundingClientRect();
      card.style.setProperty("--sx", (e.clientX - r.left) + "px");
      card.style.setProperty("--sy", (e.clientY - r.top) + "px");
    });
  });
})();