/**
 * BorderGlow — React Bits (JS + CSS) vanilla port
 * Official structure preserved; gold palette defaults for this portfolio.
 * https://reactbits.dev/components/border-glow
 */

.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 35;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --border-radius: 22px;
  --glow-padding: 29px;
  --cone-spread: 14;
  --fill-opacity: 0.22;
  --card-bg: color-mix(in srgb, var(--surface-strong, #1a1a18) 88%, var(--bg, #120f17));

  /* Mesh defaults (overridden by JS buildGradientVars / gold theme) */
  --gradient-one: radial-gradient(at 80% 55%, #d9b76f 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #f1d78f 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #a88b4a 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #e8d5a3 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #d9b76f 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #f0cf87 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #bd9450 0px, transparent 50%);
  --gradient-base: linear-gradient(#d9b76f 0 100%);

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

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  display: grid;
  border: 1px solid rgb(255 255 255 / 15%);
  background: var(--card-bg, #120f17);
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 1px 2px,
    rgba(0, 0, 0, 0.1) 0px 2px 4px,
    rgba(0, 0, 0, 0.1) 0px 4px 8px,
    rgba(0, 0, 0, 0.1) 0px 8px 16px,
    rgba(0, 0, 0, 0.1) 0px 16px 32px,
    rgba(0, 0, 0, 0.1) 0px 32px 64px;
}

:root[data-theme="light"] .border-glow-card {
  --card-bg: #f1eadf;
  border-color: rgb(0 0 0 / 10%);
  --glow-color: hsl(38deg 55% 42% / 100%);
  --glow-color-60: hsl(38deg 55% 42% / 55%);
  --glow-color-50: hsl(38deg 55% 42% / 45%);
  --glow-color-40: hsl(38deg 55% 42% / 35%);
  --glow-color-30: hsl(38deg 55% 42% / 25%);
  --glow-color-20: hsl(38deg 55% 42% / 16%);
  --glow-color-10: hsl(38deg 55% 42% / 8%);
  --gradient-one: radial-gradient(at 80% 55%, #9b7530 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #c9a24d 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #7a5c22 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #d4b56a 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #9b7530 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #e0c882 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #bd9450 0px, transparent 50%);
  --gradient-base: linear-gradient(#9b7530 0 100%);
}

:root[data-theme="dark"] .border-glow-card {
  --card-bg: #151714;
}

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

.border-glow-card:not(:hover):not(.sweep-active)::before,
.border-glow-card:not(:hover):not(.sweep-active)::after,
.border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* colored mesh-gradient border */
.border-glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg, #120f17) 0 100%) padding-box,
    linear-gradient(rgb(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)));

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

/* colored mesh-gradient background fill near edges */
.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, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
}

/* outer glow layer */
.border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  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: plus-lighter;
}

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

.border-glow-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: auto;
  z-index: 2;
  border-radius: inherit;
  min-height: 0;
  height: 100%;
  color: inherit;
}

/* Keep card text above glow layers */
.border-glow-card > .border-glow-inner,
.border-glow-card > .border-glow-inner * {
  position: relative;
  z-index: 2;
}

/* ========== Portfolio site adaptations ========== */

.bento-card.border-glow-card,
.project-card__inner.border-glow-card,
.skill-card.border-glow-card,
.service-card.border-glow-card,
.contact__form.border-glow-card,
.contact__card.border-glow-card,
.timeline__item.border-glow-card {
  overflow: visible;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  --border-radius: var(--radius-lg, 8px);
  border-radius: var(--border-radius);
}

/* Legacy shine pseudo must yield to BorderGlow mesh layers */
.bento-card.border-glow-card::before,
.project-card__inner.border-glow-card::before {
  display: block;
  transform: none;
  background:
    linear-gradient(var(--card-bg, #120f17) 0 100%) padding-box,
    linear-gradient(rgb(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;
  border: 1px solid transparent;
  z-index: -1;
}

/* Override legacy `.bento-card > * { z-index: 2 }` */
.border-glow-card > .edge-light {
  z-index: 1 !important;
  position: absolute !important;
}

.border-glow-card > .border-glow-inner {
  position: relative;
  z-index: 2;
}

.skill-card.border-glow-card,
.service-card.border-glow-card,
.timeline__item.border-glow-card {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  padding: 0;
}

.skill-card.border-glow-card,
.service-card.border-glow-card {
  --card-bg: color-mix(in srgb, var(--surface-strong) 82%, var(--bg));
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--surface-strong) 74%, transparent),
      color-mix(in srgb, var(--clay, #dcc8ad) 34%, var(--surface))
    );
}

.skill-card.border-glow-card > .border-glow-inner,
.service-card.border-glow-card > .border-glow-inner,
.timeline__item.border-glow-card > .border-glow-inner {
  padding: clamp(20px, 2.8vw, 30px);
  overflow: hidden;
}

.project-card__inner.border-glow-card {
  height: 100%;
  text-decoration: none;
  color: inherit;
  --card-bg: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.project-card__inner.border-glow-card > .border-glow-inner {
  height: 100%;
  overflow: hidden;
}

.project-card__inner.border-glow-card:hover {
  transform: translateY(-4px);
}

.bento-card--touch.border-glow-card,
.bento-card--email.border-glow-card {
  padding: 0;
  height: 100%;
  min-height: 92px;
}

.bento-card--touch.border-glow-card > .border-glow-inner,
.bento-card--email.border-glow-card > .border-glow-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  min-height: 92px;
  padding: 18px 22px;
  font-weight: 800;
  color: inherit;
  overflow: hidden;
}

.bento-card--touch.border-glow-card {
  --card-bg: color-mix(in srgb, var(--surface-strong) 92%, var(--bg));
  background: var(--surface-strong);
}

.bento-card--email.border-glow-card {
  --card-bg: #c9a24d;
  background: var(--gradient-accent);
  color: var(--accent-text);
  border-color: transparent;
}

.bento-card--email.border-glow-card > .border-glow-inner {
  color: var(--accent-text);
}

/* A solid gold action should stay solid; masked glow layers create dark wedges here. */
.bento-card--email.border-glow-card::before,
.bento-card--email.border-glow-card::after,
.bento-card--email.border-glow-card > .edge-light {
  display: none;
}

.contact__form.border-glow-card,
.contact__card.border-glow-card {
  padding: 0;
  --card-bg: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

.contact__form.border-glow-card > .border-glow-inner,
.contact__card.border-glow-card > .border-glow-inner {
  padding: clamp(22px, 3vw, 32px);
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light {
    transition: none !important;
  }

  .border-glow-card:hover::before {
    opacity: 0.55;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .border-glow-card:hover > .edge-light {
    opacity: 0.35;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 620px) {
  .border-glow-card {
    --glow-padding: 18px;
  }
}