/* Reusable cursor-follow grid spotlight (same visual as homepage `.section-brief__grid-spotlight`).
   Pair with `section-grid-spotlight.js` on sections that include `.section-grid-spotlight__layer`. */

.section-grid-spotlight {
  position: relative;
  isolation: isolate;
  --sg-spot-x: 50%;
  --sg-spot-y: 50%;
  --sg-grid-cell: 100px;
  --sg-spot-radius: clamp(140px, 24vw, 340px);
  --sg-grid-line: var(--color-light-black);
}

.section-grid-spotlight__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background-image:
    repeating-linear-gradient(
      to right,
      var(--sg-grid-line) 0 3px,
      transparent 3px var(--sg-grid-cell)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--sg-grid-line) 0 3px,
      transparent 3px var(--sg-grid-cell)
    );
  -webkit-mask-image: radial-gradient(
    circle var(--sg-spot-radius) at var(--sg-spot-x) var(--sg-spot-y),
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.45) 52%,
    transparent 70%
  );
  mask-image: radial-gradient(
    circle var(--sg-spot-radius) at var(--sg-spot-x) var(--sg-spot-y),
    #000 0%,
    #000 32%,
    rgba(0, 0, 0, 0.45) 52%,
    transparent 70%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.section-grid-spotlight:hover .section-grid-spotlight__layer {
  opacity: 0.5;
}

@media (max-width: 768px) {
  .section-grid-spotlight__layer {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-grid-spotlight__layer {
    display: none;
  }
}