/*
 * Glow card (2026-10-07) - after the GlowCard component Naeem sent: a soft
 * spotlight follows the pointer across a card and lights the part of its
 * edge it passes. Our colours, not the original's: the hue runs from the
 * brand violet (262, #985CFF) at the left of the screen to the brand cyan
 * (183, #3FE0E9) at the right.
 *
 * glow-card.js picks the cards (data-glow, or the selectors it knows) and
 * keeps --hn-gx / --hn-gy (pointer, in the card's own pixels), --hn-gxp (0-1
 * across the screen) and --hn-go (1 near the pointer, 0 away) on each one.
 * The ring is ::before and the inner light ::after - the script only uses a
 * pseudo-element the card is not already using, and leaves a card alone on a
 * touch screen, where there is no pointer to follow.
 */
.hn-glow {
  --hn-glow-l: 68%;
  --hn-glow-fill-a: .17;
  --hn-glow-ring-a: .95;
  --hn-glow-hue: calc(262 - (var(--hn-gxp, .5) * 79));
  isolation: isolate;
}

html[data-theme=light] .hn-glow,
body.theme-light .hn-glow {
  --hn-glow-l: 56%;
  --hn-glow-fill-a: .10;
  --hn-glow-ring-a: .9;
}

.hn-glow-ring::before,
.hn-glow-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--hn-go, 0);
  transition: opacity 180ms cubic-bezier(.2, .8, .2, 1);
}

/* The edge: two lights on a 2px ring just inside the border - a coloured
   one, and a smaller white core where the pointer is closest. */
.hn-glow-ring::before {
  z-index: 3;
  padding: 2.5px;
  background:
    radial-gradient(90px circle at calc(var(--hn-gx, -999) * 1px) calc(var(--hn-gy, -999) * 1px), hsl(0 0% 100% / .9), transparent 100%),
    radial-gradient(230px circle at calc(var(--hn-gx, -999) * 1px) calc(var(--hn-gy, -999) * 1px), hsl(var(--hn-glow-hue) 95% var(--hn-glow-l) / var(--hn-glow-ring-a)), transparent 100%);
  -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 exclude, linear-gradient(#000 0 0);
  filter: brightness(1.35) saturate(1.2);
}

/* The face: a wide, faint light under the content. */
.hn-glow-fill::after {
  z-index: -1;
  background: radial-gradient(340px circle at calc(var(--hn-gx, -999) * 1px) calc(var(--hn-gy, -999) * 1px), hsl(var(--hn-glow-hue) 95% var(--hn-glow-l) / var(--hn-glow-fill-a)), transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hn-glow-ring::before,
  .hn-glow-fill::after { transition: none; }
}

@media (hover: none), (pointer: coarse) {
  .hn-glow-ring::before,
  .hn-glow-fill::after { display: none; }
}