Spotlight card

<div class="spot">
  <h3>Spotlight card</h3>
  <p>Move your cursor across me, or press and drag on a touch screen.</p>
</div>

.spot {
  position: relative;
  width: min(360px, 100%);
  padding: 28px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  touch-action: pan-y;  /* vertical swipes still scroll the page */
  -webkit-tap-highlight-color: transparent;
}

/* The soft fill glow, centered on --x/--y (set by JavaScript). */
.spot::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(300px circle at var(--x, 50%) var(--y, 50%), rgba(19, 109, 245, 0.22), transparent 60%);
}
.spot.lit::before { opacity: 1; }

/* The glowing edge: a gradient masked down to a 1px ring around the card. */
.spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: radial-gradient(200px circle at var(--x, 50%) var(--y, 50%), var(--brand), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.spot h3 { margin: 0 0 8px; font: 700 20px system-ui, sans-serif; letter-spacing: -0.02em; }
.spot p { margin: 0; color: var(--muted); }

// Spotlight card: tracks where the pointer is over the card and stores it in
// two CSS variables. The CSS draws the glow; the script only reports positions.

document.querySelectorAll('.spot').forEach((card) => {
  function trackPointer(event) {
    const box = card.getBoundingClientRect();
    card.style.setProperty('--x', `${event.clientX - box.left}px`);
    card.style.setProperty('--y', `${event.clientY - box.top}px`);
  }

  function lightUp(event) {
    trackPointer(event);
    card.classList.add('lit');
  }

  function dim() {
    card.classList.remove('lit');
  }

  // Pointer events cover mouse, pen and touch with one set of listeners.
  // A touch press lights the card where your finger lands.
  card.addEventListener('pointerenter', lightUp);
  card.addEventListener('pointerdown', lightUp);
  card.addEventListener('pointermove', trackPointer);
  card.addEventListener('pointerleave', dim);
  card.addEventListener('pointercancel', dim);
});