/* Original implementation informed by cursor-position radial gradients:
   https://fwdtools.com/ui-snippets/spotlight-card/
   https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer */
.lens-tabs button,
.experience-list details {
  position: relative;
  isolation: isolate;
  --precision-x: 50%;
  --precision-y: 50%;
}

.lens-tabs button::before,
.experience-list details::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(230px circle at var(--precision-x) var(--precision-y), var(--blue), transparent 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.experience-list details::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: radial-gradient(160px circle at var(--precision-x) 0, var(--blue), transparent 80%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

/* Keyboard users receive the same quiet emphasis, plus the existing focus ring. */
.lens-tabs button:focus-visible::before,
.experience-list details:focus-within::before { opacity: .1; }
.experience-list details:focus-within::after { opacity: .8; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lens-tabs button.precision-active::before,
  .experience-list details.precision-active::before { opacity: .09; }
  .experience-list details.precision-active::after { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .lens-tabs button::before,
  .experience-list details::before,
  .experience-list details::after { transition: none; }
}