/* Cursor-tracking border glow (React Bits "BorderGlow", ported to vanilla
   CSS/JS — no component framework on this site). Applied via JS
   (site.js -> initBorderGlow) to every card component that renders its
   own border: .card-grid, .plan, .review-card, #how-we-work .card,
   .stat-tile.

   Settings match the reference component defaults:
   edgeSensitivity=30, glowColor="40 80 80", glowRadius=49,
   glowIntensity=1, coneSpread=25. */

.glow-border {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --glow-padding: 49px;
  --cone-spread: 25;

  --glow-color: hsl(40deg 80% 80% / 100%);
  --glow-color-60: hsl(40deg 80% 80% / 60%);
  --glow-color-50: hsl(40deg 80% 80% / 50%);
  --glow-color-40: hsl(40deg 80% 80% / 40%);
  --glow-color-30: hsl(40deg 80% 80% / 30%);
  --glow-color-20: hsl(40deg 80% 80% / 20%);
  --glow-color-10: hsl(40deg 80% 80% / 10%);

  position: relative;
  isolation: isolate;
}

.glow-border > .glow-border-light {
  content: "";
  position: absolute;
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;
  mask-image: conic-gradient(
    from var(--cursor-angle) at center,
    black 2.5%, transparent 10%, transparent 90%, black 97.5%
  );
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
  transition: opacity 0.25s ease-out;
}

.glow-border:not(:hover) > .glow-border-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.glow-border > .glow-border-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    inset 0 0 25px 2px var(--glow-color-20),
    inset 0 0 50px 2px var(--glow-color-10),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20),
    0 0 50px 2px var(--glow-color-10);
}

@media (prefers-reduced-motion: reduce) {
  .glow-border > .glow-border-light { transition: none; }
}