/* From Uiverse.io by marcelodolza */ 
.area {
  --ease: cubic-bezier(0.5, 0, 0.3, 1);
  --ease-elastic: cubic-bezier(0.5, 2, 0.3, 0.8);
  --radius: 26px;
  --primary: #45f8f8;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: all 0.6s var(--ease-elastic);
}

.area input {
  opacity: 0;
  width: 0;
  height: 0;
}

.button {
  outline: none;
  cursor: pointer;
  border: 0;
  border-radius: var(--radius);
  position: relative;
  width: 240px;
  height: 74px;
  pointer-events: none;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition:
    background-color 2s linear,
    box-shadow 0.5s ease,
    transform 0.6s ease;
  transform: rotateX(4deg);
  background: var(--primary);
  box-shadow:
    inset 0 0 30px rgb(34, 124, 136),
    0 5px 10px -2px rgba(0, 10, 20, 0.5),
    0 40px 30px -15px rgba(10, 20, 30, 0.3),
    inset 0 -2px 0 -1px #484e60,
    inset 0 0 2px 4px #888ea3;
  font-size: 21px;
  font-family: Arial;
  letter-spacing: 1px;
}

.button::before,
.button::after {
  content: "";
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  display: block;
  filter: blur(40px);
  mix-blend-mode: plus-lighter;
  margin: auto;
  inset: 0;
  top: 10px;
  transition: all 1s ease;
}

@keyframes pulse-out {
  40% {
    transform: scale(1);
  }
}

.button:after {
  transform: scale(0);
}

.button:before,
.area input:not(:checked) ~ .button::after {
  opacity: 0;
}

.area input:not(:checked) ~ .button::before {
  opacity: 1;
}

