.button{--primary:#e6e085;--neutral-1:#f7f8f7;--neutral-2:#e7e7e7;--radius:14px;border-radius:var(--radius);text-shadow:0 1px 1px rgba(0,0,0,.3);border:none;box-shadow:0 .5px .5px 1px rgba(255,255,255,.2),0 10px 20px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;transition:all .3s ease;min-width:200px;padding:20px;height:68px;font-family:Galano Grotesque,Poppins,Montserrat,sans-serif;font-style:normal;font-size:18px;font-weight:600}.button:hover{transform:scale(1.02);box-shadow:0 0 1px 2px rgba(255,255,255,.3),0 15px 30px rgba(0,0,0,.3),0 10px 3px -3px rgba(0,0,0,.04)}.button:active{transform:scale(1);box-shadow:0 0 1px 2px rgba(255,255,255,.3),0 10px 3px -3px rgba(0,0,0,.2)}.button:after{content:"";position:absolute;inset:0;border-radius:var(--radius);border:2.5px solid transparent;background:linear-gradient(var(--neutral-1),var(--neutral-2)) padding-box,linear-gradient(to bottom,rgba(0,0,0,.1),rgba(0,0,0,.45)) border-box;z-index:0;transition:all .4s ease}.button:hover:after{transform:scale(1.05,1.1);box-shadow:inset 0 -1px 3px 0 rgba(255,255,255,1)}.button:before{content:"";inset:7px 6px 6px 6px;position:absolute;background:linear-gradient(to top,var(--neutral-1),var(--neutral-2));border-radius:30px;filter:blur(.5px);z-index:2}.state .icon,.state p{align-items:center;justify-content:center}.state .icon{position:absolute;left:0;top:0;bottom:0;margin:auto;transform:scale(1.25);transition:all .3s ease;display:flex}.state .icon svg{overflow:visible}.outline{border-radius:inherit;overflow:hidden;z-index:1;opacity:0;transition:opacity .4s ease;inset:-2px -3.5px}.outline:before{content:"";position:absolute;inset:-100%;background:conic-gradient(from 180deg,transparent 60%,white 80%,transparent 100%);animation:spin 2s linear infinite;animation-play-state:paused}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.button:hover .outline{opacity:1}.button:hover .outline:before{animation-play-state:running}.state p span{display:block;animation:slideDown .8s ease forwards calc(var(--i) * .03s)}.button:hover p span{opacity:1;animation:wave .5s ease forwards calc(var(--i) * .02s)}.button:focus p span{opacity:1;animation:disapear .6s ease forwards calc(var(--i) * .03s)}@keyframes wave{30%{opacity:1;transform:translateY(4px) translateX(0) rotate(0)}50%{opacity:1;transform:translateY(-3px) translateX(0) rotate(0);color:var(--primary)}to{opacity:1;transform:translateY(0) translateX(0) rotate(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px) translateX(5px) rotate(-90deg);color:var(--primary);filter:blur(5px)}30%{opacity:1;transform:translateY(4px) translateX(0) rotate(0);filter:blur(0)}50%{opacity:1;transform:translateY(-3px) translateX(0) rotate(0)}to{opacity:1;transform:translateY(0) translateX(0) rotate(0)}}@keyframes disapear{0%{opacity:1}to{opacity:0;transform:translateX(5px) translateY(20px);color:var(--primary);filter:blur(5px)}}.state--default .icon svg{animation:land .6s ease forwards}.button:hover .state--default .icon{transform:rotate(45deg) scale(1.25)}.button:focus .state--default svg{animation:takeOff .8s linear forwards}.button:focus .state--default .icon{transform:rotate(0) scale(1.25)}@keyframes takeOff{0%{opacity:1}60%{opacity:1;transform:translateX(70px) rotate(45deg) scale(2)}to{opacity:0;transform:translateX(160px) rotate(45deg) scale(0)}}@keyframes land{0%{transform:translateX(-60px) translateY(30px) rotate(-50deg) scale(2);opacity:0;filter:blur(3px)}to{transform:translateX(0) translateY(0) rotate(0);opacity:1;filter:blur(0)}}.state--default .icon:before{content:"";position:absolute;top:50%;height:2px;width:0;left:-5px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.5))}.button:focus .state--default .icon:before{animation:contrail .8s linear forwards}@keyframes contrail{0%{width:0;opacity:1}8%{width:15px}60%{opacity:.7;width:80px}to{opacity:0;width:160px}}.state{padding-left:29px;z-index:2;position:relative}.state--default span:nth-child(4),.state--default span:nth-child(8){margin-right:5px}.state--sent{display:none}.state--sent svg{transform:scale(1.25);margin-right:8px}.button:focus .state--default{position:absolute}.button:focus .state--sent{display:flex}.button:focus .state--sent span{opacity:0;animation:slideDown .8s ease forwards calc(var(--i) * .2s)}.button:focus .state--sent .icon svg{opacity:0;animation:appear 1.2s ease .8s forwards}@keyframes appear{0%{opacity:0;transform:scale(4) rotate(-40deg);color:var(--primary);filter:blur(4px)}30%{opacity:1;transform:scale(.6);filter:blur(1px)}50%{opacity:1;transform:scale(1.2);filter:blur(0)}to{opacity:1;transform:scale(1)}}.button{position:relative;width:240px;height:60px;border:0;padding:0;background-color:transparent;cursor:pointer;outline:none;transition:all .3s cubic-bezier(.445,.05,.55,.95);overflow:hidden;margin:0 auto;display:block}.outline{position:absolute;top:0;left:0;right:0;bottom:0;border-radius:30px;background-color:#f4f4f5;box-shadow:0 2px 10px rgba(0,0,0,.1),0 5px 15px rgba(0,0,0,.05);clip-path:inset(0 0 0 0 round 30px);transition:clip-path .3s cubic-bezier(.445,.05,.55,.95)}.button:hover .outline{clip-path:inset(5px 5px 5px 5px round 30px)}.button:disabled{cursor:not-allowed;opacity:.9}.button:disabled:hover .outline{clip-path:inset(0 0 0 0 round 30px)}.state{position:absolute;top:0;left:0;right:0;bottom:0;color:#0a0c10;font-weight:600;border-radius:30px;backface-visibility:hidden;transition:all .2s cubic-bezier(.445,.05,.55,.95)}.icon,.state{display:flex;align-items:center;justify-content:center}.icon{margin-right:12px;font-size:1.5rem;filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}.state p{font-size:1.125rem;font-weight:600;line-height:1;margin:0;display:flex;text-shadow:0 1px 1px rgba(255,255,255,.8)}.state p span{display:inline-block;animation:fadeInText .4s calc(var(--i) * .04s) ease-out forwards;opacity:0;transform:translateY(8px)}@keyframes fadeInText{to{opacity:1;transform:translateY(0)}}.state--default,.state--error,.state--sending,.state--sent{display:flex;opacity:0}.button.idle .state--default,.button.sending .state--sending,.button.success .state--sent{opacity:1}.button.error .state--error{opacity:1;color:#dc2626}@keyframes flyAway{0%{transform:translateX(0) translateY(0) rotate(0);opacity:1}40%{transform:translateX(10px) translateY(-5px) rotate(5deg);opacity:1}to{transform:translateX(100px) translateY(-20px) rotate(15deg);opacity:0}}.button.error .state--error{background-color:rgba(220,38,38,.1)}.button.error .outline{background-color:#fef2f2;box-shadow:0 2px 10px rgba(220,38,38,.15),0 5px 15px rgba(220,38,38,.1)}