.area{--ease:cubic-bezier(.5,0,.3,1);--ease-elastic:cubic-bezier(.5,2,.3,.8);--radius:26px;--primary:#c9a227;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .6s var(--ease-elastic);position:relative}.area input{opacity:0;width:0;height:0}.button{cursor:pointer;border-radius:var(--radius);pointer-events:none;width:240px;height:74px;transform-style:preserve-3d;perspective:1000px;background:var(--primary);letter-spacing:1px;border:0;outline:none;font-family:Arial;font-size:21px;transition:background-color 2s linear,box-shadow .5s,transform .6s;position:relative;transform:rotateX(4deg);box-shadow:inset 0 0 30px #c9a22799,0 5px 10px -2px #000a1480,0 40px 30px -15px #0a141e4d,inset 0 -2px 0 -1px #484e60,inset 0 0 2px 4px #888ea3}.cta-size-small .button{--radius:16px;letter-spacing:.1px;width:160px;height:48px;padding:0;font-size:16px}.cta-size-small .button:before,.cta-size-small .button:after{width:70px;height:70px}.cta-size-small .wave{width:105%;height:140%}.cta-size-small .sparks{height:38px;top:7px;left:36px}.cta-size-medium .button{--radius:22px;width:200px;height:62px;font-size:18px}.cta-size-medium .button:before,.cta-size-medium .button:after{width:85px;height:85px}.cta-size-medium .wave{width:108%;height:145%}.cta-size-medium .sparks{height:48px;top:8px;left:45px}.cta-size-large .button{--radius:26px;width:240px;height:74px;font-size:21px}.button:before,.button:after{content:"";filter:blur(40px);mix-blend-mode:plus-lighter;background:#fff;border-radius:50%;width:100px;height:100px;margin:auto;transition:all 1s;display:block;position:absolute;inset:10px 0 0}@keyframes pulse-out{40%{transform:scale(1)}}.button:after{animation:pulse-out 3s var(--ease-elastic)infinite;transform:scale(0)}.button:before,.area input:not(:checked)~.button:after{opacity:0}.area input:not(:checked)~.button:before{opacity:1}.wrap{border-radius:calc(var(--radius)*.85);transform-origin:top;background:linear-gradient(#c9a227 0%,#d4af37 50%,#fbbf24 100%);padding:0;transition:all .7s;animation:.9s forwards cover-close;position:absolute;inset:0;transform:scaleX(.99)translateY(-7px)}.area input:not(:checked)~.button .wrap{animation:.9s forwards cover-open}@keyframes cover-open{0%{box-shadow:none;transform:translate3d(0,-7px,10px)}20%{transform:translateZ(10px)}80%{transform:translateZ(10px)rotateY(0)rotateX(74deg)}to{transform:translateZ(10px)rotateY(0)rotateX(70deg);box-shadow:0 5px 1px -1px #798593,0 9px 0 -2px #4d6176,0 60px 40px -30px #000}}@keyframes cover-close{0%{transform:translateZ(10px)rotateY(0)rotateX(70deg);box-shadow:0 5px 1px -1px #798593,0 10px 0 -1px #4d6176,0 60px 40px -30px #000}to{box-shadow:none;transform:scaleX(.99)translate3d(0,-7px,10px)}}.reflex{z-index:9;border-radius:inherit;position:absolute;inset:0;overflow:hidden}.reflex:before{content:"";width:300px;transition:all .7s var(--ease);background:linear-gradient(90deg,#ddf9ff33 10%,#ddf5ff80 60%,#ddf6ff66 60%,#ddfffe33 90%);position:absolute;top:-40%;bottom:-40%;left:-132%;transform:translate(0)skew(-30deg)}.area:hover .reflex:before{transform:translate(192%)skew(-30deg)}.path{stroke-dasharray:60 150;stroke-dashoffset:60px;pointer-events:none;stroke-width:2px;animation:.6s linear forwards path-in;position:absolute;top:87%;left:50%;overflow:visible;transform:translate(-50%)}.area input:not(:checked)~.button .path{animation:1.2s forwards path-out}@keyframes path-out{0%{stroke:#fff;transform:translate(-50%)translateY(-15px)}to{stroke-dashoffset:-150px;stroke:var(--primary);transform:translate(-50%)translateY(15px)}}@keyframes path-in{0%{stroke-dashoffset:-150px;stroke:#fff;transform:translate(-50%)translateY(-5px)}to{stroke:var(--primary);transform:translate(-50%)translateY(-16px)}}.wave{opacity:0;border-radius:70px;width:110%;height:150%;margin:auto;transition:all .5s;position:absolute;top:56%;left:50%;transform:translate(-50%,-50%)}.wave:before,.wave:after{content:"";border-radius:inherit;filter:blur(3px);border-top:3px solid #fff;border-bottom:3px solid #fff;animation:1.5s linear infinite wave;position:absolute;inset:0;transform:translate(50%)}.wave:after{animation-delay:.4s}.area input:not(:checked)~.button .wave{opacity:1}@keyframes wave{0%{opacity:0;transform:scale(1);box-shadow:0 0 30px #fff}35%{opacity:1;transform:scale(1.3)}70%,to{opacity:0;box-shadow:0 0 100px var(--primary);transform:scale(1.6)}}.content{pointer-events:none;z-index:1;border-radius:calc(var(--radius)*.85);white-space:nowrap;justify-content:center;align-items:center;gap:14px;min-width:0;height:100%;font-weight:600;transition:all .3s;display:flex;position:relative;overflow:hidden}.cta-size-small .content{gap:8px;padding:0 8px}.content:before,.content:after{content:"";transition:all 1s var(--ease);border-radius:inherit;z-index:-1;position:absolute;inset:0}.content:before{filter:blur(2px);background:linear-gradient(#dde0e1 30%,#aeb2b8 90%);top:-2px}.content:after{box-shadow:inset 0 -7px 1px #28466433,inset 0 -4px 1px #28466466,inset 0 -2px #14283c99,inset 0 -3px #fff}.text{white-space:nowrap;flex-wrap:nowrap;justify-content:center;align-items:center;gap:0;transition:all .3s;display:flex;position:absolute;inset:0;transform:translateY(-2px)}.text span{color:#0000;vertical-align:baseline;flex-shrink:0;margin:0;padding:0;display:inline-block;position:relative}.text .text-space{color:#0000;vertical-align:baseline;width:.3em;display:inline}.text.state-1 span:nth-child(3){margin-right:0}.text span:before,.text span:after{content:attr(data-label);color:#5f4603;text-shadow:0 1px 1px #ffffffb3;position:absolute;left:0}.text span:before{opacity:0;transform:translateY(-100%)}.text.state-2 span:before,.text.state-2 span:after{color:#5f4603}.area input:checked~.button .text.state-2 span{filter:blur(5px)}.area:hover .text span:before{animation:char-in .8s ease calc(var(--i)*40ms)forwards}.area:hover .text span:after,.area input:not(:checked)~.button .text.state-1 span:before,.area input:not(:checked)~.button .text.state-1 span:after,.area input:checked~.button .text.state-2 span:before,.area input:checked~.button .text.state-2 span:after{opacity:0;animation:char-out 1.2s ease calc(var(--i)*40ms)backwards}@keyframes char-in{0%{opacity:0;filter:blur(10px);color:#c9a227;transform:scale(10)translate(-100%)}25%{transform:translateY(10%)translateX(calc(-40px + ((var(--i) - 1)/10)*80px))scale(2);opacity:1;filter:blur(1px);color:#0000}50%{opacity:1;filter:blur();transform:translateY(20%)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes char-out{0%{opacity:1;transform:translateY(0)}40%{color:#d4af37}to{filter:blur(4px);color:#9a7518;text-shadow:0 4px 2px #a8821acc;opacity:0;transform:translateY(-80%)scale(4)}}.area:hover .button{transition:all .6s var(--ease-elastic),background 1s ease;transform:rotateX(0)translateY(5px)}.area:hover .content:before{transform:scale(.97,.92)}.area:active .button{transform:rotateX(0)translateY(8px)}.area:active .wrap{transform:scale(1)translate(0)}.area:active .wave{opacity:0}.area:active .content:before{filter:blur(13px);transform:scaleX(.95)}.sparks{pointer-events:none;stroke:#f90;opacity:0;height:58px;margin:auto;position:absolute;top:10px;left:54px;transform:translateZ(100px)}.sparks path{stroke-width:5px;stroke-dasharray:30 150;stroke-dashoffset:30px;animation:.6s infinite sparks;animation-delay:calc(var(--i)*1s);animation-duration:calc(var(--i)*50ms + .6s)}@keyframes sparks{0%{stroke-dasharray:30 150}50%,to{stroke-dashoffset:-150px}}.area input:not(:checked)~.button .gears,.area input:not(:checked)~.button .sparks{opacity:1}.area input:not(:checked)~.button .sparks{transition:all 1.5s}.gears{border-radius:inherit;opacity:0;transition:all 1s;position:absolute;inset:4px 4px 1px;overflow:hidden}.gears svg{fill:#49b9c2;width:80%;position:relative;top:50%;left:43%;transform:translate(-50%,-50%)}.gears svg path{transform-origin:50%;transform-box:fill-box}.gears svg .shadow{fill:#24717d33;translate:2px 8px}.gears svg .small{animation:2.5s linear infinite spin}.gears svg .medium{animation:3.75s linear infinite reverse spin}.gears svg .large{animation:5s linear infinite spin;translate:3px -6px}.gears:before,.gears:after{content:"";background:#9b9b9b4d;border-radius:50%;width:7px;height:7px;position:absolute;bottom:11px;box-shadow:inset 0 2px #0003}.gears:before{left:12px}.gears:after{right:12px}@keyframes spin{to{transform:rotate(359deg)}}