/* ═══════════════════════════════════════════════════════════════
   BorderGlow — Vanilla JS/CSS adaptation
   Usage: add class .bgl-card to any element, then call initBGL(el)
   ═══════════════════════════════════════════════════════════════ */

.bgl-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 28;
  --color-sensitivity: calc(var(--edge-sensitivity) + 18);
  --border-radius: 14px;
  --glow-padding: 36px;
  --cone-spread: 22;
  --fill-opacity: 0.45;
  --glow-color:     hsl(51deg 90% 62% / 100%);
  --glow-color-60:  hsl(51deg 90% 62% / 60%);
  --glow-color-50:  hsl(51deg 90% 62% / 50%);
  --glow-color-40:  hsl(51deg 90% 62% / 40%);
  --glow-color-30:  hsl(51deg 90% 62% / 30%);
  --glow-color-20:  hsl(51deg 90% 62% / 20%);
  --glow-color-10:  hsl(51deg 90% 62% / 10%);
  --gradient-one:   radial-gradient(at 80% 55%, #F5DF4D 0px, transparent 50%);
  --gradient-two:   radial-gradient(at 20% 70%, #E2CC2A 0px, transparent 50%);
  --gradient-three: radial-gradient(at 10% 10%, #F5DF4D88 0px, transparent 50%);
  --gradient-four:  radial-gradient(at 60% 40%, rgba(245,223,77,.6) 0px, transparent 50%);
  --gradient-five:  radial-gradient(at 85% 85%, #E2CC2A 0px, transparent 50%);
  --gradient-six:   radial-gradient(at 80% 20%, rgba(245,223,77,.7) 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 50% 5%,  rgba(245,223,77,.8) 0px, transparent 50%);
  --gradient-base:  linear-gradient(#F5DF4D 0 100%);

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgba(255,255,255,.1);
  background: #151515;
  overflow: visible;
  box-shadow:
    rgba(0,0,0,.12) 0 1px 2px,
    rgba(0,0,0,.12) 0 2px 4px,
    rgba(0,0,0,.12) 0 4px 8px,
    rgba(0,0,0,.12) 0 8px 16px,
    rgba(0,0,0,.12) 0 16px 32px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bgl-card:hover { transform: translate3d(0,-4px,0.01px); }

.bgl-card > .bgl-edge,
.bgl-card::before,
.bgl-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity .25s ease-out;
  z-index: -1;
}
.bgl-card > .bgl-edge { content: none; }

/* fade out glow when not hovering */
.bgl-card:not(:hover)::before,
.bgl-card:not(:hover)::after,
.bgl-card:not(:hover) > .bgl-edge {
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

/* colored mesh gradient border */
.bgl-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(#151515 0 100%) padding-box,
    linear-gradient(rgba(255,255,255,0) 0 100%) border-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)));

  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%)
    );
}

/* fill glow near edges */
.bgl-card::after {
  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;

  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-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer edge glow */
.bgl-card > .bgl-edge {
  content: "";
  position: absolute;
  inset: calc(var(--glow-padding) * -1);
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  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 .25s ease-out;
}
.bgl-card:not(:hover) > .bgl-edge { opacity: 0; transition: opacity .6s ease-in-out; }

.bgl-card > .bgl-edge::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);
}

/* inner content wrapper — sits above glow layers */
.bgl-inner {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  display: flex;
  flex-direction: column;
}