/* Digital Monster shared border-glow skin — static adaptation of the /user/ BorderGlow treatment. */
:root {
  --glow-bg: #120F17;
  --glow-hsl: 40deg 80% 80%;
  --glow-padding: 40px;
  --glow-card-radius: 28px;
  --glow-strength: 1;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --cone-spread: 25;
  --fill-opacity: .5;
  --glow-color-a: #c084fc;
  --glow-color-b: #f472b6;
  --glow-color-c: #38bdf8;
  --gradient-one: radial-gradient(at 80% 55%, var(--glow-color-a) 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, var(--glow-color-b) 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, var(--glow-color-c) 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #72ff9c 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #65f7ff 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #facc15 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #fb7185 0px, transparent 50%);
  --gradient-base: linear-gradient(#c299ff 0 100%);
  --glow-color: hsl(var(--glow-hsl) / 100%);
  --glow-color-60: hsl(var(--glow-hsl) / 60%);
  --glow-color-50: hsl(var(--glow-hsl) / 50%);
  --glow-color-40: hsl(var(--glow-hsl) / 40%);
  --glow-color-30: hsl(var(--glow-hsl) / 30%);
  --glow-color-20: hsl(var(--glow-hsl) / 20%);
  --glow-color-10: hsl(var(--glow-hsl) / 10%);
}

@keyframes borderGlowSweep { 0% { --cursor-angle: 0deg; } 100% { --cursor-angle: 360deg; } }

.glow-shell {
  --edge-opacity: 0;
  --fill-edge-opacity: 0;
  --cursor-angle: 45deg;
  --card-bg: var(--glow-bg, #120F17);
  position: relative;
  border-radius: var(--glow-card-radius);
  isolation: isolate;
  transform: translate3d(0,0,0.01px);
  border-color: rgb(255 255 255 / 15%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 88%, transparent), rgba(4,20,10,.64) 54%, rgba(0,0,0,.62));
  overflow: visible;
  box-shadow: rgba(0,0,0,.1) 0 1px 2px, rgba(0,0,0,.1) 0 2px 4px, rgba(0,0,0,.1) 0 4px 8px, rgba(0,0,0,.1) 0 8px 16px, rgba(0,0,0,.1) 0 16px 32px, rgba(0,0,0,.1) 0 32px 64px, inset 0 1px rgba(255,255,255,.045);
  transition: transform .24s ease, border-color .24s ease, background .24s ease, border-radius .24s ease;
}

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

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

.glow-shell::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: var(--fill-edge-opacity);
  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-shell::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;
  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,.5) * var(--fill-edge-opacity));
  mix-blend-mode: soft-light;
}

.glow-shell > .edge-light {
  inset: calc(var(--glow-padding) * -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: var(--edge-opacity);
  mix-blend-mode: plus-lighter;
}

.glow-shell > .edge-light::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);
}

.glow-shell:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.24); }
.glow-shell.sweep-active { animation: borderGlowSweep 8s linear infinite; }
.glow-shell > *:not(.edge-light) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .glow-shell, .glow-shell.sweep-active { animation: none !important; transition: none !important; }
}