/*made by ihaverizzra*/
/*github.com/ihaverizzra*/

.adv-button {
  --adv-btn-bg-start: #8a2be2;
  --adv-btn-bg-end: #4a00e0;
  --adv-btn-text-color: #f0f0f0;
  --adv-glow-color: rgba(138, 43, 226, 0.7);
  --adv-strong-glow-color: rgba(74, 0, 224, 0.5);
  --adv-shadow-color-light: rgba(0, 0, 0, 0.3);
  --adv-shadow-color-dark: rgba(0, 0, 0, 0.5);
  --adv-shine-color: rgba(255, 255, 255, 0.7);
  --adv-glitch-color-1: #00ffff;
  --adv-glitch-color-2: #ff00ff;
  --adv-glitch-color-3: #ffff00;
  --adv-border-color-focus: #00ffff;
  --adv-transition-base: 0.25s;
  --adv-transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --adv-transition-glitch: 0.4s;
  font-size: 1.1em;
}

.adv-button {
  position: relative;
  display: inline-block;
  padding: 1em 2.2em;
  border: none;
  border-radius: 0.4em;
  background: linear-gradient(
    60deg,
    var(--adv-btn-bg-start),
    var(--adv-btn-bg-end)
  );
  background-size: 200% 200%;
  background-position: 50% 50%;
  color: var(--adv-btn-text-color);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  z-index: 1;
  backface-visibility: hidden;
  box-shadow:
    0em 0.2em 0.4em var(--adv-shadow-color-light),
    0em 0.4em 0.8em var(--adv-shadow-color-dark),
    inset 0px 1px 1px rgba(255, 255, 255, 0.15);
  transition:
    transform var(--adv-transition-base) var(--adv-transition-bounce),
    box-shadow var(--adv-transition-base) ease-out,
    background-position 1s ease;
}

.adv-button-text {
  position: relative;
  z-index: 10;
  display: block;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.adv-button::before,
.adv-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity 0.4s ease-out,
    background-position 0.8s ease;
}

.adv-button::before {
  background: linear-gradient(
    115deg,
    transparent 25%,
    var(--adv-shine-color) 50%,
    transparent 75%
  );
  background-size: 250% 100%;
  background-position: 180% 0;
  opacity: 0;
  z-index: 2;
}

.adv-button:hover {
  box-shadow:
    0em 0.25em 0.5em var(--adv-shadow-color-light),
    0em 0.5em 1.25em var(--adv-shadow-color-dark),
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    0 0 1.5em var(--adv-glow-color),
    0 0 3em var(--adv-strong-glow-color);
  animation: bg-pan 3s linear infinite;
}

.adv-button:hover::before {
  background-position: -80% 0;
}

.adv-button:active {
  transform: scale(0.95, 0.92);
  box-shadow:
    0em 0.1em 0.2em var(--adv-shadow-color-light),
    0em 0.2em 0.4em var(--adv-shadow-color-dark),
    inset 0px 1px 1px rgba(255, 255, 255, 0.1),
    0 0 1em var(--adv-glow-color),
    0 0 2em var(--adv-strong-glow-color);
  animation: none;
}

.adv-button:hover::before {
  background: none;
  opacity: 1;
  content: attr(data-text);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--adv-glitch-color-1);
  padding: inherit;
  box-sizing: border-box;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  text-shadow: none;
  z-index: 3;
  filter: drop-shadow(0 0 1px var(--adv-glitch-color-1));
  animation: glitch-anim-1 var(--adv-transition-glitch)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
}

.adv-button:hover::after {
  opacity: 1;
  content: attr(data-text);
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  color: var(--adv-glitch-color-2);
  padding: inherit;
  box-sizing: border-box;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  font-family: inherit;
  text-shadow: none;
  z-index: 4;
  filter: drop-shadow(0 0 1px var(--adv-glitch-color-2));
  animation: glitch-anim-2 var(--adv-transition-glitch)
    cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
}

.adv-button:focus-visible {
  box-shadow:
    0em 0.25em 0.5em var(--adv-shadow-color-light),
    0em 0.5em 1.25em var(--adv-shadow-color-dark),
    inset 0px 1px 1px rgba(255, 255, 255, 0.15),
    0 0 1.5em var(--adv-glow-color),
    0 0 0 0.15em rgba(var(--adv-border-color-focus), 0.7);
}

@keyframes glitch-anim-1 {
  0% {
    transform: translate(0);
    clip-path: inset(0% 0% 0% 0%);
  }
  10% {
    transform: translate(-0.2em, 0.1em);
    clip-path: inset(10% 15% 70% 5%);
  }
  20% {
    transform: translate(0.15em, -0.2em);
    clip-path: inset(85% 5% 5% 20%);
  }
  30% {
    transform: translate(-0.1em, 0.25em);
    clip-path: inset(35% 25% 50% 10%);
  }
  40% {
    transform: translate(0.1em, -0.1em);
    clip-path: inset(92% 10% 2% 15%);
  }
  50% {
    transform: translate(-0.15em, 0.15em);
    clip-path: inset(15% 30% 65% 8%);
  }
  60% {
    transform: translate(0.05em, -0.05em);
    clip-path: inset(0% 0% 0% 0%);
  }
  70% {
    transform: translate(-0.1em, 0.1em);
    clip-path: inset(50% 10% 30% 20%);
  }
  80% {
    transform: translate(0.2em, -0.15em);
    clip-path: inset(5% 25% 80% 5%);
  }
  90% {
    transform: translate(-0.05em, 0.05em);
    clip-path: inset(70% 5% 15% 30%);
  }
  100% {
    transform: translate(0);
    clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes glitch-anim-2 {
  0% {
    transform: translate(0);
    clip-path: inset(0% 0% 0% 0%);
  }
  10% {
    transform: translate(0.2em, -0.1em);
    clip-path: inset(5% 10% 80% 15%);
    color: var(--adv-glitch-color-3);
  }
  20% {
    transform: translate(-0.15em, 0.15em);
    clip-path: inset(75% 20% 10% 5%);
    color: var(--adv-glitch-color-2);
  }
  30% {
    transform: translate(0.1em, -0.25em);
    clip-path: inset(45% 15% 35% 25%);
  }
  40% {
    transform: translate(-0.05em, 0.1em);
    clip-path: inset(95% 8% 1% 12%);
  }
  50% {
    transform: translate(0.15em, -0.1em);
    clip-path: inset(25% 35% 55% 10%);
  }
  60% {
    transform: translate(-0.05em, 0.05em);
    clip-path: inset(0% 0% 0% 0%);
  }
  70% {
    transform: translate(0.1em, -0.1em);
    clip-path: inset(60% 15% 25% 18%);
    color: var(--adv-glitch-color-3);
  }
  80% {
    transform: translate(-0.2em, 0.15em);
    clip-path: inset(10% 30% 70% 8%);
    color: var(--adv-glitch-color-2);
  }
  90% {
    transform: translate(0.05em, -0.05em);
    clip-path: inset(80% 10% 5% 25%);
  }
  100% {
    transform: translate(0);
    clip-path: inset(0% 0% 0% 0%);
  }
}

@keyframes bg-pan {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}