/* ================================================================
   MyPedra — glow.css
   Border-glow styles for glow.js. Kept in its own file because both
   the site and the UI lab use it, and neo.css redefines :root tokens
   that would fight the site's own theme system.
================================================================ */
/* ══ GLOWING BORDER — light that rims a surface as you approach ══
   The conic ring is masked to just the border box: two stacked masks,
   one clipped to the padding box and one to the border box, composited
   so only the frame survives. --glow-start aims the sweep at the cursor
   and --glow-active fades the whole thing in on proximity. */
.kf-glow { position: relative; }
.kf-glow::after {
  content: ""; position: absolute; inset: calc(-1 * var(--glow-w, 1.5px));
  border-radius: inherit; pointer-events: none; z-index: 1;
  padding: var(--glow-w, 1.5px);

  /* The wedge lives in the gradient itself — transparent either side of the
     lit arc — so no second element or blend mode is needed to carve it out.
     Colours run the tier palette so the rim belongs to the same system as
     every rank colour on the site. */
  background: conic-gradient(
    from calc((var(--glow-start, 0) - var(--glow-spread, 78)) * 1deg) at 50% 50%,
    transparent 0deg,
    #22D3EE calc(var(--glow-spread, 78) * 0.55deg),
    #2DD4BF calc(var(--glow-spread, 78) * 0.9deg),
    #F5B301 calc(var(--glow-spread, 78) * 1.25deg),
    transparent calc(var(--glow-spread, 78) * 2deg)
  );

  /* keep only the border ring: fill clipped to the content box is punched
     out of the full-box fill */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  opacity: var(--glow-active, 0);
  transition: opacity 260ms ease;
}
@media (prefers-reduced-motion: reduce) { .kf-glow::after { display: none; } }