.sparkle-button{--button-hue:189;--button-main-saturation:94%;--button-main-lightness:43%;--button-darker-saturation:90%;--button-darker-lightness:20%;--button-highlight-lightness:95%;--button-shadow-glow-color:hsla(189,100%,50%,0.4);--active:0;--bg:radial-gradient(40% 50% at center 100%,hsl(var(--button-hue) calc(var(--button-main-saturation) * 1.2) 85%/var(--active)),transparent),radial-gradient(80% 100% at center 120%,hsl(var(--button-hue) calc(var(--button-main-saturation) * 1.2) 90%/var(--active)),transparent),hsl(var(--button-hue) var(--button-main-saturation) var(--button-main-lightness));background:var(--bg);font-size:1rem;font-weight:500;border:0;cursor:pointer;padding:.8em 1.5em;display:flex;align-items:center;gap:.5em;white-space:nowrap;border-radius:100px;position:relative;-webkit-tap-highlight-color:transparent;outline:none!important;box-shadow:0 3px 6px 0 hsla(var(--button-hue),var(--button-main-saturation),calc(var(--button-darker-lightness) + 20%),calc((1 - var(--active)) * .25)),0 1px 2px 0 hsla(var(--button-hue),var(--button-main-saturation),calc(var(--button-darker-lightness) + 20%),calc((1 - var(--active)) * .2)),0 0 calc(var(--active) * 2em) calc(var(--active) * .5em) var(--button-shadow-glow-color),0 0 0 0 hsl(var(--button-hue) calc(var(--active) * var(--button-darker-saturation)) calc(var(--button-darker-lightness) + 5%)/calc(var(--active) * .8)) inset,0 -.05em 0 0 hsl(var(--button-hue) calc(var(--active) * var(--button-darker-saturation)) var(--button-darker-lightness)/calc(var(--active) * .7)) inset;transition:box-shadow .3s,scale .3s,background .3s;scale:calc(1 + (var(--active) * .05))}.sparkle-button:active{scale:.98;transition:scale .2s}.sparkle path{color:hsl(var(--button-hue) var(--button-main-saturation) var(--button-main-lightness));transform-box:fill-box;transform-origin:center;fill:currentColor;stroke:currentColor;animation-delay:calc(.3s * 1.5 + var(--delay) * 1s);animation-duration:.6s;transition:color .3s ease-in-out}.sparkle-button:is(:hover,:focus-visible) .sparkle path{color:hsl(0,0%,100%);animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle path:first-of-type{--scale:0.5;--delay:0.1}.sparkle path:nth-of-type(2){--scale:1.5;--delay:0.2}.sparkle path:nth-of-type(3){--scale:2.5;--delay:0.35}.sparkle-button:before{content:"";inset:-.2em;z-index:-1;border:.25em solid hsl(var(--button-hue) var(--button-main-saturation) calc(var(--button-main-lightness) + 5%)/.5);opacity:var(--active,0);transition:opacity .3s}.spark,.sparkle-button:before{position:absolute;border-radius:100px;pointer-events:none}.spark{inset:0;rotate:0deg;overflow:hidden;mask:linear-gradient(white,transparent 50%);-webkit-mask:linear-gradient(white,transparent 50%);animation:flip calc(var(--spark, 1s) * 2) infinite steps(2)}@keyframes flip{to{rotate:1turn}}.spark:before{content:"";position:absolute;width:200%;aspect-ratio:1;top:0;left:50%;z-index:-1;translate:-50% -15%;rotate:0;transform:rotate(-90deg);opacity:calc((var(--active)) + .4);background:conic-gradient(from 0deg,transparent 0 340deg,hsl(var(--button-hue) 50% var(--button-highlight-lightness)) 1turn);transition:opacity .3s;animation:rotate var(--spark,1s) linear infinite both}.spark:after{content:""}.backdrop,.spark:after{position:absolute;inset:var(--cut,.1em);border-radius:100px}.backdrop{background:var(--bg);transition:background .3s;pointer-events:none}@keyframes rotate{to{transform:rotate(90deg)}}.sparkle-button:is(:hover,:focus-visible){--active:1}.sp{position:relative}.text{translate:2% -6%;letter-spacing:.01ch;color:hsl(0,0%,calc((1 - var(--active)) * 0% + var(--active) * 100%));transition:color .3s}.sparkle-button svg{inline-size:1em;translate:-25% -5%;pointer-events:none}.particle-pen{width:200%;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white,transparent 65%);mask:radial-gradient(white,transparent 65%);opacity:var(--active,0);transition:opacity .3s}.particle,.particle-pen{position:absolute;aspect-ratio:1;z-index:-1}.particle{width:calc(var(--size, .25) * 1rem);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%)}.particle path{fill:hsl(var(--button-hue) 30% calc(90% - var(--active) * 10%));stroke:none}.particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:1turn}}