Spotlight Hero

<!-- Spotlight Hero — cursor-tracking spotlight via --x / --y -->
<section class="nuda-spoth" id="spoth">
  <div class="nuda-spoth__content">
    <h2>Follow the light.</h2>
    <span class="nuda-spoth__sub">Move your cursor.</span>
  </div>
</section>

<script>
  const el = document.getElementById("spoth");
  el.addEventListener("pointermove", (e) => {
    const r = el.getBoundingClientRect();
    el.style.setProperty("--x", (e.clientX - r.left) + "px");
    el.style.setProperty("--y", (e.clientY - r.top) + "px");
  });
</script>

/* Spotlight Hero
   Radial spotlight tracks the cursor through --x / --y custom properties.
   Customize: spotlight radius & --spoth-accent. */

.nuda-spoth {
  --x: 50%;
  --y: 50%;
  --spoth-accent: 228, 255, 84;
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.nuda-spoth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--x) var(--y),
    rgba(var(--spoth-accent), 0.18),
    transparent 60%
  );
  transition: background 0.08s linear;
}

.nuda-spoth__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.nuda-spoth__content h2 {
  font: 800 clamp(2rem, 5vw, 3.5rem) ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  margin: 0;
  letter-spacing: -0.02em;
}

.nuda-spoth__sub {
  font: 500 1rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
}

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