/* ============================================
   BORDER GLOW — vanilla port of React Bits
   Sky-blue palette tuned for the miell theme
   ============================================ */

.glow-card {
  /* control vars */
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 12;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --glow-radius: 47px;
  --glow-intensity: 1.5;
  --cone-spread: 25;
  --fill-opacity: 0.5;
  --border-radius: 22px;

  /* sky-blue glow */
  --glow-h: 196;
  --glow-s: 42;
  --glow-l: 64;
  --glow-color: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 100%);
  --glow-color-60: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 60%);
  --glow-color-50: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 50%);
  --glow-color-40: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 40%);
  --glow-color-30: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 30%);
  --glow-color-20: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 20%);
  --glow-color-10: hsl(var(--glow-h) var(--glow-s) var(--glow-l) / 10%);

  /* mesh gradient border colors */
  --gradient-one: radial-gradient(at 80% 55%, #86C1D5 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #5a8fa8 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #a8d8e8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #6ea7c0 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #86C1D5 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #c0e0f0 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #5a8fa8 0px, transparent 50%);
  --gradient-base: linear-gradient(#86C1D5 0 100%);

  position: relative;
  isolation: isolate;
  overflow: visible;
  border-radius: var(--border-radius);
  display: flex;
  min-height: 420px;
  /* subtle lift */
  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;
}

.glow-card > .service-card {
  flex: 1;
  border-radius: inherit;
}

/* gradient border (::before) */
.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background:
    linear-gradient(#171717 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(--glow-intensity) * (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%)
    );
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.25s ease-out;
}

/* gradient fill (::after) */
.glow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  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;
  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(--glow-intensity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.25s ease-out;
}

/* outer glow layer */
.glow-edge-light {
  position: absolute;
  inset: calc(var(--glow-radius) * -1);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: calc(var(--glow-intensity) * (var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  mix-blend-mode: plus-lighter;
  transition: opacity 0.25s ease-out;
}

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

/* idle: subtle persistent border, bloom stays hidden */
.glow-card:not(:hover):not(.sweep-active)::after,
.glow-card:not(:hover):not(.sweep-active) > .glow-edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.glow-card:not(:hover):not(.sweep-active)::before {
  opacity: 0.65;
  transition: opacity 0.75s ease-in-out;
}

/* gallery-item variant — square aspect, no min-height */
.glow-card:has(> .gallery-item) {
  min-height: auto;
  display: block;
  overflow: visible;
}

.glow-card > .gallery-item {
  width: 100%;
  border-radius: inherit;
  min-height: auto;
  overflow: visible;
  z-index: 0;
}

/* hide the glow-card's own ::before/::after for gallery items */
.glow-card:has(> .gallery-item)::before,
.glow-card:has(> .gallery-item)::after {
  display: none;
}

/* gallery-item glow overlay (dedicated inner element) */
.glow-gallery-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.25s ease-out;
  background:
    linear-gradient(#171717 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;
  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%)
    );
}

.glow-card:has(> .gallery-item):hover > .glow-gallery-overlay {
  opacity: calc(var(--glow-intensity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
}

.glow-card:has(> .gallery-item):hover > .glow-edge-light {
  z-index: 6;
  opacity: calc(var(--glow-intensity) * (var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
}

/* idle: subtle persistent border for gallery items */
.glow-card:not(:hover):not(.sweep-active):has(> .gallery-item) > .glow-gallery-overlay {
  opacity: 0.4;
  transition: opacity 0.75s ease-in-out;
}

/* touch devices: always show a subtle glow for gallery */
@media (hover: none) {
  .glow-card:has(> .gallery-item) > .glow-gallery-overlay {
    opacity: 0.35;
  }
  .glow-card:has(> .gallery-item) > .glow-edge-light {
    opacity: calc(var(--glow-intensity) * 0.25);
  }
}

/* touch devices: always show a subtle glow */
@media (hover: none) {
  .glow-card::before {
    opacity: calc(var(--glow-intensity) * 0.3);
  }
  .glow-card::after {
    opacity: calc(var(--fill-opacity) * var(--glow-intensity) * 0.3);
  }
  .glow-card > .glow-edge-light {
    opacity: calc(var(--glow-intensity) * 0.25);
  }
}