:root {
  --glow-card-sens: 32;
  --glow-card-color: 40deg 90% 80%;
  --glow-card-boost: 0%;
  --glow-card-blend: soft-light;
  --glow-card-glow-blend: plus-lighter;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) {
    --glow-card-color: 280deg 88% 74%;
    --glow-card-boost: 24%;
    --glow-card-blend: normal;
    --glow-card-glow-blend: normal;
  }
}

html[data-theme="light"] {
  --glow-card-color: 280deg 88% 74%;
  --glow-card-boost: 24%;
  --glow-card-blend: normal;
  --glow-card-glow-blend: normal;
}

.card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  --pointer-\00b0: 180deg;
  --pointer-d: 0;
  --glow-card-padding: clamp(32px, 5vw, 48px);
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow:
    rgba(0, 0, 0, 0.08) 0 12px 26px -12px,
    rgba(0, 0, 0, 0.04) 0 18px 32px -16px;
}

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

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

.card::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card) 0 100%) padding-box,
    linear-gradient(transparent 0 100%) border-box,
    radial-gradient(at 80% 55%, hsla(268,100%,76%,1) 0px, transparent 54%) border-box,
    radial-gradient(at 69% 34%, hsla(349,100%,74%,1) 0px, transparent 54%) border-box,
    radial-gradient(at 8% 6%, hsla(136,100%,78%,1) 0px, transparent 54%) border-box,
    radial-gradient(at 41% 38%, hsla(192,100%,64%,1) 0px, transparent 54%) border-box,
    radial-gradient(at 86% 85%, hsla(186,100%,74%,1) 0px, transparent 54%) border-box,
    radial-gradient(at 82% 18%, hsla(52,100%,65%,1) 0px, transparent 54%) border-box,
    radial-gradient(at 51% 4%, hsla(12,100%,72%,1) 0px, transparent 54%) border-box,
    linear-gradient(#c299ff 0% 100%) border-box;
  opacity: calc((var(--pointer-d) - (var(--glow-card-sens) + 8)) / (100 - (var(--glow-card-sens) + 8)));
  mask-image: conic-gradient(from var(--pointer-\00b0) at center, black 25%, transparent 40%, transparent 60%, black 75%);
}

.card::after {
  border: 1px solid transparent;
  background:
    radial-gradient(at 80% 55%, hsla(268,100%,76%,1) 0px, transparent 55%) padding-box,
    radial-gradient(at 69% 34%, hsla(349,100%,74%,1) 0px, transparent 55%) padding-box,
    radial-gradient(at 8% 6%, hsla(136,100%,78%,1) 0px, transparent 55%) padding-box,
    radial-gradient(at 41% 38%, hsla(192,100%,64%,1) 0px, transparent 55%) padding-box,
    radial-gradient(at 86% 85%, hsla(186,100%,74%,1) 0px, transparent 55%) padding-box,
    radial-gradient(at 82% 18%, hsla(52,100%,65%,1) 0px, transparent 55%) padding-box,
    radial-gradient(at 51% 4%, hsla(12,100%,72%,1) 0px, transparent 55%) padding-box,
    linear-gradient(#c299ff 0 100%) padding-box;
  mix-blend-mode: var(--glow-card-blend);
  opacity: calc((var(--pointer-d) - var(--glow-card-sens)) / (100 - var(--glow-card-sens)));
  -webkit-mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 42%, 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-\00b0) at center, transparent 5%, black 20%, black 80%, transparent 95%);
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 42%, 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-\00b0) at center, transparent 5%, black 20%, black 80%, transparent 95%);
  -webkit-mask-composite: destination-out, lighter, lighter, lighter, lighter, lighter;
  mask-composite: subtract, add, add, add, add, add;
}

.card > .card-glow {
  --outset: var(--glow-card-padding);
  inset: calc(var(--outset) * -1);
  opacity: calc((var(--pointer-d) - (var(--glow-card-sens) - 4)) / (100 - (var(--glow-card-sens) - 4)));
  mask-image: conic-gradient(from var(--pointer-\00b0) at center, black 3%, transparent 12%, transparent 88%, black 97%);
  mix-blend-mode: var(--glow-card-glow-blend);
}

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

.card > :not(.card-glow) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card::before,
  .card::after,
  .card > .card-glow {
    transition-duration: 0.01ms;
  }
}