.sparkle-button-wrapper{--active:0;--transition:0.6s;--spark:1.8s;--cut:0.1em;position:relative}.sparkle-button{--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);font-size:1.2rem;font-weight:500;border:0;cursor:pointer;padding:1em 1.5em;display:flex;align-items:center;gap:.25em;white-space:nowrap;border-radius:100px;position:relative;box-shadow:0 0 calc(var(--active) * 3em) calc(var(--active) * 1em) hsl(260 97% 61%/.75),0 0 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))}.sparkle-button:active{scale:1;transition:.3s}.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-wrapper.active .sparkle path{animation-name:bounce}@keyframes bounce{35%,65%{scale:var(--scale)}}.sparkle path:first-of-type{--scale:0.5;--delay:0.1;--base:40%}.sparkle path:nth-of-type(2){--scale:1.5;--delay:0.2;--base:20%}.sparkle path:nth-of-type(3){--scale:2.5;--delay:0.35;--base:30%}.sparkle-button:before{content:"";inset:-.2em;z-index:-1;border:.25em solid hsl(260 97% 50%/.5);opacity:var(--active,0);transition:opacity var(--transition)}.spark,.sparkle-button:before{position:absolute;border-radius:100px}.spark{inset:0;rotate:0deg;overflow:hidden;-webkit-mask:linear-gradient(white,transparent 50%);mask:linear-gradient(white,transparent 50%);animation:flip calc(var(--spark) * 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,white 1turn);transition:opacity var(--transition);animation:rotate var(--spark) linear infinite both}.spark:after{content:""}.backdrop,.spark:after{position:absolute;inset:var(--cut);border-radius:100px}.backdrop{background:var(--bg);transition:background var(--transition)}@keyframes rotate{to{transform:rotate(90deg)}}.sparkle-button-wrapper.active{--active:1;--play-state:running}.bodydrop{display: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 var(--transition)}.particle,.particle-pen{position:absolute;aspect-ratio:1;z-index:-1}.particle{fill:white;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%);animation-play-state:var(--play-state,paused)}.particle path{fill:hsl(0 0% 90%);stroke:none}.particle:nth-of-type(2n){animation-direction:reverse}@keyframes float-out{to{rotate:1turn}}.text{translate:2% -6%;letter-spacing:.01ch;background:linear-gradient(90deg,hsl(0 0% calc((var(--active) * 100%) + 65%)),hsl(0 0% calc((var(--active) * 100%) + 26%)));-webkit-background-clip:text;background-clip:text;color:transparent;transition:background var(--transition)}.sparkle-button svg{inline-size:1.25em;translate:-25% -5%}.particle:first-of-type{--x:20;--y:30;--delay:0;--duration:1.2;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(2){--x:80;--y:20;--delay:0.2;--duration:1.5;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(3){--x:40;--y:70;--delay:0.4;--duration:1.8;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(4){--x:60;--y:50;--delay:0.1;--duration:1.3;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(5){--x:30;--y:60;--delay:0.3;--duration:1.6;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(6){--x:70;--y:40;--delay:0.5;--duration:1.4;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(7){--x:25;--y:45;--delay:0.15;--duration:1.7;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(8){--x:75;--y:55;--delay:0.35;--duration:1.1;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(9){--x:50;--y:25;--delay:0.25;--duration:1.9;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(10){--x:35;--y:75;--delay:0.45;--duration:1.2;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(11){--x:65;--y:65;--delay:0.05;--duration:1.5;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(12){--x:45;--y:35;--delay:0.3;--duration:1.6;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(13){--x:55;--y:80;--delay:0.2;--duration:1.3;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(14){--x:15;--y:50;--delay:0.4;--duration:1.8;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(15){--x:85;--y:60;--delay:0.1;--duration:1.4;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(16){--x:50;--y:50;--delay:0.35;--duration:1.7;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(17){--x:30;--y:20;--delay:0.25;--duration:1.2;--origin-x:50%;--origin-y:50%}.particle:nth-of-type(18){--x:70;--y:75;--delay:0.15;--duration:1.6;--origin-x:50%;--origin-y:50%}