SPOTLIGHT
HOVER

.spotlight-card {
  position: relative;
  width: 640px;
  height: 360px;
  background: #1A1A1A;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  --x: 50%;
  --y: 50%;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle 240px at var(--x) var(--y),
    rgba(233, 27, 137, 0.45),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

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

.spotlight-text {
  font-family: 'Oswald', sans-serif;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #FAFAFA;
  z-index: 1;
  pointer-events: none;
}

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

const card = document.querySelector('.spotlight-card');

card.addEventListener('mousemove', (e) => {
  const rect = card.getBoundingClientRect();
  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100;
  card.style.setProperty('--x', x + '%');
  card.style.setProperty('--y', y + '%');
});