.fancy-btn{--fb-white:#fff6e6;--fb-100:#ffd873;--fb-200:#f9b93f;--fb-300:#ff8a4c;--fb-400:#f04e23;--fb-500:#1c1a17;--fb-radius:18px;border-radius:var(--fb-radius);cursor:pointer;font-size:20px;font-family:var(--font-sans);letter-spacing:-.5px;background:0 0;border:0;outline:none;width:230px;height:72px;padding:0;display:inline-block;position:relative;transform:rotate(353deg)skew(4deg)}.fancy-btn .bg{border-radius:inherit;filter:blur(1px);position:absolute;inset:0}.fancy-btn .bg:before,.fancy-btn .bg:after{content:"";border-radius:calc(var(--fb-radius) * 1.1);background:var(--fb-500);position:absolute;inset:0}.fancy-btn .bg:before{filter:blur(5px);transition:all .3s;box-shadow:-7px 6px #1c1a1766,-14px 12px #1c1a174d,-21px 18px 4px #1c1a1740,-28px 24px 8px #1c1a1726,-35px 30px 12px #1c1a171f,-42px 36px 16px #1c1a1714,-56px 42px 20px #1c1a170d}.fancy-btn .wrap{border-radius:inherit;background:linear-gradient(to bottom, var(--fb-100) 0%, var(--fb-400) 100%);height:100%;padding:3px;transition:all .3s;position:relative;overflow:hidden;transform:translate(6px,-6px)}.fancy-btn .outline{opacity:0;border-radius:inherit;outline:none;transition:all .4s;position:absolute;inset:0;overflow:hidden}.fancy-btn .outline:before{content:"";background:linear-gradient(90deg,#0000 0%,#fff 50%,#0000 100%);width:120px;height:300px;margin:auto;animation:3s linear infinite paused fb-spin;position:absolute;inset:2px}.fancy-btn .content{pointer-events:none;z-index:1;border-radius:calc(var(--fb-radius) * .85);background:linear-gradient(to bottom, var(--fb-300) 0%, var(--fb-400) 100%);height:100%;box-shadow:inset -2px 12px 11px -5px var(--fb-200), inset 1px -3px 11px 0px #00000059;justify-content:center;align-items:center;gap:14px;font-weight:700;transition:all .3s;display:flex;position:relative}.fancy-btn .content:before{content:"";z-index:10;opacity:.7;background:linear-gradient(to bottom, transparent, var(--fb-400));filter:brightness(1.3)blur(5px);width:80%;margin:auto;position:absolute;inset:45% 0 35%}.fancy-btn .char{justify-content:center;align-items:center;transition:all .3s;display:flex}.fancy-btn .char span{color:#0000;display:block;position:relative}.fancy-btn .char.state-1 span{animation:fb-charAppear 1.2s ease backwards calc(var(--i) * 30ms)}.fancy-btn .char.state-1 span:before,.fancy-btn .char span:after{content:attr(data-label);color:var(--fb-white);text-shadow:-1px 1px 2px var(--fb-500);position:absolute;left:0}.fancy-btn .char span:before{opacity:0;transform:translateY(-100%)}.fancy-btn .char.state-2{position:absolute;left:74px}.fancy-btn .char.state-2 span:after{opacity:1}.fancy-btn .icon{z-index:10;animation:.8s cubic-bezier(.7,-.5,.3,1.2) forwards fb-resetArrow}.fancy-btn .icon div,.fancy-btn .icon div:before,.fancy-btn .icon div:after{background-color:var(--fb-white);border-radius:1px;height:3px}.fancy-btn .icon div:before,.fancy-btn .icon div:after{content:"";transform-origin:100%;border-radius:15px;width:14px;transition:all .3s;position:absolute;right:0}.fancy-btn .icon div{width:24px;box-shadow:-2px 2px 5px var(--fb-400);background:linear-gradient(to bottom, var(--fb-white), var(--fb-100));animation:1s ease-in-out infinite paused fb-swingArrow;position:relative;transform:scale(.9)}.fancy-btn .icon div:before{box-shadow:1px -2px 3px -1px var(--fb-400);animation:1s linear infinite paused fb-rotateArrowLine;top:1px;transform:rotate(44deg)}.fancy-btn .icon div:after{box-shadow:-2px 2px 3px 0 var(--fb-400);background:linear-gradient(200deg, var(--fb-white), var(--fb-100));animation:1s linear infinite paused fb-rotateArrowLine2;bottom:1px;transform:rotate(316deg)}.fancy-btn .path{z-index:12;stroke-dasharray:150 480;stroke-dashoffset:150px;pointer-events:none;position:absolute;bottom:0;left:0;right:0}.fancy-btn .splash{pointer-events:none;stroke-dasharray:60 60;stroke-dashoffset:60px;stroke:var(--fb-200);position:absolute;top:0;left:0;transform:translate(-17%,-31%)}.fancy-btn:hover .char.state-1 span:before{animation:fb-charAppear .7s ease calc(var(--i) * 30ms)}.fancy-btn:hover .char.state-1 span:after{opacity:1;animation:fb-charDisappear .7s ease calc(var(--i) * 30ms)}.fancy-btn:hover .wrap{transform:translate(8px,-8px)}.fancy-btn:hover .outline{opacity:1}.fancy-btn:hover .outline:before,.fancy-btn:hover .icon div:before,.fancy-btn:hover .icon div:after,.fancy-btn:hover .icon div{animation-play-state:running}.fancy-btn:active .bg:before{filter:blur(5px);opacity:.7;box-shadow:-7px 6px #1c1a1766,-14px 12px #1c1a1740,-21px 18px 4px #1c1a1726}.fancy-btn:active .content{box-shadow:inset -1px 12px 8px -5px #3c140066, inset 0px -3px 8px 0px var(--fb-200)}.fancy-btn:active .outline{opacity:0}.fancy-btn:active .wrap{transform:translate(3px,-3px)}.fancy-btn:active .splash{animation:.8s cubic-bezier(.3,0,0,1) 50ms forwards fb-splash}.fancy-btn:focus .path{animation:1.6s .2s forwards fb-path}.fancy-btn:focus .icon{animation:1s cubic-bezier(.7,-.5,.3,1.5) forwards fb-arrow}.fancy-btn .char.state-2 span:after,.fancy-btn:focus .char.state-1 span{animation:fb-charDisappear .5s ease forwards calc(var(--i) * 30ms)}.fancy-btn:focus .char.state-2 span:after{animation:fb-charAppear 1s ease backwards calc(var(--i) * 30ms)}@keyframes fb-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fb-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 fb-charDisappear{0%{opacity:1;transform:translateY(0)}to{opacity:0;filter:blur(3px);transform:translateY(-70%)}}@keyframes fb-arrow{0%{opacity:1}50%{opacity:0;transform:translate(60px)}51%{opacity:0;transform:translate(-200px)}to{opacity:1;transform:translate(-128px)}}@keyframes fb-swingArrow{50%{transform:translate(5px)scale(.9)}}@keyframes fb-rotateArrowLine{50%{transform:rotate(30deg)}80%{transform:rotate(55deg)}}@keyframes fb-rotateArrowLine2{50%{transform:rotate(330deg)}80%{transform:rotate(300deg)}}@keyframes fb-resetArrow{0%{transform:translate(-128px)}to{transform:translate(0)}}@keyframes fb-path{0%{stroke:var(--fb-white)}to{stroke-dashoffset:-480px;stroke:var(--fb-100)}}@keyframes fb-splash{to{stroke-dasharray:2 60;stroke-dashoffset:-60px}}@media (hover:none){.fancy-btn .char.state-1 span:before{animation:fb-charAppear .7s ease calc(var(--i) * 30ms)}.fancy-btn .outline{opacity:1}.fancy-btn .outline:before,.fancy-btn .icon div:before,.fancy-btn .icon div:after,.fancy-btn .icon div{animation-play-state:running}.fancy-btn:active .wrap{transform:translate(3px,-3px)}.fancy-btn:active .splash{animation:.8s cubic-bezier(.3,0,0,1) 50ms forwards fb-splash}.fancy-btn:active .path{animation:1.6s .2s forwards fb-path}.fancy-btn:active .icon{animation:1s cubic-bezier(.7,-.5,.3,1.5) forwards fb-arrow}.fancy-btn:active .char.state-1 span{animation:fb-charDisappear .5s ease forwards calc(var(--i) * 30ms)}.fancy-btn:active .char.state-2 span:after{animation:fb-charAppear 1s ease backwards calc(var(--i) * 30ms)}}