/* ============================================================================
   border-glow.css — React Bits "Border Glow", ported to the site's tokens.

   The reference (landing-refs/border-glow.md) is a dark product card with a
   three-colour mesh border that lights up near the cursor. Two things are
   pointer-driven and nothing else moves: --edge-proximity (0 centre -> 1 edge)
   and --cursor-angle. border-glow.js writes those two; every colour below
   resolves through tokens.css, so the effect is dark-mode correct for free.

   The reference's runtime buildGlowVars() / buildGradientVars() are CSS here:
   the seven mesh stops and the seven glow alphas are static once the three
   mesh colours and the glow hue are tokens, so there is nothing for JS to
   compute per element.

   The --bg-* custom props are the mapping surface: the card ground, the three
   mesh colours (brand, a lighter tint, a warm peach) and the glow hue, all
   derived from tokens, re-pointed once under [data-theme="dark"].
   ========================================================================== */

:root {
  --bg-card:   var(--paper);
  --bg-mesh-1: var(--brand);
  --bg-mesh-2: color-mix(in srgb, var(--brand) 55%, var(--white));
  --bg-mesh-3: color-mix(in srgb, var(--brand) 42%, var(--map-ocean));
  --bg-glow:   var(--brand);
}
[data-theme="dark"] {
  --bg-card:   var(--surface);
  --bg-mesh-1: var(--brand);
  --bg-mesh-2: var(--brand-55);
  --bg-mesh-3: var(--regdot);
  --bg-glow:   var(--brand);
}

.border-glow-card {
  /* written by border-glow.js on pointermove */
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  /* written once by attachBorderGlow(); the values here are its defaults */
  --edge-sensitivity: 30;
  --border-radius: 12px;
  --glow-padding: 24px;
  --cone-spread: 25;
  --fill-opacity: .5;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);

  /* the seven glow alphas (reference: opacities 100/60/50/40/30/20/10) */
  --glow-color:    color-mix(in srgb, var(--bg-glow) 100%, transparent);
  --glow-color-60: color-mix(in srgb, var(--bg-glow)  60%, transparent);
  --glow-color-50: color-mix(in srgb, var(--bg-glow)  50%, transparent);
  --glow-color-40: color-mix(in srgb, var(--bg-glow)  40%, transparent);
  --glow-color-30: color-mix(in srgb, var(--bg-glow)  30%, transparent);
  --glow-color-20: color-mix(in srgb, var(--bg-glow)  20%, transparent);
  --glow-color-10: color-mix(in srgb, var(--bg-glow)  10%, transparent);

  /* the seven mesh stops — reference GRADIENT_POSITIONS x COLOR_MAP */
  --gradient-one:   radial-gradient(at 80% 55%, var(--bg-mesh-1) 0px, transparent 50%);
  --gradient-two:   radial-gradient(at 69% 34%, var(--bg-mesh-2) 0px, transparent 50%);
  --gradient-three: radial-gradient(at  8%  6%, var(--bg-mesh-3) 0px, transparent 50%);
  --gradient-four:  radial-gradient(at 41% 38%, var(--bg-mesh-1) 0px, transparent 50%);
  --gradient-five:  radial-gradient(at 86% 85%, var(--bg-mesh-2) 0px, transparent 50%);
  --gradient-six:   radial-gradient(at 82% 18%, var(--bg-mesh-3) 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51%  4%, var(--bg-mesh-2) 0px, transparent 50%);
  --gradient-base:  linear-gradient(var(--bg-mesh-1) 0 100%);

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  overflow: visible;
}

/* The three painted layers. A negative z-index keeps them above the card's own
   background and below its label, so the text never dims. */
.border-glow-card::before,
.border-glow-card::after,
.border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity .25s ease-out;
  z-index: -1;
  pointer-events: none;
}
.border-glow-card:not(:hover)::before,
.border-glow-card:not(:hover)::after,
.border-glow-card:not(:hover) > .edge-light {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}

/* 1 · the mesh-gradient border, masked to a cone around the cursor angle */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card) 0 100%) padding-box,
    var(--gradient-one) border-box, var(--gradient-two) border-box,
    var(--gradient-three) border-box, var(--gradient-four) border-box,
    var(--gradient-five) border-box, var(--gradient-six) border-box,
    var(--gradient-seven) border-box, var(--gradient-base) border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
  mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
}

/* 2 · the mesh wash inside the card, subtracted away from the middle */
.border-glow-card::after {
  border: 1px solid transparent;
  background:
    var(--gradient-one) padding-box, var(--gradient-two) padding-box,
    var(--gradient-three) padding-box, var(--gradient-four) padding-box,
    var(--gradient-five) padding-box, var(--gradient-six) padding-box,
    var(--gradient-seven) padding-box, var(--gradient-base) padding-box;
  -webkit-mask-image: linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-image: linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  -webkit-mask-composite: source-out, source-over, source-over, source-over, source-over, source-over;
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  /* The reference blends soft-light over its near-black card; on the paper
     ground that erases the wash, so light keeps normal and dark takes the
     reference's blend — the source's "--light" variant, driven by theme. */
  mix-blend-mode: normal;
}
[data-theme="dark"] .border-glow-card::after { mix-blend-mode: soft-light; }

/* 3 · the outer glow — a ring of shadows outside the border, cone-masked */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  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: normal;
}
[data-theme="dark"] .border-glow-card > .edge-light { mix-blend-mode: plus-lighter; }

.border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: var(--border-radius);
  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);
}

/* The glow is pointer-only, so keyboard focus carries its own ring — and it
   has to sit outside the card, which is why the card is overflow:visible. */
.border-glow-card:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Reduced motion: the glow is allowed (it tracks the pointer, it does not
   animate on its own) but nothing fades in or out. */
@media (prefers-reduced-motion: reduce) {
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light { transition: none; }
}