.landing-main-button{--white:var(--color-on-brand);--purple-100:var(--color-brand-muted);--purple-200:var(--color-secondary);--purple-300:var(--color-brand);--purple-400:var(--color-brand-hover);--purple-500:var(--color-text);--radius:18px;border-radius:var(--radius);cursor:pointer;font-size:23px;font-family:var(--font-body),ui-sans-serif,system-ui,sans-serif;letter-spacing:-1px;background:0 0;border:0;outline:none;width:220px;height:80px;position:relative}.landing-main-button__bg{border-radius:inherit;filter:blur(1px);position:absolute;inset:0}.landing-main-button__bg:before,.landing-main-button__bg:after{content:"";border-radius:calc(var(--radius)*1.1);background:var(--purple-500);position:absolute;inset:0}.landing-main-button__bg:before{filter:blur(5px);box-shadow:-7px 6px 0 0 color-mix(in srgb,var(--purple-500)40%,transparent),-14px 12px 0 0 color-mix(in srgb,var(--purple-500)30%,transparent),-21px 18px 4px 0 color-mix(in srgb,var(--purple-500)25%,transparent),-28px 24px 8px 0 color-mix(in srgb,var(--purple-500)15%,transparent),-35px 30px 12px 0 color-mix(in srgb,var(--purple-500)12%,transparent),-42px 36px 16px 0 color-mix(in srgb,var(--purple-500)8%,transparent),-56px 42px 20px 0 color-mix(in srgb,var(--purple-500)5%,transparent);transition:all .3s}.landing-main-button__wrap{border-radius:inherit;background:linear-gradient(to bottom,var(--purple-100)0%,var(--purple-400)100%);height:100%;padding:3px;transition:all .3s;position:relative;overflow:hidden;transform:translate(6px,-6px)}.landing-main-button__outline{opacity:0;border-radius:inherit;outline:none;transition:all .4s;position:absolute;inset:0;overflow:hidden}.landing-main-button__outline:before{content:"";background:linear-gradient(90deg,#0000 0%,#fff 50%,#0000 100%);width:120px;height:300px;margin:auto;animation:3s linear infinite paused spin;position:absolute;inset:2px}.landing-main-button__content{pointer-events:none;z-index:1;border-radius:calc(var(--radius)*.85);background:linear-gradient(to bottom,var(--purple-300)0%,var(--purple-400)100%);height:100%;box-shadow:inset -2px 12px 11px -5px var(--purple-200),inset 1px -3px 11px 0px color-mix(in srgb,var(--purple-500)35%,transparent);justify-content:center;align-items:center;gap:16px;font-weight:600;transition:all .3s;display:flex;position:relative}.landing-main-button__content:before{content:"";z-index:10;opacity:.7;background:linear-gradient(to bottom,transparent,var(--purple-400));filter:brightness(1.3)blur(5px);width:80%;margin:auto;position:absolute;inset:45% 0 35%}.landing-main-button__char{justify-content:center;align-items:center;transition:all .3s;display:flex}.landing-main-button__char span{color:#0000;display:block;position:relative}.landing-main-button__char.state-1 span{animation:charAppear 1.2s ease backwards calc(var(--i)*30ms)}.landing-main-button__char.state-1 span:before,.landing-main-button__char span:after{content:attr(data-label);color:var(--white);text-shadow:-1px 1px 2px var(--purple-500);position:absolute;left:0}.landing-main-button__char span:before{opacity:0;transform:translateY(-100%)}.landing-main-button__char.state-2{position:absolute;left:80px}.landing-main-button__char.state-2 span:after{opacity:1}.landing-main-button__icon{z-index:10;animation:.8s cubic-bezier(.7,-.5,.3,1.2) forwards resetArrow}.landing-main-button__icon div,.landing-main-button__icon div:before,.landing-main-button__icon div:after{background-color:var(--white);border-radius:1px;height:3px}.landing-main-button__icon div:before,.landing-main-button__icon div:after{content:"";transform-origin:100%;border-radius:15px;width:14px;transition:all .3s;position:absolute;right:0}.landing-main-button__icon div{width:24px;box-shadow:-2px 2px 5px var(--purple-400);background:linear-gradient(to bottom,var(--white),var(--purple-100));animation:1s ease-in-out infinite paused swingArrow;position:relative;transform:scale(.9)}.landing-main-button__icon div:before{box-shadow:1px -2px 3px -1px var(--purple-400);animation:1s linear infinite paused rotateArrowLine;top:1px;transform:rotate(44deg)}.landing-main-button__icon div:after{box-shadow:-2px 2px 3px 0 var(--purple-400);background:linear-gradient(200deg,var(--white),var(--purple-100));animation:1s linear infinite paused rotateArrowLine2;bottom:1px;transform:rotate(316deg)}.landing-main-button__path{z-index:12;stroke-dasharray:150 480;stroke-dashoffset:150px;pointer-events:none;position:absolute;bottom:0;left:0;right:0}.landing-main-button__splash{pointer-events:none;stroke-dasharray:60 60;stroke-dashoffset:60px;stroke:var(--purple-300);position:absolute;top:0;left:0;transform:translate(-17%,-31%)}.landing-main-button:hover .landing-main-button__words{opacity:1}.landing-main-button:hover .landing-main-button__words span{animation-play-state:running}.landing-main-button:hover .landing-main-button__char.state-1 span:before{animation:charAppear .7s ease calc(var(--i)*30ms)}.landing-main-button:hover .landing-main-button__char.state-1 span:after{opacity:1;animation:charDisappear .7s ease calc(var(--i)*30ms)}.landing-main-button:hover .landing-main-button__wrap{transform:translate(8px,-8px)}.landing-main-button:hover .landing-main-button__outline{opacity:1}.landing-main-button:hover .landing-main-button__outline:before,.landing-main-button:hover .landing-main-button__icon div:before,.landing-main-button:hover .landing-main-button__icon div:after,.landing-main-button:hover .landing-main-button__icon div{animation-play-state:running}.landing-main-button:active .landing-main-button__bg:before{filter:blur(5px);opacity:.7;box-shadow:-7px 6px 0 0 color-mix(in srgb,var(--purple-500)40%,transparent),-14px 12px 0 0 color-mix(in srgb,var(--purple-500)25%,transparent),-21px 18px 4px 0 color-mix(in srgb,var(--purple-500)15%,transparent)}.landing-main-button:active .landing-main-button__content{box-shadow:inset -1px 12px 8px -5px color-mix(in srgb,var(--purple-500)40%,transparent),inset 0px -3px 8px 0px var(--purple-200)}.landing-main-button:active .landing-main-button__words,.landing-main-button:active .landing-main-button__outline{opacity:0}.landing-main-button:active .landing-main-button__wrap{transform:translate(3px,-3px)}.landing-main-button:active .landing-main-button__splash{animation:.8s cubic-bezier(.3,0,0,1) 50ms forwards splash}.landing-main-button:focus .landing-main-button__path{animation:1.6s .2s forwards path}.landing-main-button:focus .landing-main-button__icon{animation:1s cubic-bezier(.7,-.5,.3,1.5) forwards arrow}.landing-main-button__char.state-2 span:after,.landing-main-button:focus .landing-main-button__char.state-1 span{animation:charDisappear .5s ease forwards calc(var(--i)*30ms)}.landing-main-button:focus .landing-main-button__char.state-2 span:after{animation:charAppear 1s ease backwards calc(var(--i)*30ms)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes charAppear{0%{opacity:0;filter:blur(20px);transform:translateY(50%)}20%{opacity:1;transform:translateY(70%)}50%{opacity:1;filter:blur();transform:translateY(-15%)}to{opacity:1;transform:translateY(0)}}@keyframes charDisappear{0%{opacity:1;transform:translateY(0)}to{opacity:0;filter:blur(3px);transform:translateY(-70%)}}@keyframes arrow{0%{opacity:1}50%{opacity:0;transform:translate(60px)}51%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(-128px)}}@keyframes swingArrow{50%{transform:translate(5px)scale(.9)}}@keyframes rotateArrowLine{50%{transform:rotate(30deg)}80%{transform:rotate(55deg)}}@keyframes rotateArrowLine2{50%{transform:rotate(330deg)}80%{transform:rotate(300deg)}}@keyframes resetArrow{0%{transform:translate(-128px)}to{transform:translate(0)}}@keyframes path{0%{stroke:var(--color-on-brand)}to{stroke-dashoffset:-480px;stroke:var(--color-brand-muted)}}@keyframes splash{to{stroke-dasharray:2 60;stroke-dashoffset:-60px}}
