.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:0 0;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:50%}.screw-dot{color:#8e8c8b}.activate-case{height:var(--h);border-radius:inherit;width:60px;transition:all .9s var(--ease-elastic);transform:translate(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(90deg,#ffffff08 0%,#fff3 100%);border-radius:0 50% 50% 0;width:70%;position:absolute;inset:0;transform:translate(-115%)skew(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)}to{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:translate(-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%}to{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)translate(-25%)}25%{opacity:1;filter:blur(1px);color:var(--primary);transform:translateY(-15%)}50%{opacity:1;filter:blur();transform:translateY(7%)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes activate-char-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;filter:blur(4px);transform:translateY(-70%)}}@keyframes activate-reflex{0%{transform:translate(-115%)}to{transform:translate(140%)}}