/* ── Spotlight / Glow Card Effect ────────────────────────────────────────── */
/* Cursor position tracked via JS on :root → background-attachment:fixed     */
/* lets every card gradient reference the same viewport coordinates.         */

:root {
  --x: -9999;
  --y: -9999;
  --xp: 0;
  --yp: 0;
}

/* Inner spotlight — very subtle background highlight that follows cursor */
.glow-spotlight {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-attachment: fixed;
  background-image: radial-gradient(
    320px 320px at calc(var(--x) * 1px) calc(var(--y) * 1px),
    hsl(calc(162 + var(--xp) * 55) 75% 65% / 0.08),
    transparent 65%
  );
}

/* Border glow — only the border ring lights up, not the card interior */
.glow-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background-attachment: fixed;
  background-image: radial-gradient(
    300px 300px at calc(var(--x) * 1px) calc(var(--y) * 1px),
    hsl(calc(162 + var(--xp) * 55) 100% 68% / 0.92),
    transparent 100%
  );

  /* Show gradient ONLY on the border ring (border-box minus padding-box) */
  mask:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  mask-clip: border-box, padding-box;
  mask-composite: subtract;

  -webkit-mask:
    linear-gradient(#fff, #fff),
    linear-gradient(#fff, #fff);
  -webkit-mask-clip: border-box, padding-box;
  -webkit-mask-composite: source-out;
}