@property --angle-1{syntax:"<angle>";inherits:false;initial-value:-75deg}@property --angle-2{syntax:"<angle>";inherits:false;initial-value:-45deg}.fancy-button-container{--global--size:clamp(2rem,4vw,5rem);--anim--hover-time:.4s;--anim--hover-ease:cubic-bezier(.25,1,.5,1);font-size:var(--global--size);justify-content:center;align-items:center;display:inline-flex}.button-wrap{pointer-events:none;transition:all var(--anim--hover-time)var(--anim--hover-ease);z-index:2;background:0 0;border-radius:999vw;position:relative}.button-shadow{--shadow-cuttoff-fix:2em;-webkit-filter:blur(clamp(2px,.125em,12px));-moz-filter:blur(clamp(2px,.125em,12px));-ms-filter:blur(clamp(2px,.125em,12px));height:calc(100% + var(--shadow-cuttoff-fix));left:calc(0% - var(--shadow-cuttoff-fix)/2);pointer-events:none;top:calc(0% - var(--shadow-cuttoff-fix)/2);width:calc(100% + var(--shadow-cuttoff-fix));position:absolute;overflow:visible}.button-shadow:after{box-sizing:border-box;content:"";height:calc(100% - var(--shadow-cuttoff-fix) - .25em);inset:0;left:calc(var(--shadow-cuttoff-fix) - .875em);opacity:1;top:calc(var(--shadow-cuttoff-fix) - .5em);transition:all var(--anim--hover-time)var(--anim--hover-ease);width:calc(100% - var(--shadow-cuttoff-fix) - .25em);z-index:0;background:linear-gradient(#f069,#8b5cf64d);border-radius:999vw;padding:.125em;position:absolute;overflow:visible;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 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}.button-wrap .fancy-button-link{--border-width:clamp(1px,.0625em,4px);all:unset;cursor:pointer;-webkit-tap-highlight-color:#0000;-webkit-backdrop-filter:blur(clamp(1px,.125em,4px));-moz-backdrop-filter:blur(clamp(1px,.125em,4px));-ms-backdrop-filter:blur(clamp(1px,.125em,4px));pointer-events:auto;transition:all var(--anim--hover-time)var(--anim--hover-ease);z-index:3;background:linear-gradient(-75deg,#ffffff0d,#ffffff26,#ffffff0d);border-radius:999vw;justify-content:center;align-items:center;display:flex;position:relative;box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #fff3,0 .25em .125em -.125em #00000080,inset 0 0 .1em .25em #ffffff1a,0 0 #ffffff80}.button-wrap .fancy-button-link: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 #0000000d,inset 0 -.125em .125em #ffffff4d,0 .15em .05em -.1em #0006,inset 0 0 .05em .1em #ffffff4d,0 0 #fff9}.button-wrap .fancy-button-link span.button-content{color:#fffffff2;letter-spacing:-.05em;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 .25em .05em #00000080;transition:all var(--anim--hover-time)var(--anim--hover-ease);justify-content:center;align-items:center;gap:.5em;padding-block:.875em;padding-inline:1.5em;font-family:inherit;font-size:1em;font-weight:700;display:flex;position:relative}.button-wrap .fancy-button-link:hover span.button-content{text-shadow:.025em .025em .025em #0009}.button-wrap .fancy-button-link span.button-content:after{background:linear-gradient(var(--angle-2),#fff0 0,#fff6 40% 50%,#fff0 55%);box-sizing:border-box;content:"";height:calc(100% - var(--border-width));left:calc(var(--border-width)/2);mix-blend-mode:screen;pointer-events:none;top:calc(var(--border-width)/2);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);width:calc(100% - var(--border-width));z-index:1;z-index:3;background-position:0;background-repeat:no-repeat;background-size:200% 200%;border-radius:999vw;display:block;position:absolute;overflow:clip}.button-wrap .fancy-button-link:hover span.button-content:after{background-position:25%}.button-wrap .fancy-button-link:active span.button-content:after{--angle-2:-15deg;background-position:50% 15%}@media (hover:none) and (pointer:coarse){.button-wrap .fancy-button-link span.button-content:after,.button-wrap .fancy-button-link:active span.button-content:after{--angle-2:-45deg}}.button-wrap .fancy-button-link:after{background:conic-gradient(from var(--angle-1)at 50% 50%,#f06c,#8b5cf600 5% 40%,#f06c 50%,#8b5cf600 60% 95%,#f06c),linear-gradient(180deg,#ffffff4d,#ffffff1a);box-shadow:inset 0 0 0 calc(var(--border-width)/2)#ffffff4d;box-sizing:border-box;content:"";height:calc(100% + var(--border-width));inset:0;left:calc(0% - var(--border-width)/2);padding:var(--border-width);top:calc(0% - var(--border-width)/2);transition:all var(--anim--hover-time)var(--anim--hover-ease),--angle-1 .5s ease;width:calc(100% + var(--border-width));z-index:1;border-radius:999vw;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 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}.button-wrap .fancy-button-link:hover:after{--angle-1:-125deg}.button-wrap .fancy-button-link:active:after{--angle-1:-75deg}@media (hover:none) and (pointer:coarse){.button-wrap .fancy-button-link:active:after,.button-wrap .fancy-button-link:after,.button-wrap .fancy-button-link:hover:after{--angle-1:-75deg}}.button-wrap:has(button:hover) .button-shadow{-webkit-filter:blur(clamp(2px,.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(button:hover) .button-shadow:after{opacity:1;top:calc(var(--shadow-cuttoff-fix) - .875em)}.button-wrap:has(button:active){transform:rotateX(25deg)}.button-wrap:has(button:active) button{box-shadow:inset 0 .125em .125em #0000000d,inset 0 -.125em .125em #ffffff80,0 .125em .125em -.125em #00000080,inset 0 0 .1em .25em #fff3,0 .225em .05em #0000001a,0 .25em #fff6,inset 0 .25em .05em #0003}.button-wrap:has(button:active) .button-shadow{-webkit-filter:blur(clamp(2px,.125em,12px));-moz-filter:blur(clamp(2px,.125em,12px));-ms-filter:blur(clamp(2px,.125em,12px))}.button-wrap:has(button:active) .button-shadow:after{opacity:.75;top:calc(var(--shadow-cuttoff-fix) - .5em)}.button-wrap:has(button:active) span.button-content{text-shadow:.025em .25em .05em #0006}.fancy-card{--border-width:1.5px;--anim--hover-time:.4s;--anim--hover-ease:cubic-bezier(.25,1,.5,1);-webkit-backdrop-filter:blur(12px);transition:all var(--anim--hover-time)var(--anim--hover-ease),--angle-1 .6s ease;background:linear-gradient(-75deg,#ffffff0a,#ffffff1f,#ffffff0a);position:relative;overflow:visible;box-shadow:inset 0 2px 2px #0000000d,inset 0 -2px 2px #ffffff14,0 4px 16px #0006,0 0 #ffffff4d}.fancy-card:after{background:conic-gradient(from var(--angle-1)at 50% 50%,#ff0066b3,#8b5cf600 8% 42%,#ff0066b3 50%,#8b5cf600 58% 92%,#ff0066b3),linear-gradient(180deg,#ffffff40,#ffffff14);border-radius:inherit;box-shadow:inset 0 0 0 calc(var(--border-width)/2)#fff3;box-sizing:border-box;content:"";height:calc(100% + var(--border-width)*2);inset:0;left:calc(0% - var(--border-width));padding:var(--border-width);pointer-events:none;top:calc(0% - var(--border-width));transition:--angle-1 .6s ease,opacity var(--anim--hover-time)var(--anim--hover-ease);width:calc(100% + var(--border-width)*2);z-index:0;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 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}.fancy-card:before{background:linear-gradient(var(--angle-2),#fff0 0,#ffffff26 40% 50%,#fff0 55%);border-radius:inherit;content:"";mix-blend-mode:screen;pointer-events:none;transition:background-position calc(var(--anim--hover-time)*1.25)var(--anim--hover-ease);z-index:1;background-position:0;background-size:200% 200%;position:absolute;inset:0}.fancy-card:hover{--angle-1:-125deg;transform:scale(.985)translateY(-2px);box-shadow:inset 0 2px 2px #0000000d,inset 0 -2px 2px #ffffff24,0 8px 32px #00000080,0 0 32px #ff006614}.fancy-card:hover:before{background-position:25%}.fancy-card:active{--angle-1:-75deg;transform:scale(.98)translateY(0)rotateX(15deg)}.fancy-card>*{z-index:2;position:relative}.fancy-card-neutral{--border-width:1.5px;--anim--hover-time:.4s;--anim--hover-ease:cubic-bezier(.25,1,.5,1);-webkit-backdrop-filter:blur(20px);transition:all var(--anim--hover-time)var(--anim--hover-ease),--angle-1 .6s ease;background:linear-gradient(-75deg,#ffffff0a,#ffffff1a,#ffffff0a);position:relative;box-shadow:inset 0 1px 1px #ffffff1a,inset 0 -1px 1px #0000001a,0 4px 24px #0006}.fancy-card-neutral:after{background:conic-gradient(from var(--angle-1)at 50% 50%,#fff9,#ffffff0d 8% 42%,#fff9 50%,#ffffff0d 58% 92%,#fff9),linear-gradient(180deg,#fff3,#ffffff0f);border-radius:inherit;box-sizing:border-box;content:"";height:calc(100% + var(--border-width)*2);inset:0;left:calc(0% - var(--border-width));padding:var(--border-width);pointer-events:none;top:calc(0% - var(--border-width));width:calc(100% + var(--border-width)*2);z-index:0;transition:--angle-1 .6s;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 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}.fancy-card-neutral:before{background:linear-gradient(var(--angle-2),#fff0 0,#ffffff14 40% 50%,#fff0 55%);border-radius:inherit;content:"";mix-blend-mode:screen;pointer-events:none;transition:background-position calc(var(--anim--hover-time)*1.25)var(--anim--hover-ease);z-index:1;background-position:0;background-size:200% 200%;position:absolute;inset:0}.fancy-card-neutral:hover{--angle-1:-125deg;box-shadow:inset 0 1px 1px #ffffff24,inset 0 -1px 1px #0000001a,0 8px 32px #00000080}.fancy-card-neutral:hover:before{background-position:25%}.fancy-card-neutral>*{z-index:2;position:relative}
