/* Glow cards — ported from the 21st.dev "spotlight-card" React component.
 *
 * Two differences from the original, both deliberate:
 *
 *  1. No `background-attachment: fixed`. iOS Safari ignores it, which left the
 *     spotlight pinned to the wrong place on iPhone. Instead glow-card.js sets
 *     --x and --y per card, already relative to that card's own box.
 *  2. One shared pointer listener for every card rather than one each.
 *
 * Opt in by putting `data-glow` on the card. Hue runs purple-magenta to gold
 * across the viewport; the most-popular card pins itself to gold.
 */

[data-glow] {
  --border-size: 1px;
  --spotlight-size: 260px;
  --base: 300;            /* purple-magenta at the left edge  */
  --spread: 100;          /* ...sweeping to 40deg (gold) past 360 */
  --saturation: 85;
  --lightness: 60;
  --bg-spot-opacity: 0.08;
  --border-spot-opacity: 0.9;
  --border-light-opacity: 0.45;
  --hue: calc(var(--base) + (var(--xp, 0.5) * var(--spread)));

  position: relative;
  isolation: isolate;
  /* The body stays solid plum. Only this translucent wash sits on top of it,
     so nothing behind the card shows through. */
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at var(--x, 50%) var(--y, 50%),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity)),
    transparent 72%
  );
  /* the spotlight replaces the drop shadow the cards used to carry */
  box-shadow: none;
}

/* The most popular card is always gold, whatever the pointer is doing. */
[data-glow][data-glow-hue="gold"] {
  --base: 40;
  --spread: 0;
  --saturation: 92;
  --lightness: 62;
}

[data-glow]::before,
[data-glow]::after {
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: inherit;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 50% 50%;
  pointer-events: none;
  /* show the gradient only on the border ring */
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  mask: linear-gradient(transparent, transparent), linear-gradient(#fff, #fff);
  -webkit-mask-clip: padding-box, border-box;
  mask-clip: padding-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: intersect;
  opacity: var(--glow-strength, 1);
  transition: opacity .25s ease;
}

/* the coloured border spot */
[data-glow]::before {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at var(--x, 50%) var(--y, 50%),
    hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--border-spot-opacity)),
    transparent 100%
  );
  filter: brightness(1.5);
}

/* a smaller white core, so the brightest point reads as light not paint */
[data-glow]::after {
  background-image: radial-gradient(
    calc(var(--spotlight-size) * 0.4) calc(var(--spotlight-size) * 0.4) at var(--x, 50%) var(--y, 50%),
    hsl(0 0% 100% / var(--border-light-opacity)),
    transparent 100%
  );
}

/* Before the script runs, and if it never does, the card keeps a plain gold
   hairline rather than flashing a half-built effect. */
[data-glow]:not([data-glow-ready]) { background-image: none; }
[data-glow]:not([data-glow-ready])::before,
[data-glow]:not([data-glow-ready])::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-glow] { background-image: none; }
  [data-glow]::after { opacity: 0; }
  [data-glow]::before {
    opacity: .4;
    filter: none;
    background-image: none;
    border-color: var(--oro, #FCB557);
    transition: none;
  }
}