@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}:root{--global--size:clamp(2rem,4vw,5rem);--anim--hover-time:.4s;--anim--hover-ease:cubic-bezier(.25,1,.5,1)}.button-wrap{z-index:2;pointer-events:none;transition:all var(--anim--hover-time)var(--anim--hover-ease);background:0 0;border-radius:999vw;position:relative}.button-wrap>.glass-button{--border-width:clamp(1px,.0625em,4px);all:unset;cursor:pointer;-webkit-tap-highlight-color:transparent;pointer-events:auto;z-index:3;-webkit-backdrop-filter:blur(max(1px,min(.125em,4px)));-moz-backdrop-filter:blur(clamp(1px,.125em,4px));-ms-backdrop-filter:blur(clamp(1px,.125em,4px));transition:all var(--anim--hover-time)var(--anim--hover-ease);background:linear-gradient(-75deg,rgba(255,255,255,.05),rgba(255,255,255,.1),rgba(255,255,255,.05));border-radius:999vw;padding:0;position:relative;box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.2),0 .25em .125em -.125em rgba(0,0,0,.2),inset 0 0 .1em .25em rgba(255,255,255,.2),0 0 #fff}.glass-button:hover{-webkit-backdrop-filter:blur(.01em);-moz-backdrop-filter:blur(.01em);-ms-backdrop-filter:blur(.01em);transform:scale(.975);box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .15em .05em -.1em rgba(0,0,0,.25),inset 0 0 .05em .1em rgba(255,255,255,.5),0 0 #fff}.glass-button span{-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 .25em .05em rgba(0,0,0,.1);transition:all var(--anim--hover-time)var(--anim--hover-ease);padding-top:.5em;padding-bottom:.5em;padding-left:.75em;padding-right:.75em;font-family:Inter,sans-serif;font-size:.8em;font-weight:500;display:block;position:relative}.glass-button:hover span{text-shadow:.025em .025em .025em rgba(0,0,0,.12)}.glass-button span:after{content:"";z-index:1;width:calc(100% - var(--border-width));height:calc(100% - var(--border-width));top:calc(0% + var(--border-width)/2);left:calc(0% + var(--border-width)/2);box-sizing:border-box;background:linear-gradient(var(--angle-2),rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 40% 50%,rgba(255,255,255,0) 55%);z-index:3;mix-blend-mode:screen;pointer-events:none;transition:background-position calc(var(--anim--hover-time)*1.25)var(--anim--hover-ease),--angle-2 calc(var(--anim--hover-time)*1.25)var(--anim--hover-ease);background-position:0%;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;display:block;position:absolute;overflow:clip}.glass-button:hover span:after{background-position:25%}.glass-button:active span:after{--angle-2:-15deg;background-position:50% 15%}@media (hover:none) and (pointer:coarse){.glass-button span:after,.glass-button:active span:after{--angle-2:-45deg}}.glass-button:after{content:"";z-index:1;width:calc(100% + var(--border-width));height:calc(100% + var(--border-width));top:0;bottom:0;left:0;right:0;top:calc(0% - var(--border-width)/2);left:calc(0% - var(--border-width)/2);padding:var(--border-width);box-sizing:border-box;background:conic-gradient(from var(--angle-1)at 50% 50%,rgba(0,0,0,.5),transparent 5% 40%,rgba(0,0,0,.5) 50%,transparent 60% 95%,rgba(0,0,0,.5)),linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.3));transition:all var(--anim--hover-time)var(--anim--hover-ease),--angle-1 .5s ease;box-shadow:inset 0 0 0 calc(var(--border-width)/2)rgba(255,255,255,.5);border-radius:999vw;position:absolute;-webkit-mask-image:linear-gradient(#000 0,#000 0),linear-gradient(#000 0,#000 0);mask-image:linear-gradient(#000 0,#000 0),linear-gradient(#000 0,#000 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-button:hover:after{--angle-1:-125deg}.glass-button:active:after{--angle-1:-75deg}@media (hover:none) and (pointer:coarse){.glass-button:after,.glass-button:hover:after,.glass-button:active:after{--angle-1:-75deg}}.button-wrap:has(.glass-button:hover) .button-shadow{-webkit-filter:blur(max(2px,min(.0625em,6px)));-moz-filter:blur(clamp(2px,.0625em,6px));-ms-filter:blur(clamp(2px,.0625em,6px));transition:filter var(--anim--hover-time)var(--anim--hover-ease)}.button-wrap:has(.glass-button:hover) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1}.button-wrap:has(.glass-button:active){transform:rotateX(25deg)}.button-wrap:has(.glass-button:active) .glass-button{box-shadow:inset 0 .125em .125em rgba(0,0,0,.05),inset 0 -.125em .125em rgba(255,255,255,.5),0 .125em .125em -.125em rgba(0,0,0,.2),inset 0 0 .1em .25em rgba(255,255,255,.2),0 .225em .05em rgba(0,0,0,.05),0 .25em rgba(255,255,255,.75),inset 0 .25em .05em rgba(0,0,0,.15)}.button-wrap:has(.glass-button:active) .button-shadow{-webkit-filter:blur(max(2px,min(.125em,12px)));-moz-filter:blur(clamp(2px,.125em,12px));-ms-filter:blur(clamp(2px,.125em,12px))}.button-wrap:has(.glass-button:active) .button-shadow:after{top:calc(var(--shadow-cuttoff-fix) - .5em);opacity:.75}.button-wrap:has(.glass-button:active) span{text-shadow:.025em .25em .05em rgba(0,0,0,.12)}