.pointer-glow {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  isolation: isolate;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pointer-glow::before {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(
      180px circle at var(--pointer-x) var(--pointer-y),
      rgba(255, 214, 0, 0.9) 0%,
      rgba(255, 214, 0, 0.36) 32%,
      transparent 72%
    );
    content: '';
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .pointer-glow:hover::before {
    opacity: 1;
  }
}