.sparkle-button{--active:0;--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;width:100%;box-shadow:0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) #7b3bfcbf, 0 0em 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;justify-content:center;align-items:center;gap:.25em;padding:1em;font-size:1.2rem;font-weight:500;transition:all .3s;display:flex;position:relative}.sparkle-button:disabled{cursor:not-allowed;opacity:.55}.sparkle-button:active{transition:all .3s;scale:1}.sparkle path{color:hsl(0 0% calc((var(--active,0) * 70%) + var(--base)));transform-box:fill-box;transform-origin:50%;fill:currentColor;stroke:currentColor;animation-delay:calc((var(--transition) * 1.5) + (var(--delay) * 1s));transition:color var(--transition);animation-duration:.6s}.sparkle-button:is(:hover,:focus-visible) path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle path:first-of-type{--scale:.5;--delay:.1;--base:40%}.sparkle path:nth-of-type(2){--scale:1.5;--delay:.2;--base:20%}.sparkle path:nth-of-type(3){--scale:2.5;--delay:.35;--base:30%}.sparkle-button:before{content:"";z-index:-1;opacity:var(--active,0);transition:opacity var(--transition);border:.25em solid #5604fb80;border-radius:100px;position:absolute;inset:-.2em}.spark{animation:flip calc(var(--spark) * 2) infinite steps(2, end);border-radius:100px;position:absolute;inset:0;overflow:hidden;rotate:none;-webkit-mask:linear-gradient(#fff,#0000 50%);mask:linear-gradient(#fff,#0000 50%)}@keyframes flip{to{rotate:360deg}}.spark:before{content:"";aspect-ratio:1;z-index:-1;width:200%;translate:-50% -15%;rotate:0;opacity:calc((var(--active)) + .4);background:conic-gradient(from 0deg, transparent 0 340deg, white 360deg);transition:opacity var(--transition);animation:rotate var(--spark) linear infinite both;position:absolute;top:0%;left:50%;transform:rotate(-90deg)}.spark:after{content:"";inset:var(--cut);border-radius:100px;position:absolute}.backdrop{inset:var(--cut);background:var(--bg);transition:background var(--transition);border-radius:100px;position:absolute}@keyframes rotate{to{transform:rotate(90deg)}}@supports selector(:has(:is(+ *))){.sp:has(.sparkle-button:is(:hover,:focus-visible)){--active:1;--play-state:running}.bodydrop{display:none}}.sparkle-button:is(:hover,:focus-visible)~:is(.bodydrop,.particle-pen),.sparkle-button:is(:hover,:focus-visible){--active:1;--play-state:running}.sp{--transition:.25s;--spark:1.8s;--cut:.1em;display:inline-block;position:relative}.particle-pen{aspect-ratio:1;z-index:-1;width:200%;opacity:var(--active,0);transition:opacity var(--transition);position:absolute;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(#fff,#0000 65%)}.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}.particle path{fill:#e6e6e6;stroke:none}.particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:360deg}}.text{letter-spacing:.01ch;background:linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));color:#0000;transition:background var(--transition);-webkit-background-clip:text;translate:2% -6%}.sparkle-button svg{inline-size:1.25em;translate:-25% -5%}