.wrap {
  border-radius: calc(var(--radius) * 0.85);
  inset: 0;
  padding: 0;
  background: linear-gradient(to bottom, #6e96b6 0%, #00ffd2 50%, #00ffb7 100%);
  position: absolute;
  transform-origin: top;
  transform: scale(0.99, 1) translate(0px, -7px);
  transition: all 0.7s ease;
  animation: cover-close 0.9s ease forwards;
}

.area input:not(:checked) ~ .button {
  .wrap {
    animation: cover-open 0.9s ease forwards;
  }
}

@keyframes cover-open {
  0% {
    transform: translate3d(0, -7px, 10px);
    box-shadow: none;
  }
  20% {
    transform: translate3d(0, 0, 10px);
  }
  80% {
    transform: translate3d(0, 0, 10px) rotateY(0) rotateX(74deg);
  }
  100% {
    transform: translate3d(0, 0, 10px) rotateY(0) rotateX(70deg);
    box-shadow:
      rgb(121, 133, 147) 0px 5px 1px -1px,
      rgb(77, 97, 118) 0px 9px 0 -2px,
      rgb(0, 0, 0) 0px 60px 40px -30px;
  }
}

@keyframes cover-close {
  from {
    transform: translate3d(0px, 0px, 10px) rotateY(0) rotateX(70deg);
    box-shadow:
      0 5px 1px -1px #798593,
      0 10px 0px -1px #4d6176,
      0 60px 40px -30px black;
  }
  to {
    transform: scale(0.99, 1) translate3d(0px, -7px, 10px);
    box-shadow: none;
  }
}

.reflex {
  position: absolute;
  z-index: 9;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.reflex:before {
  content: "";
  position: absolute;
  width: 300px;
  background-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    to right,
    rgba(221, 249, 255, 0.2) 10%,
    rgba(221, 245, 255, 0.5) 60%,
    rgba(221, 246, 255, 0.4) 60%,
    rgba(221, 255, 254, 0.2) 90%
  );
  top: -40%;
  bottom: -40%;
  left: -132%;
  transform: translateX(0) skew(-30deg);
  transition: all 0.7s var(--ease);
}
.area:hover .reflex:before {
  transform: translate(192%, 0) skew(-30deg);
}

.path {
  position: absolute;
  left: 50%;
  top: 87%;
  transform: translateX(-50%);
  stroke-dasharray: 60 150;
  stroke-dashoffset: 60;
  pointer-events: none;
  overflow: visible;
  animation: path-in 0.6s linear forwards;
  stroke-width: 2px;
}
.area input:not(:checked) ~ .button .path {
  animation: path-out 1.2s ease forwards;
}
@keyframes path-out {
  from {
    transform: translateX(-50%) translateY(-15px);
    stroke: white;
  }
  to {
    stroke-dashoffset: -150;
    stroke: var(--primary);
    transform: translateX(-50%) translateY(15px);
  }
}

@keyframes path-in {
  from {
    stroke-dashoffset: -150;
    transform: translateX(-50%) translateY(-5px);
    stroke: white;
  }
  to {
    stroke: var(--primary);
    transform: translateX(-50%) translateY(-16px);
  }
}

.wave {
  position: absolute;
  margin: auto;
  transition: all 0.5s ease;
  border-radius: 70px;
  width: 110%;
  height: 150%;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.wave::before,
.wave::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border-bottom: 3px solid white;
  border-top: 3px solid white;
  filter: blur(3px);
  inset: 0;
  transform: translate(50%);
  animation: wave 1.5s linear infinite;
}
.wave::after {
  animation-delay: 0.4s;
}

.area input:not(:checked) ~ .button .wave {
  opacity: 1;
}

@keyframes wave {
  0% {
    transform: scale(1);
    opacity: 0;
    box-shadow: 0 0 30px white;
  }
  35% {
    transform: scale(1.3);
    opacity: 1;
  }
  70%,
  100% {
    transform: scale(1.6);
    opacity: 0;
    box-shadow: 0 0 100px var(--primary);
  }
}

.content {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  height: 100%;
  gap: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  overflow: hidden;
  border-radius: calc(var(--radius) * 0.85);
}

.content::before,
.content::after {
  content: "";
  inset: 0px;
  position: absolute;
  transition: all 1s var(--ease);
  border-radius: inherit;
  z-index: -1;
}
.content::before {
  filter: blur(2px);
  top: -2px;
  background: linear-gradient(to bottom, #dde0e1 30%, #aeb2b8 90%);
}
.content::after {
  box-shadow:
    inset 0 -7px 1px 0 rgba(40, 70, 100, 0.2),
    inset 0 -4px 1px 0 rgba(40, 70, 100, 0.4),
    inset 0 -2px 0 0 rgba(20, 40, 60, 0.6),
    inset 0 -3px 0 0 white;
}

.text {
  transition: all 0.3s ease;
  transform: translateY(-2px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
}
.text span {
  display: block;
  color: transparent;
  position: relative;
}
.text.state-1 span:nth-child(3) {
  margin-right: 10px;
}

.text span::before,
.text span::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  color: #3c5d7d;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}
.text span::before {
  opacity: 0;
  transform: translateY(-100%);
}

.text.state-2 {
  span::before,
  span::after {
    color: #6b99b0;
  }
}

.area input:checked ~ .button .text.state-2 {
  span {
    filter: blur(5px);
  }
}

.area:hover .text span::before {
  animation: char-in 0.8s ease calc(var(--i) * 0.04s) forwards;
}

.area:hover .text span::after,
.area input:not(:checked) ~ .button .text.state-1 span::before,
.area input:not(:checked) ~ .button .text.state-1 span::after,
.area input:checked ~ .button .text.state-2 span::before,
.area input:checked ~ .button .text.state-2 span::after {
  opacity: 0;
  animation: char-out 1.2s ease calc(var(--i) * 0.04s) backwards;
}

@keyframes char-in {
  0% {
    opacity: 0;
    transform: scale(10) translateX(-100%);
    filter: blur(10px);
    color: rgb(0, 251, 255);
  }
  25% {
    transform: translateY(10%)
      translateX(calc(-40px + ((var(--i) - 1) / 10) * 80px)) scale(2);
    opacity: 1;
    filter: blur(1px);
    color: transparent;
  }
  50% {
    transform: translateY(20%);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes char-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    color: white;
  }
  100% {
    transform: translateY(-80%) scale(4);
    filter: blur(4px);
    color: black;
    text-shadow: 0 4px 2px #00ffd2;
    opacity: 0;
  }
}

.area:hover {
  .button {
    transition:
      all 0.6s var(--ease-elastic),
      background 1s ease;
    transform: rotateX(0deg) translateY(5px);
  }
  .content::before {
    transform: scale(0.97, 0.92);
  }
}

.area:active {
  .button {
    transform: rotateX(0deg) translateY(8px);
  }
  .wrap {
    transform: scale(1) translate(0);
  }
  .wave {
    opacity: 0;
  }
  .content::before {
    filter: blur(13px);
    transform: scaleX(0.95);
  }
}

.sparks {
  pointer-events: none;
  position: absolute;
  margin: auto;

  transform: translateZ(100px);
  stroke: rgba(255, 153, 0, 1);
  left: 54px;
  top: 10px;
  height: 58px;
  opacity: 0;

  path {
    stroke-width: 5px;
    stroke-dasharray: 30 150;
    stroke-dashoffset: 30;
    animation: sparks 0.6s ease infinite;
    animation-delay: calc(var(--i) * 1s);
    animation-duration: calc(var(--i) * 0.05s + 0.6s);
  }
}

@keyframes sparks {
  0% {
    stroke-dasharray: 30 150;
  }
  50%,
  100% {
    stroke-dashoffset: -150;
  }
}

.area input:not(:checked) ~ .button {
  .gears,
  .sparks {
    opacity: 1;
  }
  .sparks {
    transition: all 1.5s ease;
  }
}

.gears {
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  position: absolute;
  inset: 4px;
  bottom: 1px;
  transition: all 1s ease;

  svg {
    width: 80%;
    fill: #49b9c2;
    top: 50%;
    position: relative;
    transform: translate(-50%, -50%);
    left: 43%;

    path {
      transform-origin: center;
      transform-box: fill-box;
    }
    .shadow {
      fill: rgba(36, 113, 125, 0.2);
      translate: 2px 8px;
    }
    .small {
      animation: spin 2.5s infinite linear;
    }
    .medium {
      animation: spin reverse 3.75s infinite linear;
    }
    .large {
      translate: 3px -6px;
      animation: spin 5s infinite linear;
    }
  }
}
.gears::before,
.gears::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  bottom: 11px;
  height: 7px;
  width: 7px;
  background: rgba(155, 155, 155, 0.3);
  box-shadow: inset 0px 2px rgba(0, 0, 0, 0.2);
}
.gears::before {
  left: 12px;
}
.gears::after {
  right: 12px;
}

@keyframes spin {
  to {
    transform: rotate(359deg);
  }
}