.galaxy-button,.galaxy-button *,.galaxy-button :after,.galaxy-button :before{box-sizing:border-box}.galaxy-button{--transition:0.25s;--spark:1.8s;--hue:263;--active:0;--gb-size:0.9375rem;position:relative;display:inline-flex;isolation:isolate}.galaxy-button>a,.galaxy-button>button{--cut:0.1em;--bg:radial-gradient(120% 120% at 126% 126%,hsl(var(--hue) calc(var(--active) * 97%) 98%/calc(var(--active) * 0.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);font-size:var(--gb-size);font-weight:500;font-family:inherit;color:inherit;text-decoration:none;border:0;cursor:pointer;padding:.9em 1.3em;display:flex;align-items:center;gap:.25em;white-space:nowrap;border-radius:2rem;position:relative;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;overflow:hidden}.galaxy-button>a:active,.galaxy-button>button:active{scale:1}.galaxy-button>a:is(:hover,:focus-visible),.galaxy-button>button:is(:hover,:focus-visible){--active:1}.galaxy-button .star{height:calc(var(--size) * 1px);aspect-ratio:1;background:white;border-radius:50%;position:absolute;opacity:var(--alpha);top:50%;left:50%;transform:translate(-50%,-50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px));animation:galaxy-btn-orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear}@keyframes galaxy-btn-orbit{to{transform:translate(-50%,-50%) rotate(10deg) rotate(1turn) translateY(calc(var(--distance) * 1px))}}.galaxy-button .galaxy{position:absolute;width:100%;aspect-ratio:1;top:50%;left:50%;translate:-50% -50%;overflow:hidden;opacity:var(--active);transition:opacity var(--transition)}.galaxy-button .galaxy__ring{height:200%;width:200%;position:absolute;top:50%;left:50%;border-radius:50%;transform:translate(-28%,-40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);transform-style:preserve-3d}.galaxy-button .galaxy__container{position:absolute;inset:0;opacity:var(--active);transition:opacity var(--transition);mask:radial-gradient(white,transparent);-webkit-mask:radial-gradient(white,transparent)}.galaxy-button .star--static{animation:none;top:50%;left:50%;transform:translate(0);max-height:4px;filter:brightness(4);opacity:.9;animation:galaxy-btn-move-x calc(var(--duration) * .1s) calc(var(--delay) * -.1s) infinite linear,galaxy-btn-move-y calc(var(--duration) * .2s) calc(var(--delay) * -.2s) infinite linear}.galaxy-button>a:hover .star--static,.galaxy-button>button:hover .star--static{animation-play-state:paused}@keyframes galaxy-btn-move-x{0%{translate:-100px 0}to{translate:100px 0}}@keyframes galaxy-btn-move-y{0%{transform:translateY(-50px)}to{transform:translateY(50px)}}.galaxy-button .spark{position:absolute;inset:0;border-radius:2rem;rotate:0deg;overflow:hidden;mask:linear-gradient(white,transparent 50%);-webkit-mask:linear-gradient(white,transparent 50%);animation:galaxy-btn-flip calc(var(--spark) * 2) infinite steps(2)}@keyframes galaxy-btn-flip{to{rotate:1turn}}.galaxy-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:galaxy-btn-rotate var(--spark) linear infinite both}.galaxy-button .spark:after{content:"";position:absolute;inset:var(--cut);border-radius:2rem}@keyframes galaxy-btn-rotate{to{transform:rotate(90deg)}}.galaxy-button .backdrop{position:absolute;inset:var(--cut);background:var(--bg);border-radius:2rem;transition:background var(--transition)}.galaxy-button .text{position:relative;z-index:1;translate:2% -6%;letter-spacing:.01ch;color:hsl(0 0% calc(60% + (var(--active) * 26%)));transition:color var(--transition)}