.glow-box {
  position: relative;
  /* anchor for ::after */
  /* keep your normal background here */
  /* background: url(...) center/cover no-repeat; */
}

/* the glow layer */
.glow-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* soft white ellipse that follows CSS vars --mx/--my */
  background: radial-gradient(
    ellipse 520px 340px at var(--mx, 60%) var(--my, 60%),
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0) 60%
  );

  /* optional: blend with whatever is underneath */
  mix-blend-mode: screen;
  /* try 'lighten' or remove if not needed */

  opacity: 0;
  transition: opacity 0.25s ease;
  will-change: background;
  /* hints for perf */
}

.glow-box:hover::after {
  opacity: 1;
}

/* accessibility: avoid constant repaint for users preferring less motion */
@media (prefers-reduced-motion: reduce) {
  .glow-box::after {
    transition: none;
  }
}