*,*:after,*:before{box-sizing:border-box}:root{--transition: .25s;--spark: 1.8s;--hover-color: #eb9b4b}.sparkle-button{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:100%}.sparkle-button button{--cut: .1em;--active: 0;--bg: radial-gradient( 40% 50% at center 100%, rgba(235,155,75,var(--active)), transparent ), radial-gradient( 80% 100% at center 120%, rgba(235,155,75,var(--active)), transparent ), rgba(235,155,75, calc(var(--active) * .25));background:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);font-size:.9rem;font-weight:1000;color:#000;cursor:pointer;padding:.8em 1.2em;display:flex;align-items:center;justify-content:center;gap:.25em;white-space:nowrap;border-radius:30px;position:relative;box-shadow:0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) #eb9b4ba6,inset 0 1px #ffffff40,inset 0 -1px #ffffff1a;transition:all var(--transition);scale:calc(1 + (var(--active) * .1));width:100%;max-width:280px}@media (min-width: 640px){.sparkle-button button{font-size:1.1rem;padding:.85em 1.4em;max-width:320px}}@media (min-width: 1024px){.sparkle-button button{font-size:1.3rem;padding:.9em 1.6em;max-width:380px}}.sparkle-button button:hover{--active: 1;background:#eb9b4b;color:#000;box-shadow:0 0 3em 1em #eb9b4b80,0 .05em #eb9b4b4d inset,0 -.05em #eb9b4b4d inset}.sparkle-button button:active{scale:1}.sparkle-button svg{overflow:visible!important}.sparkle-button .sparkle path{color:#eb9b4b;transform-box:fill-box;transform-origin:center;fill:#eb9b4b;stroke:#eb9b4b;animation-delay:calc((var(--transition) * 1.5) + (var(--delay) * 1s));animation-duration:.6s;transition:all var(--transition)}.sparkle-button button:hover .sparkle path{color:#ece0e0;fill:#e6dede;stroke:#e7e1e1}.sparkle-button button:is(:hover,:focus-visible) .sparkle path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle-button .sparkle path:nth-of-type(1){--scale: .5;--delay: .1;--base: 40%}.sparkle-button .sparkle path:nth-of-type(2){--scale: 1.5;--delay: .2;--base: 20%}.sparkle-button .sparkle path:nth-of-type(3){--scale: 2.5;--delay: .35;--base: 30%}.sparkle-button button:before{content:"";position:absolute;inset:-.25em;z-index:-1;border:.25em solid rgba(235,155,75,.5);border-radius:30px;opacity:var(--active, 0);transition:opacity var(--transition)}.sparkle-button .spark{position:absolute;inset:-.25em;border-radius:30px;rotate:0deg;overflow:visible;z-index:-1;mask:linear-gradient(white,transparent 50%);animation:flip calc(var(--spark) * 2) infinite steps(2,end)}@keyframes flip{to{rotate:360deg}}.sparkle-button .spark{position:absolute;inset:0;border-radius:30px;overflow:hidden;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;padding:2px}.sparkle-button .spark:before{content:"";position:absolute;inset:-50%;border-radius:inherit;background:conic-gradient(from 0deg,transparent 0deg 320deg,#eb9b4b 320deg 360deg);opacity:calc(var(--active) + .4);animation:rotate 8s linear infinite;filter:blur(1px)}.sparkle-button .spark:after{content:"";position:absolute;inset:var(--cut);border-radius:30px}.sparkle-button .backdrop{position:absolute;inset:var(--cut);background:var(--bg);border-radius:30px;transition:background var(--transition)}@keyframes rotate{to{transform:rotate(360deg)}}@supports (selector(:has(:is(+ *)))){.sparkle-button:has(button:is(:hover,:focus-visible)){--active: 1;--play-state: running}.sparkle-button .bodydrop{display:none}}.sparkle-button button:is(:hover,:focus-visible)~.bodydrop,.sparkle-button button:is(:hover,:focus-visible)~.particle-pen{--active: 1;--play-state: running}.sparkle-button .bodydrop{background:transparent;position:fixed;inset:0;z-index:-1}.sparkle-button button:is(:hover,:focus-visible){--active: 1;--play-state: running}.sparkle-button .particle-pen{position:absolute;width:200%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white,transparent 65%);z-index:-1;opacity:var(--active, 0);transition:opacity var(--transition)}.sparkle-button .particle{fill:#fff;width:calc(var(--size, .25) * 1rem);aspect-ratio:1;position:absolute;top:calc(var(--y) * 1%);left:calc(var(--x) * 1%);opacity:var(--alpha, 1);animation:float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;transform-origin:var(--origin-x, 1000%) var(--origin-y, 1000%);z-index:-1;animation-play-state:var(--play-state, paused)}.sparkle-button .particle path{fill:#eb9b4b;stroke:none;transition:fill var(--transition)}.sparkle-button button:hover~.particle-pen .particle path{fill:#000}.sparkle-button .particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:360deg}}.sparkle-button .text{translate:2% -6%;letter-spacing:.01ch;background:linear-gradient(90deg,#130c0c,#000);-webkit-background-clip:text;color:transparent;transition:all var(--transition)}.sparkle-button button:hover .text{background:linear-gradient(90deg,#fffdfd,#f0ebeb);-webkit-background-clip:text}.sparkle-button button svg{inline-size:1.25em;translate:-25% -5%}.sparkle-button.small button{padding:6px 16px;font-size:14px}.sparkle-button.small .sparkle{width:26px;height:26px}