.glow-button {
  --pads: 16px;
  --glow-sens: 30;
  --color-sens: calc(var(--glow-sens) + 20);
  --blend: soft-light;
  --glow-blend: plus-lighter;
  --glow-color: 281 73.8% 82%;
  --bg-dark: hsl(260 15% 12%);
  outline: none;
  transform: translate3d(0, 0, 1rem);
  background: transparent;
  position: relative;
  padding: 0.75em 1.5em;
  font-size: 3rem;
  font-weight: 600;
  color: white;
  background: radial-gradient(at bottom right, #101010 20%, #272024);
  border: 0.1rem solid rgb(255 255 255 / 25%);
  border-radius: 1.768em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  transition: --pointer-d 0.4s, --pointer-° 0.4s, --glow-sens 0.4s, --glow-blend 0.4s;
  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;
}
/*
.glow-button:focus,
.glow-button:focus-visible {
  outline: none;
}
*/
/* Optional accessible focus styling 
.glow-button:focus-visible {
  box-shadow: 0 0 0 2px hsl(var(--glow-color) / 80%);
  border-radius: inherit;
}*/

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

.glow-button::before,
.glow-button::after,
.glow-button > .glow {
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  transform: scale(var(--aspect-x, 1), var(--aspect-y, 1));
  transform-origin: center;
}
/*
.glow-button:not(:hover):not(.animating)::before,
.glow-button:not(:hover):not(.animating)::after,
.glow-button:not(:hover):not(.animating) > .glow {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}*/

.glow-button::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--card-bg) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--glow-border) 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%);
}


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

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

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

.glow-button > .glow::before {
  content: "";
  position: absolute;
  inset: var(--outset);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px hsl(var(--glow-color) / 100%),
    inset 0 0 2px 2px hsl(var(--glow-color) / 90%),
    inset 0 0 5px 1px hsl(var(--glow-color) / 75%),
    inset 0 0 8px 1px hsl(var(--glow-color) / 66%),
    inset 0 0 15px 0 hsl(var(--glow-color) / 50%),
    inset 0 0 25px 2px hsl(var(--glow-color) / 30%),
    inset 0 0 50px 2px hsl(var(--glow-color) / 10%),

    0 0 2px 2px hsl(var(--glow-color) / 90%),
    0 0 5px 1px hsl(var(--glow-color) / 75%),
    0 0 8px 1px hsl(var(--glow-color) / 66%),
    0 0 15px 0 hsl(var(--glow-color) / 50%),
    0 0 25px 2px hsl(var(--glow-color) / 30%),
    0 0 50px 2px hsl(var(--glow-color) / 10%);
    
}