.sparkle-button{--primary-hue:260;--primary-sat:97%;--primary-light:61%;--bg-base:12%;--text-light:86%;--text-dark:60%;--particle-color:#e6e6e6;--shadow-color:#7b3bfcbf;--border-color:#5604fb80;--body-bg:hsl(260 calc(var(--active) * 97%) 6%)}.sparkle-button button{--cut:.1em;--active:0;--bg:radial-gradient(40% 50% at center 100%, hsl(var(--primary-hue) calc(var(--active) * var(--primary-sat)) 72% / var(--active)), transparent), radial-gradient(80% 100% at center 120%, hsl(var(--primary-hue) calc(var(--active) * var(--primary-sat)) 70% / var(--active)), transparent), hsl(var(--primary-hue) calc(var(--active) * var(--primary-sat)) calc((var(--active) * 44%) + var(--bg-base)));background:var(--bg);transition:box-shadow var(--transition), scale var(--transition), background var(--transition)}.sparkle-button button svg{inline-size:1.25em;translate:-25% -5%;overflow:visible!important}.sparkle-button .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 button:is(:hover,:focus-visible) path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle-button .sparkle path:first-of-type{--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:"";z-index:-1;border:.25em solid var(--border-color);opacity:var(--active,0);transition:opacity var(--transition);border-radius:100px;position:absolute;inset:-.25em}.sparkle-button .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}}.sparkle-button .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)}.sparkle-button .spark:after{content:"";inset:var(--cut);border-radius:100px;position:absolute}.sparkle-button .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(+ *)){.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)~:is(.bodydrop,.particle-pen){--active:1;--play-state:running}.sparkle-button .bodydrop{background:var(--body-bg);z-index:-1;position:fixed;inset:0}.sparkle-button button:is(:hover,:focus-visible){--active:1;--play-state:running}.sparkle-button .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%)}.sparkle-button .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-button .particle path{fill:var(--particle-color);stroke:none}.sparkle-button .particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:360deg}}.sparkle-button .text{letter-spacing:.01ch;background:linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + var(--text-light))), hsl(0 0% calc((var(--active) * 100%) + var(--text-dark))));color:#0000;transition:background var(--transition);-webkit-background-clip:text;translate:2% -6%}