.sparkle-btn-wrapper{--transition:.25s;--spark:1.8s;--active:0;display:inline-block;position:relative}.sparkle-btn-wrapper:hover,.sparkle-btn-wrapper:focus-within{--active:1;--play-state:running}.sparkle-btn{--cut:.35em;--bg:radial-gradient(40% 50% at center 100%, hsl(270 calc(var(--active) * 97%) 72% / var(--active)), transparent), radial-gradient(80% 100% at center 120%, hsl(260 calc(var(--active) * 97%) 70% / var(--active)), transparent), hsl(260 calc(var(--active) * 97%) calc((var(--active) * 44%) + 12%));background:var(--bg);cursor:pointer;white-space:nowrap;box-shadow:0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) #7b3bfcbf, 0 .05em 0 0 hsl(260 calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset, 0 -.05em 0 0 hsl(260 calc(var(--active) * 97%) calc(var(--active) * 60%)) inset;transition:box-shadow var(--transition), scale var(--transition), background var(--transition);scale:calc(1 + (var(--active) * .1));border:0;border-radius:100px;align-items:center;gap:.25em;padding:.9em 1.3em;font-size:1.125rem;font-weight:500;display:flex;position:relative}.sparkle-btn:active{scale:1}.sparkle-btn svg{overflow:visible!important}.sparkle-btn .sparkle path{transform-box:fill-box;transform-origin:50%;animation-delay:calc((var(--transition) * 1.5) + (var(--delay) * 1s));transition:fill var(--transition), stroke var(--transition), color var(--transition);animation-duration:.6s}.sparkle-btn-wrapper:hover .sparkle-btn .sparkle path,.sparkle-btn-wrapper:focus-within .sparkle-btn .sparkle path{fill:#fff;stroke:#fff}.sparkle-btn:is(:hover,:focus-visible) path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle-btn .sparkle path:first-of-type{--scale:.5;--delay:.1;--base:40%}.sparkle-btn .sparkle path:nth-of-type(2){--scale:1.5;--delay:.2;--base:20%}.sparkle-btn .sparkle path:nth-of-type(3){--scale:2.5;--delay:.35;--base:30%}.sparkle-btn:before{content:"";z-index:-1;opacity:var(--active,0);transition:opacity var(--transition);border:.25em solid #5604fb80;border-radius:100px;position:absolute;inset:-.25em}.sparkle-btn .spark{animation:flip calc(var(--spark) * 2) infinite steps(2, end);border-radius:100px;position:absolute;inset:0;overflow:hidden;rotate:0deg;-webkit-mask:linear-gradient(#fff,#0000 50%);mask:linear-gradient(#fff,#0000 50%)}@keyframes flip{to{rotate:360deg}}.sparkle-btn .spark:before{content:"";aspect-ratio:1;z-index:-1;width:200%;translate:-50% -15%;rotate:0;opacity:calc((var(--active)) + .8);background:conic-gradient(from 0deg, transparent 0 160deg, #e879f9 220deg, #a855f7 280deg, #ec4899 360deg);transition:opacity var(--transition);animation:rotate var(--spark) linear infinite both;position:absolute;top:0%;left:50%;transform:rotate(-90deg)}.sparkle-btn .spark:after{content:"";inset:var(--cut);border-radius:100px;position:absolute}.sparkle-btn .backdrop{inset:var(--cut);background:var(--bg);transition:background var(--transition);border-radius:100px;position:absolute}@keyframes rotate{to{transform:rotate(90deg)}}.sparkle-btn-wrapper .particle-pen{aspect-ratio:1;z-index:-1;width:200%;opacity:var(--active,0);transition:opacity var(--transition);pointer-events:none;position:absolute;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(#fff,#0000 65%)}.sparkle-btn-wrapper .particle{fill:#fff;width:calc(var(--size,.25) * 1rem);aspect-ratio:1;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);position:absolute}.sparkle-btn-wrapper .particle path{fill:#c084fc;stroke:none}.sparkle-btn-wrapper .particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:360deg}}.sparkle-btn .text{letter-spacing:.01ch;color:#0000;transition:background var(--transition), color var(--transition);background:linear-gradient(90deg,#a855f7,#ec4899);-webkit-background-clip:text;translate:2% -6%}.sparkle-btn-wrapper:hover .sparkle-btn .text,.sparkle-btn-wrapper:focus-within .sparkle-btn .text{color:#0000;background:#fff;-webkit-background-clip:text}.sparkle-btn svg{inline-size:1.25em;translate:-25% -5%}