.sparkle-button{position:relative}.sparkle-button a{--cut:0.1em;--active:0;position:relative;box-shadow:0 0 calc(var(--active) * 6em) calc(var(--active) * 3em) rgba(0,120,212,.75),0 .05em 0 0 rgba(0,120,212,calc((var(--active) * 50%) + 30%)) inset,0 -.05em 0 0 rgba(0,120,212,calc(var(--active) * 60%)) inset;transition:box-shadow var(--transition),scale var(--transition),background var(--transition);scale:calc(1 + (var(--active) * .1));transition:.25s;--transition:0.25s;--spark:1.8s}.sparkle-button a:active{scale:1}.sparkle-button svg{overflow:visible!important}.sparkle-button .sparkle path{color:hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));transform-box:fill-box;transform-origin:center;fill:currentColor;stroke:currentColor;animation-delay:calc((var(--transition) * 1.5) + (var(--delay) * 1s));animation-duration:.6s;transition:color var(--transition)}.sparkle-button a:is(:hover,:focus-visible) path{animation-name:bounce;@keyframes bounce{35%,65%{scale:var(--scale)}}}.sparkle-button .sparkle path:first-of-type{--scale:0.5;--delay:0.1;--base:40%}.sparkle-button .sparkle path:nth-of-type(2){--scale:1.5;--delay:0.2;--base:20%}.sparkle-button .sparkle path:nth-of-type(3){--scale:2.5;--delay:0.35;--base:30%}.sparkle-button a:before{content:"";position:absolute;inset:-.2em;z-index:-1;border:.35em solid rgba(0,120,212,.7);border-radius:var(--radius);opacity:var(--active,0);transition:opacity var(--transition)}@keyframes flip{to{rotate:1turn}}.sparkle-button .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,white 1turn);transition:opacity var(--transition);animation:rotate var(--spark) linear infinite both}.sparkle-button .spark:after{content:"";position:absolute;inset:var(--cut);border-radius:100px}@keyframes rotate{to{transform:rotate(90deg)}}.sparkle-button a:is(:hover,:focus-visible)~:is(.bodydrop,.particle-pen){--active:1;--play-state:running}.sparkle-button .bodydrop{background:rgba(0,120,212,.1);position:fixed;inset:0;z-index:-1}.sparkle-button a:is(:hover,:focus-visible){--active:1;--play-state:running}.sparkle-button .particle-pen{position:absolute;width:500%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white,transparent 75%);z-index:-1;opacity:var(--active,0);transition:opacity var(--transition)}.sparkle-button .particle{fill:white;width:calc(var(--size, .25) * 1.5rem);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:#0078d4;stroke:none}.sparkle-button .particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:1turn}}.sparkle-button a svg{inline-size:1.25em;translate:-25% -5%}