:root{--sparkle-transition: .25s;--sparkle-spark: 1.8s;--sparkle-hue: 120;--sparkle-color: #05ff00;--sparkle-color-dark: #04dd00;--sparkle-color-glow: rgba(5, 255, 0, .75)}.sparkle-button{position:relative;display:inline-block}.sparkle-button button,.sparkle-button a,.sparkle-button .sparkle-btn{--cut: .1em;--active: 0;--bg: radial-gradient( 40% 50% at center 100%, hsl(var(--sparkle-hue) calc(var(--active) * 97%) 55% / var(--active)), transparent ), radial-gradient( 80% 100% at center 120%, hsl(var(--sparkle-hue) calc(var(--active) * 97%) 50% / var(--active)), transparent ), #1e1e1e;background:var(--bg);font-family:Open Sans,system-ui,sans-serif;font-size:1.8rem;font-weight:600;border:0;cursor:pointer;padding:.9em 1.5em;display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;border-radius:100px;position:relative;color:#05ff00;text-decoration:none;box-shadow:0 0 calc(var(--active) * 4em) calc(var(--active) * 2em) var(--sparkle-color-glow),0 .05em hsl(var(--sparkle-hue) calc(var(--active) * 97%) calc((var(--active) * 40%) + 40%)) inset,0 -.05em hsl(var(--sparkle-hue) calc(var(--active) * 97%) calc(var(--active) * 50%)) inset;transition:box-shadow var(--sparkle-transition),scale var(--sparkle-transition),background var(--sparkle-transition);scale:calc(1 + (var(--active) * .08));overflow:visible}.sparkle-button button:active,.sparkle-button a:active,.sparkle-button .sparkle-btn:active{scale:1}.sparkle-button button:is(:hover,:focus-visible),.sparkle-button a:is(:hover,:focus-visible),.sparkle-button .sparkle-btn:is(:hover,:focus-visible){--active: 1;--play-state: running}.sparkle-button button:before,.sparkle-button a:before,.sparkle-button .sparkle-btn:before{content:"";position:absolute;top:-.2em;right:-.2em;bottom:-.2em;left:-.2em;z-index:-1;border:.2em solid rgba(5,255,0,.5);border-radius:100px;opacity:var(--active, 0);transition:opacity var(--sparkle-transition)}.sparkle-button .spark{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:100px;rotate:0deg;overflow:hidden;mask:linear-gradient(white,transparent 70%);animation:sparkle-flip calc(var(--sparkle-spark) * 2) infinite steps(2,end);pointer-events:none}@keyframes sparkle-flip{to{rotate:360deg}}.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)) + .8);background:conic-gradient(from 0deg,transparent 0 210deg,#05ff00 360deg);transition:opacity var(--sparkle-transition),background var(--sparkle-transition);animation:sparkle-rotate var(--sparkle-spark) linear infinite both}.sparkle-button:has(button:is(:hover,:focus-visible)) .spark:before,.sparkle-button:has(a:is(:hover,:focus-visible)) .spark:before{background:conic-gradient(from 0deg,transparent 0 210deg,#ffffff 360deg)}.sparkle-button .spark:after{content:"";position:absolute;inset:var(--cut);border-radius:100px;background:#1e1e1e;transition:background var(--sparkle-transition)}.sparkle-button:has(button:is(:hover,:focus-visible)) .spark:after,.sparkle-button:has(a:is(:hover,:focus-visible)) .spark:after{background:#05ff00}@keyframes sparkle-rotate{to{transform:rotate(90deg)}}.sparkle-button .backdrop{position:absolute;inset:var(--cut);background:#1e1e1e;border-radius:100px;transition:background var(--sparkle-transition);pointer-events:none}.sparkle-button:has(button:is(:hover,:focus-visible)) .backdrop,.sparkle-button:has(a:is(:hover,:focus-visible)) .backdrop{background:#05ff00}.sparkle-button .sparkle{overflow:visible!important;width:1.25em;height:1.25em;display:none}.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(--sparkle-transition) * 1.5) + (var(--delay) * 1s));animation-duration:.6s;transition:color var(--sparkle-transition)}.sparkle-button button:is(:hover,:focus-visible) .sparkle path,.sparkle-button a:is(:hover,:focus-visible) .sparkle path{animation-name:sparkle-bounce}@keyframes sparkle-bounce{35%,65%{scale:var(--scale)}}.sparkle-button .sparkle path:nth-of-type(1){--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 .text{letter-spacing:.01ch;color:#05ff00;transition:color var(--sparkle-transition);position:relative;z-index:1}.sparkle-button button:is(:hover,:focus-visible) .text,.sparkle-button a:is(:hover,:focus-visible) .text{color:#000}.sparkle-button .particle-pen{position:absolute;width:200%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;-webkit-mask:radial-gradient(white,transparent 65%);mask:radial-gradient(white,transparent 65%);z-index:-1;opacity:var(--active, 0);transition:opacity var(--sparkle-transition);pointer-events:none}.sparkle-button .particle{fill:#05ff00;width:calc(var(--size, .25) * 1rem);aspect-ratio:1;position:absolute;top:calc(var(--y) * 1%);left:calc(var(--x) * 1%);opacity:var(--alpha, 1);animation:sparkle-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:#05ff00;stroke:none;transition:fill var(--sparkle-transition)}.sparkle-button:has(button:is(:hover,:focus-visible)) .particle path,.sparkle-button:has(a:is(:hover,:focus-visible)) .particle path{fill:#fff}.sparkle-button .particle:nth-of-type(2n){animation-direction:reverse}@keyframes sparkle-float-out{to{rotate:360deg}}.sparkle-button:has(button:is(:hover,:focus-visible)) .particle-pen,.sparkle-button:has(a:is(:hover,:focus-visible)) .particle-pen{--active: 1;--play-state: running}.sparkle-button .button-arrow-icon{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.sparkle-button .button-arrow-icon img{width:20px;height:auto;filter:brightness(0) saturate(100%) invert(68%) sepia(74%) saturate(2656%) hue-rotate(79deg) brightness(117%) contrast(102%)}.sparkle-button button svg:not(.sparkle):not(.particle),.sparkle-button a svg:not(.sparkle):not(.particle){width:20px;height:15px;position:relative;z-index:1}@media screen and (max-width: 749px){.sparkle-button button,.sparkle-button a,.sparkle-button .sparkle-btn{font-size:1.6rem;padding:.8em 1.2em}.sparkle-button .particle-pen{display:none}}.sparkle-button button:disabled,.sparkle-button a.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sparkle-button button:disabled:hover,.sparkle-button a.disabled:hover{--active: 0;scale:1}
/*# sourceMappingURL=/cdn/shop/t/33/assets/sparkle-button.css.map */