/* SpotlightCard — inspired by React Bits
   CREDIT: reactbits.dev SpotlightCard */

.card-spotlight {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(184, 165, 116, 0.55);
}

.card-spotlight__glow {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 220px at var(--mouse-x) var(--mouse-y),
    var(--spotlight-color),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}

.card-spotlight.is-spotlight-active .card-spotlight__glow,
.card-spotlight:focus-within .card-spotlight__glow {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card-spotlight__glow {
    display: none;
  }
}