@layer theme,base;@layer components{.shiny{--base:#0f1e5c;--inset:#0a1440;--label:#fff;--accent:#ffc21a;--accent-soft:#ffe38a;--animation:sh-angle linear infinite;--duration:3s;--shadow-size:2px;--transition:.8s cubic-bezier(.25, 1, .5, 1);isolation:isolate;cursor:pointer;outline-offset:4px;font:500 16px/1.2 var(--font-sans);letter-spacing:-.01em;white-space:nowrap;color:var(--label);background:linear-gradient(var(--base), var(--base)) padding-box, conic-gradient(from calc(var(--sh-angle) - var(--sh-offset)), transparent, var(--accent) var(--sh-percent), var(--sh-shine) calc(var(--sh-percent) * 2), var(--accent) calc(var(--sh-percent) * 3), transparent calc(var(--sh-percent) * 4)) border-box;box-shadow:inset 0 0 0 1px var(--inset);transition:var(--transition);border:1px solid #0000;border-radius:32px;align-items:center;gap:10px;padding:15px 28px;text-decoration:none;transition-property:--sh-offset,--sh-percent,--sh-shine;display:inline-flex;position:relative;overflow:hidden}.shiny.sm{padding:11px 20px;font-size:14px}.shiny:before,.shiny:after,.shiny>span:before{content:"";pointer-events:none;z-index:-1;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.shiny:active{translate:0 1px}.shiny:before{--size:calc(100% - var(--shadow-size) * 3);--position:2px;--space:calc(var(--position) * 2);width:var(--size);height:var(--size);background:radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;background-size:var(--space) var(--space);-webkit-mask-image:conic-gradient(from calc(var(--sh-angle) + 45deg), black, transparent 10% 90%, black);mask-image:conic-gradient(from calc(var(--sh-angle) + 45deg), black, transparent 10% 90%, black);border-radius:inherit;opacity:.4;background-repeat:space}.shiny:after{--animation:sh-shimmer linear infinite;aspect-ratio:1;background:linear-gradient(-50deg, transparent, var(--accent), transparent);opacity:.6;width:100%;-webkit-mask-image:radial-gradient(circle at bottom,#0000 40%,#000);mask-image:radial-gradient(circle at bottom,#0000 40%,#000)}.shiny>span{z-index:1;align-items:center;gap:10px;display:inline-flex}.shiny>span:before{--size:calc(100% + 1rem);width:var(--size);height:var(--size);box-shadow:inset 0 -1ex 2rem 4px var(--accent);opacity:0;transition:opacity var(--transition);animation:calc(var(--duration) * 1.5) sh-breathe linear infinite}.shiny,.shiny:before,.shiny:after{animation:var(--animation) var(--duration), var(--animation) calc(var(--duration) / .4) reverse paused;animation-composition:add}.shiny:is(:hover,:focus-visible){--sh-percent:20%;--sh-offset:95deg;--sh-shine:var(--accent-soft)}.shiny:is(:hover,:focus-visible),.shiny:is(:hover,:focus-visible):before,.shiny:is(:hover,:focus-visible):after{animation-play-state:running}.shiny:is(:hover,:focus-visible)>span:before{opacity:1}.shiny .arr{transition:transform .5s var(--ease-glide);display:inline-block}.shiny:hover .arr{transform:translate(4px)}@media (prefers-reduced-motion:reduce){.shiny,.shiny:before,.shiny:after,.shiny>span:before{animation:none!important}.shiny{transition:none}}}@layer utilities;@property --sh-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@property --sh-offset{syntax:"<angle>";inherits:false;initial-value:0deg}@property --sh-percent{syntax:"<percentage>";inherits:false;initial-value:5%}@property --sh-shine{syntax:"<color>";inherits:false;initial-value:#fff}@keyframes sh-angle{to{--sh-angle:360deg}}@keyframes sh-shimmer{to{rotate:360deg}}@keyframes sh-breathe{0%,to{scale:1}50%{scale:1.2}}