/* ============================================================
   GlowingEffect — a zero-dependency port of the Aceternity /
   motion-react cursor-tracking conic border.
   Same idea (a conic sweep whose angle is driven by the pointer),
   but the ring is carved with the classic padding-box XOR mask
   instead of the two-layer `mask-composite: intersect` trick:
   that version silently renders nothing once the element sits on
   top of a composited <img>, which is every card in this gallery.
   ============================================================ */

.glow-ring {
  position: absolute;
  inset: var(--glow-inset, -1px);
  border-radius: inherit;
  padding: var(--glow-w, 2.5px);
  pointer-events: none;
  z-index: 5;

  --glow-w: 2.5px;
  --spread: 56;
  --start: 0;
  --active: 0;

  /* the sweep: transparent, then cyan → blue → violet → pink, then
     transparent again, centred on --start with a ±--spread window */
  background: conic-gradient(
    from calc((var(--start) - var(--spread)) * 1deg),
    #7ad8ff00 0deg,
    #7ad8ff calc(var(--spread) * 0.42deg),
    #6f8cff calc(var(--spread) * 0.78deg),
    #b98cff calc(var(--spread) * 1.06deg),
    #ff9ad5 calc(var(--spread) * 1.34deg),
    #ff9ad500 calc(var(--spread) * 2deg)
  );

  /* keep only the outer band: full box minus content box */
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter: saturate(1.25) brightness(1.08)
    drop-shadow(0 0 7px rgba(140, 190, 255, .6));
  opacity: var(--active);
  transition: opacity .34s cubic-bezier(.32, .72, 0, 1);
}

/* white variant: monochrome sweep for very colourful photos */
.glow-ring.glow-white {
  background: conic-gradient(
    from calc((var(--start) - var(--spread)) * 1deg),
    #ffffff00 0deg,
    #ffffff calc(var(--spread) * 0.7deg),
    #ffffff00 calc(var(--spread) * 2deg)
  );
}

@media (prefers-reduced-motion: reduce) {
  .glow-ring { transition-duration: .01ms; }
}