Spotlight Follow

<!-- Spotlight Follow — cursor radial spotlight (vanilla JS) -->
<div class="nuda-spotlight-follow" tabindex="0">
  <h3 class="nuda-spotlight-follow__title">Spotlight Follow</h3>
  <p class="nuda-spotlight-follow__desc">Cursor radial spotlight</p>
</div>

/* ── Spotlight Follow ────────────────────────────────────────
   Radial spotlight tracks the cursor via --nuda-sf2-x / -y.
   Customize:
     --nuda-sf2-bg     : card background
     --nuda-sf2-light  : spotlight color
   ──────────────────────────────────────────────────────────── */
.nuda-spotlight-follow {
  --nuda-sf2-x: 50%;
  --nuda-sf2-y: 50%;
  --nuda-sf2-bg: #09090b;
  --nuda-sf2-light: rgba(228, 255, 84, 0.18);

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

.nuda-spotlight-follow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 200px at var(--nuda-sf2-x) var(--nuda-sf2-y),
    var(--nuda-sf2-light),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.nuda-spotlight-follow:hover::before,
.nuda-spotlight-follow:focus-visible::before {
  opacity: 1;
}

.nuda-spotlight-follow:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

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

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

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

/* ── Spotlight Follow — vanilla JS ───────────────────────────
   Positions the radial spotlight at cursor coordinates.
   ──────────────────────────────────────────────────────────── */
;(function () {
  document.querySelectorAll(".nuda-spotlight-follow").forEach(function (card) {
    card.addEventListener("mousemove", function (e) {
      var rect = card.getBoundingClientRect();
      card.style.setProperty("--nuda-sf2-x", (e.clientX - rect.left) + "px");
      card.style.setProperty("--nuda-sf2-y", (e.clientY - rect.top) + "px");
    });
  });
})();