:root{--transition:.25s;--spark:1.8s;--hue:245}.galaxy-button button{--cut:.1em;--active:0;--bg:radial-gradient(120% 120% at 126% 126%,hsl(var(--hue)calc(var(--active)*97%)98%/calc(var(--active)*.9))40%,transparent 50%)calc(100px - (var(--active)*100px))0/100% 100% no-repeat,radial-gradient(120% 120% at 120% 120%,hsl(var(--hue)calc(var(--active)*97%)70%/calc(var(--active)*1))30%,transparent 70%)calc(100px - (var(--active)*100px))0/100% 100% no-repeat,hsl(var(--hue)calc(var(--active)*100%)calc(12% - (var(--active)*8%)));background:var(--bg);white-space:nowrap;box-shadow:0 0 calc(var(--active)*6em)calc(var(--active)*3em)hsl(var(--hue)97% 61%/.5),0 .05em 0 0 hsl(var(--hue)calc(var(--active)*97%)calc((var(--active)*50%) + 30%))inset,0 -.05em 0 0 hsl(var(--hue)calc(var(--active)*97%)calc(var(--active)*10%))inset;transition:box-shadow var(--transition),scale var(--transition),background var(--transition);scale:calc(1 + (var(--active)*.1));transform-style:preserve-3d;perspective:100vmin;border:0;border-radius:1rem;align-items:center;gap:.25em;padding:.9em 5em;font-size:14px;font-weight:500;display:flex;position:relative;overflow:hidden}.galaxy-button button:active{scale:1}.galaxy-button .star{height:calc(var(--size)*1px);aspect-ratio:1;opacity:var(--alpha);transform:translate(-50%,-50%)rotate(10deg)rotate(0deg)translateY(calc(var(--distance)*1px));animation:orbit calc(var(--duration)*1s)calc(var(--delay)*-1s)infinite linear;background:#fff;border-radius:50%;position:absolute;top:50%;left:50%}@keyframes orbit{to{transform:translate(-50%,-50%)rotate(10deg)rotate(360deg)translateY(calc(var(--distance)*1px))}}.galaxy-button .galaxy{aspect-ratio:1;width:100%;opacity:var(--active);transition:opacity var(--transition);position:absolute;top:50%;left:50%;overflow:hidden;translate:-50% -50%}.galaxy-button .galaxy__ring{width:200%;height:200%;transform-style:preserve-3d;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-28%,-40%)rotateX(-24deg)rotateY(-30deg)rotateX(90deg)}.galaxy-button .galaxy__container{opacity:var(--active);transition:opacity var(--transition);position:absolute;inset:0;-webkit-mask:radial-gradient(#fff,#0000);mask:radial-gradient(#fff,#0000)}.galaxy-button .star--static{filter:brightness(4);opacity:.9;max-height:4px;animation:none;animation:move-x calc(var(--duration)*.1s)calc(var(--delay)*-.1s)infinite linear,move-y calc(var(--duration)*.2s)calc(var(--delay)*-.2s)infinite linear;top:50%;left:50%;transform:translate(0)}.galaxy-button button:hover .galaxy-button .star--static{animation-play-state:paused}@keyframes move-x{0%{translate:-100px}to{translate:100px}}@keyframes move-y{0%{transform:translateY(-50px)}to{transform:translateY(50px)}}.galaxy-button .spark{animation:flip calc(var(--spark)*2)infinite steps(2,end);border-radius:2rem;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}}.galaxy-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)}.galaxy-button .spark:after{content:"";inset:var(--cut);border-radius:2rem;position:absolute}.galaxy-button .backdrop{inset:var(--cut);background:var(--bg);transition:background var(--transition);border-radius:2rem;position:absolute}@keyframes rotate{to{transform:rotate(90deg)}}@supports selector(:has(:is(+ *))){.galaxy-button body:has(button:is(:hover,:focus-visible)){--active:1;--play-state:running}}.galaxy-button button:is(:hover,:focus-visible){--active:1;--play-state:running}.galaxy-button{position:relative}@keyframes float-out{to{rotate:360deg}}.galaxy-button .text{letter-spacing:.01ch;color:#fff;translate:2% -6%}.galaxy-button button svg{inline-size:1.25em;translate:-25% -5%}