/* [project]/src/styles/activate-button.css [app-client] (css) */
.activate-area {
  --ease-elastic: cubic-bezier(.5, 2, .3, .8);
  --ease-elastic-2: cubic-bezier(.5, -1, .3, .8);
  --primary: #10b981;
  --primary-light: #34d399;
  --rounded-max: 100px;
  --rounded-min: 10px;
  --h: 60px;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.activate-area svg {
  overflow: visible;
}

.activate-area-wrapper {
  cursor: pointer;
  padding: 15px 5px;
  position: relative;
}

.activate-area-wrapper:hover .activate-wrapper {
  transform: translateY(0)scale(1);
}

.activate-area-wrapper:hover .activate-wrapper .activate-case .activate-mask {
  box-shadow: inset 8px -15px 15px -10px #000, inset 10px -17px 12px -12px #fff, 0 20px 50px -5px #111;
}

.activate-area-wrapper:hover .activate-wrapper .activate-part-2 .activate-glass {
  box-shadow: inset 0 0 7px -4px #fff, inset 0 -10px 10px -8px #fff6, inset 8px -15px 15px -10px #000, inset 8px -10px 12px -12px #fff, 0 20px 50px -5px #111;
}

.activate-wrapper {
  z-index: 2;
  transition: all .6s var(--ease-elastic);
  border-radius: 100px;
  display: block;
  position: relative;
  transform: translateY(-8px)scale(1.02);
}

.activate-wrapper input {
  opacity: 0;
  z-index: 10;
  cursor: pointer;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.activate-button {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.activate-button:before {
  content: "";
  pointer-events: none;
  background: var(--primary);
  background: linear-gradient(to right, var(--primary) 0%, transparent 100%);
  z-index: 1;
  filter: blur(30px);
  mix-blend-mode: color-dodge;
  opacity: 0;
  border-radius: 0 50% 50% 0;
  width: 70%;
  height: 100%;
  margin: auto;
  transition: all 1s .4s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%;
}

.activate-button:after {
  content: "";
  pointer-events: none;
  background: var(--primary);
  z-index: 2;
  filter: blur(15px);
  mix-blend-mode: color-dodge;
  opacity: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: auto;
  transition: all 1s .4s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 28%;
}

.activate-part-1 {
  z-index: 1;
  height: var(--h);
  border-radius: var(--rounded-max) var(--rounded-min) var(--rounded-min) var(--rounded-max);
  width: 60px;
  position: relative;
}

.activate-line {
  transition: all .4s;
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
}

.activate-line:before {
  content: "";
  background: #8c8c8c;
  border-radius: 50%;
  width: 1px;
  height: 0%;
  margin: auto;
  animation: 1.8s infinite activate-line;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  box-shadow: 1px 0 10px 3px #10b98166;
}

.activate-wrapper input:checked ~ .activate-button .activate-line {
  opacity: 0;
}

.activate-area-wrapper:hover .activate-wrapper input:not(:checked) ~ .activate-button .activate-line:before {
  box-shadow: 1px 0 10px 3px var(--primary);
  background: #fff;
}

.activate-screw {
  z-index: -1;
  align-items: center;
  margin: auto;
  padding: 8px 0;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

.activate-screw svg {
  width: auto;
  height: 50px;
}

.screw-g {
  transform-origin: center;
}

.screw-dot {
  color: #8e8c8b;
}

.activate-case {
  height: var(--h);
  border-radius: inherit;
  width: 60px;
  transition: all .9s var(--ease-elastic);
  transform: translateX(0);
}

.activate-mask {
  border-radius: inherit;
  transition: all .9s var(--ease-elastic);
  background: linear-gradient(#4a4d52 0%, #3d4046 20%, #35383d 100%);
  position: absolute;
  inset: 0;
  overflow: hidden;
  box-shadow: inset 8px -15px 15px -10px #00000080, inset 10px -17px 12px -12px #ffffff4d, 0 30px 70px -5px #0000004d;
}

.activate-mask:before {
  content: "";
  border-radius: inherit;
  filter: blur(12px);
  background: #fff;
  width: 100%;
  height: 30%;
  position: absolute;
  top: 23%;
  left: 30%;
}

.activate-mask:after {
  content: "";
  mix-blend-mode: overlay;
  background-color: #fff3;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.activate-part-2 {
  height: var(--h);
  border-radius: var(--rounded-min) var(--rounded-max) var(--rounded-max) var(--rounded-min);
  justify-content: center;
  align-items: center;
  width: 150px;
  transition: all .6s;
  display: flex;
  position: relative;
}

.activate-glass {
  width: 100%;
  height: 100%;
  transition: all .9s var(--ease-elastic);
  border-radius: inherit;
  background: linear-gradient(#ffffff26 0%, #fff3 50%, #00000080 100%);
  border-left: 1px solid #0000004d;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 7px -4px #fff, inset 0 -10px 10px -8px #fff6, inset 8px -15px 15px -10px #000, inset 8px -10px 12px -12px #fff, 0 30px 70px -5px #111;
}

.activate-glass:before {
  content: "";
  background: linear-gradient(#ffffff80 0%, #fff0 60%);
  border-radius: 0 25px 0 0;
  height: 70%;
  position: absolute;
  top: 10%;
  left: 0;
  right: 14%;
}

.activate-glass:after {
  content: "";
  filter: blur(3px);
  border-radius: 0 30px 30px 0;
  height: 75%;
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 5%;
  box-shadow: inset -2px -6px 5px -5px #fffc;
}

.activate-glass-reflex {
  background: linear-gradient(to right, #ffffff08 0%, #fff3 100%);
  border-radius: 0 50% 50% 0;
  width: 70%;
  position: absolute;
  inset: 0;
  transform: translateX(-115%)skewX(30deg);
}

.activate-path-glass {
  opacity: 0;
  transition: opacity .6s linear;
  position: absolute;
  inset: 0;
}

.activate-path-glass path {
  stroke-dashoffset: 350px;
  stroke-dasharray: 350 350;
  animation: 1.4s infinite activate-path-glass;
}

@keyframes activate-path-glass {
  0% {
    stroke-dasharray: 350 350;
    color: var(--primary-light);
    opacity: 1;
    filter: blur(2px);
  }

  50% {
    stroke-dasharray: 700 350;
    opacity: 1;
    filter: blur(4px);
  }

  100% {
    stroke-dasharray: 700 350;
    color: var(--primary);
    opacity: 0;
  }
}

.activate-filament {
  stroke-width: 2px;
  opacity: .2;
  width: auto;
  height: 24px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.activate-filament path {
  transition: all .6s ease-in-out;
}

.activate-filament-on {
  opacity: 0;
  transition: opacity .4s;
}

.activate-wrapper input:checked ~ .activate-button .activate-filament-on {
  opacity: 1;
}

.activate-filament-on path {
  stroke-dashoffset: 100px;
  stroke-dasharray: 100 100;
}

.activate-filament-blur {
  opacity: 0;
  filter: blur(6px);
  color: var(--primary-light);
  stroke-width: 8px;
  transition: opacity .4s;
}

.activate-wrapper input:checked ~ .activate-button .activate-filament-blur {
  opacity: 1;
}

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

.activate-text {
  letter-spacing: .12em;
  justify-content: center;
  align-items: center;
  transition: all .3s;
  display: flex;
  transform: translateY(-2px);
}

.activate-text span {
  color: #0000;
  display: block;
  position: relative;
}

.activate-text span:before, .activate-text span:after {
  content: attr(data-label);
  color: #ffffffe6;
  font-size: 14px;
  font-weight: 600;
  position: absolute;
  left: 0;
}

.activate-text span:before {
  opacity: 0;
  transform: translateY(-100%);
}

.activate-area-wrapper:hover .activate-line {
  opacity: 0;
}

.activate-area-wrapper:hover .activate-glass-reflex {
  animation: .6s activate-reflex;
}

.activate-area-wrapper:hover .activate-text span:before {
  animation: activate-char-in 1s ease calc(var(--i) * 30ms) forwards;
}

.activate-area-wrapper:hover .activate-text span:after {
  opacity: 0;
  animation: activate-char-out 1.3s ease calc(var(--i) * 40ms) backwards;
}

.activate-wrapper input:checked ~ .activate-button .activate-filament path {
  transition-delay: .6s;
}

.activate-area-wrapper:hover input:checked ~ .activate-button .activate-filament path {
  stroke-dasharray: 100 0;
}

.activate-wrapper input:checked ~ .activate-button .activate-part-1 .activate-case {
  transition: all 1.25s var(--ease-elastic-2);
  transform: translateX(-35px);
}

.activate-wrapper input:checked ~ .activate-button:before {
  opacity: .5;
}

.activate-wrapper input:checked ~ .activate-button:after {
  opacity: .6;
}

.activate-area-wrapper:hover input:checked ~ .activate-button:before, .activate-area-wrapper:hover input:checked ~ .activate-button:after, .activate-area-wrapper:hover input:checked ~ .activate-button .activate-path-glass {
  opacity: 1;
}

.activate-wrapper input:not(:checked) ~ .activate-button .activate-part-1 .activate-line:before {
  background: #8c8c8c;
  box-shadow: 1px 0 10px 3px #10b98166;
}

.activate-wrapper input:not(:checked) ~ .activate-button .activate-part-1 .screw-g {
  animation: activate-pulse .8s ease calc(var(--i) * .1s) backwards;
}

.activate-wrapper input:checked ~ .activate-button .activate-part-1 .screw-g {
  animation: activate-pulse-out .8s ease calc((3 - var(--i)) * .2s) backwards;
}

.activate-wrapper input:not(:checked) ~ .activate-button .activate-part-1 .screw-dot {
  animation: activate-dot .7s ease calc(var(--i) * .15s) backwards;
}

.activate-wrapper input:checked ~ .activate-button .activate-part-1 .screw-dot {
  animation: activate-dot-out .7s ease calc((3 - var(--i)) * .15s) forwards;
}

@keyframes activate-line {
  0% {
    opacity: 1;
    height: 0%;
  }

  50% {
    opacity: 1;
    height: 100%;
  }

  100% {
    opacity: 0;
    height: 140%;
  }
}

@keyframes activate-dot {
  30% {
    color: var(--primary);
    filter: blur(2px);
  }
}

@keyframes activate-dot-out {
  40% {
    color: #fff;
    filter: blur(2px);
  }
}

@keyframes activate-pulse {
  30% {
    transform: scaleY(.8);
  }
}

@keyframes activate-pulse-out {
  40% {
    transform: scaleY(.8);
  }
}

@keyframes activate-char-in {
  0% {
    opacity: 0;
    filter: blur(10px);
    color: var(--primary-light);
    transform: scale(10)translateX(-25%);
  }

  25% {
    opacity: 1;
    filter: blur(1px);
    color: var(--primary);
    transform: translateY(-15%);
  }

  50% {
    opacity: 1;
    filter: blur();
    transform: translateY(7%);
  }

  100% {
    opacity: 1;
    filter: blur();
    transform: translateY(0);
  }
}

@keyframes activate-char-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-70%);
  }
}

@keyframes activate-reflex {
  0% {
    transform: translateX(-115%);
  }

  100% {
    transform: translateX(140%);
  }
}

/*# sourceMappingURL=src_styles_activate-button_b7c095cb.css.map*/