/* ============================================================
   border-glow.css
   Vanilla port of the React Bits "BorderGlow" effect, adapted
   for DF Media's static site + warm brand palette.

   The React component's outer halo is replaced with an INSET
   glow ring so it survives cards that use overflow:hidden.
   Two injected layers per card (.bg-fx, .bg-glow) sit at
   z-index:-1 — behind your content, above the card background —
   so nothing collides with existing card internals.

   Effect is driven entirely by two custom properties set on the
   card by border-glow.js on pointer-move:
     --edge-proximity : 0–100  (how close the cursor is to an edge)
     --cursor-angle   : deg    (direction of the cursor from centre)
   ============================================================ */

.bg-enhanced {
  position: relative;
  isolation: isolate;                 /* keep the z-index:-1 layers inside this card */
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --bg-cone: 25;                      /* width of the directional wedge (%) */
  --bg-edge-sensitivity: 26;          /* proximity at which the glow ring starts */
  --bg-color-sensitivity: 46;         /* proximity at which the coloured border starts */
  --bg-card: #14100f;                 /* overwritten per-card by JS */
}

.bg-fx,
.bg-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
/* Coloured border/fill sits behind your content (shows on text cards);
   the glow ring sits ABOVE content so it lights the edges over images too. */
.bg-fx  { z-index: -1; }
.bg-glow { z-index: 1; }

/* ── moving mesh-gradient border ─────────────────────────────
   The padding-box fill masks the gradient interior so only the
   1px border ring shows colour; a conic mask limits it to a
   wedge pointing at the cursor. */
.bg-fx::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--bg-card) 0 100%) padding-box,
    var(--g1) border-box, var(--g2) border-box, var(--g3) border-box,
    var(--g4) border-box, var(--g5) border-box, var(--g6) border-box,
    var(--g7) border-box, var(--gbase) border-box;
  opacity: calc((var(--edge-proximity) - var(--bg-color-sensitivity)) / (100 - var(--bg-color-sensitivity)));
  transition: opacity .28s ease-out;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--bg-cone) * 1%),
    transparent calc((var(--bg-cone) + 15) * 1%),
    transparent calc((100 - var(--bg-cone) - 15) * 1%),
    black calc((100 - var(--bg-cone)) * 1%));
          mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--bg-cone) * 1%),
    transparent calc((var(--bg-cone) + 15) * 1%),
    transparent calc((100 - var(--bg-cone) - 15) * 1%),
    black calc((100 - var(--bg-cone)) * 1%));
}

/* ── soft colour fill drifting in from the nearest edge ─────── */
.bg-fx::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--g1), var(--g2), var(--g3), var(--g4), var(--g5), var(--g6), var(--g7), var(--gbase);
  opacity: calc(0.42 * (var(--edge-proximity) - var(--bg-color-sensitivity)) / (100 - var(--bg-color-sensitivity)));
  mix-blend-mode: soft-light;
  transition: opacity .28s ease-out;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 40%, black 72%);
          mask-image: radial-gradient(ellipse at 50% 50%, transparent 40%, black 72%);
}

/* ── inset glow ring (replaces the component's outer halo) ──── */
.bg-glow {
  opacity: calc((var(--edge-proximity) - var(--bg-edge-sensitivity)) / (100 - var(--bg-edge-sensitivity)));
  mix-blend-mode: plus-lighter;
  transition: opacity .28s ease-out;
  box-shadow:
    inset 0 0 0 1px var(--glow-100),
    inset 0 0 3px 0 var(--glow-50),
    inset 0 0 8px 0 var(--glow-40),
    inset 0 0 18px 0 var(--glow-30),
    inset 0 0 34px 2px var(--glow-20),
    inset 0 0 60px 4px var(--glow-10);
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center,
    black 2.5%, transparent 12%, transparent 88%, black 97.5%);
          mask-image: conic-gradient(from var(--cursor-angle) at center,
    black 2.5%, transparent 12%, transparent 88%, black 97.5%);
}

/* No pointer, or reduced-motion: no glow at all */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .bg-fx, .bg-glow { display: none; }
}