.button-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background-position:
    0 0,
    0 10px;
  overflow: hidden;
}

.button {
  position: relative;
  width: 250px;
  height: 68px;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  z-index: 10;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button:hover {
  animation: doodle-wobble 0.4s ease-in-out infinite alternate;
}

.button:active {
  transform: scale(0.92) translateY(6px);
}

@keyframes doodle-wobble {
  0% {
    transform: rotate(-2deg) scale(1.02);
  }
  100% {
    transform: rotate(2deg) scale(1.02);
  }
}

.bg {
  position: absolute;
  inset: 0;
  background: #ffea00;
  border: 3px solid #111;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow:
    4px 4px 0px #ff007f,
    8px 8px 0px #00d4ff,
    12px 12px 0px #111;
  z-index: 1;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button:active .bg {
  box-shadow:
    2px 2px 0px #ff007f,
    4px 4px 0px #00d4ff,
    6px 6px 0px #111;
}

.shine {
  position: absolute;
  top: 8px;
  left: 15px;
  width: 45px;
  height: 12px;
  background: #fff;
  border: 2px solid #111;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(-4deg);
  opacity: 0.9;
  z-index: 2;
  transition: all 0.3s;
}

.button:hover .shine {
  transform: rotate(4deg) translateX(10px);
  width: 30px;
}

.glow {
  position: absolute;
  bottom: -15px;
  left: 10%;
  width: 80%;
  height: 20px;
  z-index: 0;
  background: transparent;
  pointer-events: none;
  box-shadow:
    -40px 10px 0 -4px #ff007f,
    -20px 15px 0 -2px #ffea00,
    0px 10px 0 -4px #00d4ff,
    20px 18px 0 -3px #ff5100,
    40px 8px 0 -5px #ffea00;
  opacity: 0;
  transition: opacity 0.3s;
}

.button:hover .glow {
  opacity: 1;
  animation: doodle-flame 0.3s steps(2) infinite alternate;
}

@keyframes doodle-flame {
  0% {
    box-shadow:
      -40px 10px 0 -4px #ff007f,
      -20px 15px 0 -2px #ffea00,
      0px 10px 0 -4px #00d4ff,
      20px 18px 0 -3px #ff5100,
      40px 8px 0 -5px #ffea00;
    transform: translateY(0);
  }
  100% {
    box-shadow:
      -35px 15px 0 -3px #ffea00,
      -25px 8px 0 -5px #ff007f,
      5px 15px 0 -2px #ff5100,
      15px 10px 0 -4px #00d4ff,
      35px 15px 0 -3px #ff007f;
    transform: translateY(4px);
  }
}

.wave {
  position: absolute;
  inset: -20px;
  z-index: 0;
  pointer-events: none;
}

.wave::before,
.wave::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 18px;
  background: #111;
  border-radius: 5px;
  opacity: 0;
}

.wave::before {
  top: -10px;
  left: 20%;
  transform: rotate(-30deg);
}

.wave::after {
  top: -10px;
  right: 20%;
  transform: rotate(30deg);
}

.button:hover .wave::before {
  animation: comic-pop-left 0.5s ease-out infinite;
}

.button:hover .wave::after {
  animation: comic-pop-right 0.5s ease-out infinite 0.15s;
}

@keyframes comic-pop-left {
  0% {
    transform: rotate(-30deg) translateY(10px);
    opacity: 1;
  }
  100% {
    transform: rotate(-30deg) translateY(-20px) scale(0.5);
    opacity: 0;
  }
}

@keyframes comic-pop-right {
  0% {
    transform: rotate(30deg) translateY(10px);
    opacity: 1;
  }
  100% {
    transform: rotate(30deg) translateY(-20px) scale(0.5);
    opacity: 0;
  }
}

.wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.wrap-content,
.content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
}

.outline {
  position: absolute;
  bottom: 12px;
  left: 15%;
  right: 15%;
  height: 5px;
  background: #00d4ff;
  border: 2px solid #111;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  transform: rotate(-1deg);
  z-index: 1;
}

.button:hover .outline {
  animation: scribble-line 0.2s steps(2) infinite alternate;
}

@keyframes scribble-line {
  0% {
    transform: rotate(-1deg) translateY(0);
    background: #00d4ff;
  }
  100% {
    transform: rotate(1deg) translateY(2px);
    background: #ff007f;
  }
}

.circuit {
  position: absolute;
  inset: -15px;
  z-index: -1;
  pointer-events: none;
}

.circuit::before,
.circuit::after {
  content: "★";
  position: absolute;
  font-size: 20px;
  color: #ff007f;
  -webkit-text-stroke: 1px #111;
  opacity: 0;
  transition: opacity 0.2s;
}

.circuit::before {
  top: 10px;
  left: -20px;
}

.circuit::after {
  bottom: 10px;
  right: -20px;
  color: #00d4ff;
}

.button:hover .circuit::before {
  opacity: 1;
  animation: float-star-1 1s ease-in-out infinite alternate;
}

.button:hover .circuit::after {
  opacity: 1;
  animation: float-star-2 1s ease-in-out infinite alternate 0.3s;
}

@keyframes float-star-1 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-10px) rotate(-20deg);
  }
}

@keyframes float-star-2 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(-10px) rotate(20deg);
  }
}

.glyphs {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", cursive,
    sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
}

.text {
  display: flex;
}

.text [data-label] {
  position: relative;
  display: inline-block;
  color: #111;
  text-transform: uppercase;
  text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff,
    2px 3px 0 #ff007f;
  transition: color 0.2s;
}

.text [data-label]:nth-of-type(5) {
  margin-right: 8px;
}

.button:hover .text [data-label] {
  animation: doodle-bounce 1.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 0.05s);
  color: #fff;
  text-shadow:
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111,
    3px 3px 0 #111;
}

@keyframes doodle-bounce {
  0% {
    transform: translateY(0) rotate(-3deg);
  }
  100% {
    transform: translateY(-4px) rotate(4deg);
  }
}

.icon-1,
.icon-2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-left: 10px;
}

.icon-2 {
  display: none;
}

.icon-1::before {
  content: "⚡";
  position: absolute;
  font-size: 24px;
  color: #fff;
  text-shadow:
    2px 2px 0 #111,
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111;
  transition: transform 0.2s;
}

.button:hover .icon-1::before {
  animation: doodle-zap 0.3s infinite alternate;
}

@keyframes doodle-zap {
  0% {
    transform: scale(1) rotate(-10deg);
    color: #00d4ff;
  }
  100% {
    transform: scale(1.2) rotate(10deg);
    color: #ff007f;
  }
}

.icon-2::before {
  content: "✔";
  position: absolute;
  font-size: 26px;
  color: #00ff66;
  text-shadow:
    2px 2px 0 #111,
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111;
}

.button:active .icon-1 {
  display: none;
}

.button:active .icon-2 {
  display: flex;
  animation: icon-stamp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes icon-stamp {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: scale(1.3) rotate(10deg);
    opacity: 1;
  }
}