/**
 * ERM Border Glow CSS — adapted from React Bits
 * Applied to .sc-card.erm-border-glow
 */

.sc-card.erm-border-glow {
  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  overflow: visible !important; /* allow glow to bleed outside card */
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--border-radius, 10px);
}

/* ── Pseudo-elements + edge-light span ───────────────────────────── */
.sc-card.erm-border-glow::before,
.sc-card.erm-border-glow::after,
.sc-card.erm-border-glow > .erm-edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: 0;
  pointer-events: none;
}

/* Fade out when not hovered */
.sc-card.erm-border-glow:not(:hover)::before,
.sc-card.erm-border-glow:not(:hover)::after,
.sc-card.erm-border-glow:not(:hover) > .erm-edge-light {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

/* ── Coloured mesh gradient border (::before) ────────────────────── */
.sc-card.erm-border-glow::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #0f0f11) 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%)
  );
}

/* ── Coloured mesh fill near edges (::after) ─────────────────────── */
.sc-card.erm-border-glow::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, 0.3) *
    (var(--edge-proximity) - var(--color-sensitivity)) /
    (100 - var(--color-sensitivity))
  );
  mix-blend-mode: soft-light;
}

/* ── Outer directional glow (edge-light span) ────────────────────── */
.sc-card.erm-border-glow > .erm-edge-light {
  inset: calc(var(--glow-padding, 36px) * -1);
  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;
}

.sc-card.erm-border-glow > .erm-edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding, 36px);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color, hsl(2deg 80% 50% / 100%)),
    inset 0 0 1px 0   var(--glow-color-60, hsl(2deg 80% 50% / 60%)),
    inset 0 0 3px 0   var(--glow-color-50, hsl(2deg 80% 50% / 50%)),
    inset 0 0 6px 0   var(--glow-color-40, hsl(2deg 80% 50% / 40%)),
    inset 0 0 15px 0  var(--glow-color-30, hsl(2deg 80% 50% / 30%)),
    inset 0 0 25px 2px var(--glow-color-20, hsl(2deg 80% 50% / 20%)),
    inset 0 0 50px 2px var(--glow-color-10, hsl(2deg 80% 50% / 10%)),
    0 0 1px 0   var(--glow-color-60, hsl(2deg 80% 50% / 60%)),
    0 0 3px 0   var(--glow-color-50, hsl(2deg 80% 50% / 50%)),
    0 0 6px 0   var(--glow-color-40, hsl(2deg 80% 50% / 40%)),
    0 0 15px 0  var(--glow-color-30, hsl(2deg 80% 50% / 30%)),
    0 0 25px 2px var(--glow-color-20, hsl(2deg 80% 50% / 20%)),
    0 0 50px 2px var(--glow-color-10, hsl(2deg 80% 50% / 10%));
}

/* Ensure card content sits above the glow layers */
.sc-card.erm-border-glow > *:not(.erm-edge-light) {
  position: relative;
  z-index: 2;
}