/* Pointer-reactive glowing edges (adapted for Shoalin dark theme) */

.glow-card {
  --glow-sens: 28;
  --color-sens: calc(var(--glow-sens) + 18);
  --pointer-°: 45deg;
  --pointer-d: 0;
  --glow-card-bg: linear-gradient(
    8deg,
    rgba(12, 18, 32, 0.94) 75%,
    rgba(16, 26, 44, 0.97) 75.5%
  );
  --blend: soft-light;
  --glow-blend: plus-lighter;
  --glow-color: 192deg 85% 72%;
  --glow-boost: 0%;

  position: relative;
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--glow-card-bg);
  background-repeat: no-repeat;
  overflow: visible;
}

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

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

.glow-card::before,
.glow-card::after {
  z-index: 0;
}

.glow-card > .glow {
  z-index: 1;
}

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

/* Colored border mesh */
.glow-card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--glow-card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    radial-gradient(at 80% 55%, hsla(192, 100%, 64%, 0.95) 0px, transparent 50%) border-box,
    radial-gradient(at 69% 34%, hsla(199, 100%, 70%, 0.9) 0px, transparent 50%) border-box,
    radial-gradient(at 8% 6%, hsla(168, 90%, 62%, 0.85) 0px, transparent 50%) border-box,
    radial-gradient(at 41% 38%, hsla(220, 95%, 68%, 0.9) 0px, transparent 50%) border-box,
    radial-gradient(at 86% 85%, hsla(186, 100%, 68%, 0.85) 0px, transparent 50%) border-box,
    radial-gradient(at 82% 18%, hsla(190, 100%, 72%, 0.9) 0px, transparent 50%) border-box,
    linear-gradient(hsla(192, 100%, 70%, 1) 0 100%) border-box;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  mask-image: conic-gradient(
    from var(--pointer-°) at center,
    black 25%,
    transparent 40%,
    transparent 60%,
    black 75%
  );
}

/* Inner color wash */
.glow-card::after {
  border: 1px solid transparent;
  background:
    radial-gradient(at 80% 55%, hsla(192, 100%, 64%, 0.55) 0px, transparent 50%) padding-box,
    radial-gradient(at 69% 34%, hsla(199, 100%, 70%, 0.45) 0px, transparent 50%) padding-box,
    radial-gradient(at 8% 6%, hsla(168, 90%, 62%, 0.4) 0px, transparent 50%) padding-box,
    radial-gradient(at 41% 38%, hsla(220, 95%, 68%, 0.45) 0px, transparent 50%) padding-box,
    radial-gradient(at 86% 85%, hsla(186, 100%, 68%, 0.4) 0px, transparent 50%) padding-box,
    radial-gradient(at 82% 18%, hsla(190, 100%, 72%, 0.5) 0px, transparent 50%) padding-box,
    linear-gradient(hsla(199, 80%, 55%, 0.35) 0 100%) padding-box;
  opacity: calc((var(--pointer-d) - var(--color-sens)) / (100 - var(--color-sens)));
  mix-blend-mode: var(--blend);
  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(--pointer-°) at center,
      transparent 5%,
      black 15%,
      black 85%,
      transparent 95%
    );
  mask-composite: subtract, add, add, add, add, add;
}

/* Edge glow */
.glow-card > .glow {
  --glow-outset: 24px;
  inset: calc(var(--glow-outset) * -1);
  opacity: calc((var(--pointer-d) - var(--glow-sens)) / (100 - var(--glow-sens)));
  mix-blend-mode: var(--glow-blend);
  mask-image: conic-gradient(
    from var(--pointer-°) at center,
    black 2.5%,
    transparent 10%,
    transparent 90%,
    black 97.5%
  );
}

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

/* Let glow-card handle borders; keep depth shadow */
.glass-card.glow-card {
  backdrop-filter: blur(14px);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.glass-card.glow-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.upload-card.glow-card.drag-over {
  border-color: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
  .glow-card > .glow {
    --glow-outset: 14px;
  }
}