@property --svx-hero-x{syntax:"<length>";inherits:true;initial-value:0}.svx-hero{--r:2rem;--s:2rem;transition:--svx-hero-x .45s ease}.svx-hero:has(.svx-hero-caption:hover){--svx-hero-x:11rem}.svx-hero:has(.svx-hero-caption:focus-visible){--svx-hero-x:11rem}.svx-hero-mask{--_m:/calc(2 * var(--r)) calc(2 * var(--r)) radial-gradient(#000 69%,#0000 72%);--_g:conic-gradient(from 180deg at var(--r) calc(100% - var(--r)),#0000 25%,#000 0);--_d:calc(var(--s) + var(--r));mask:calc(var(--_d) + var(--svx-hero-x)) 100% var(--_m),0 calc(100% - var(--_d)) var(--_m),radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--svx-hero-x)) calc(-1 * var(--r)),var(--_g) calc(var(--_d) + var(--svx-hero-x)) 0,var(--_g) 0 calc(-1 * var(--_d));mask-repeat:no-repeat;-webkit-mask:calc(var(--_d) + var(--svx-hero-x)) 100% var(--_m),0 calc(100% - var(--_d)) var(--_m),radial-gradient(var(--s) at 0 100%,#0000 99%,#000 calc(100% + 1px)) calc(var(--r) + var(--svx-hero-x)) calc(-1 * var(--r)),var(--_g) calc(var(--_d) + var(--svx-hero-x)) 0,var(--_g) 0 calc(-1 * var(--_d));-webkit-mask-repeat:no-repeat}.svx-hero-bg{background:radial-gradient(ellipse 90% 60% at 80% 10%,rgba(30,255,138,.22),transparent 70%),radial-gradient(ellipse 110% 70% at 0 100%,rgba(30,255,138,.1),transparent 60%),linear-gradient(180deg,#0a1311,#050807 90%)}.svx-hero-grid{background-image:linear-gradient(hsla(0,0%,100%,.04) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.04) 1px,transparent 0);background-size:64px 64px;mask-image:radial-gradient(ellipse 85% 80% at 60% 40%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 85% 80% at 60% 40%,#000 30%,transparent 100%);opacity:.7}.svx-hero-gradient{background:linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 45%,rgba(0,0,0,.05) 70%,transparent)}.svx-hero-caption{height:calc(2 * var(--s));width:calc(2 * var(--s) + var(--svx-hero-x));clip-path:inset(4px round calc(2 * var(--s)));transition:color .2s;position:relative;background-color:#1eff8a}.svx-hero-caption__logo{left:var(--s);transform:translate(-50%,-50%)}.svx-hero-caption__logo,.svx-hero-caption__text{position:absolute;top:50%;transition:opacity .3s}.svx-hero-caption__text{left:calc(2 * var(--s));transform:translateY(-50%);opacity:0;white-space:nowrap}.svx-hero:has(.svx-hero-caption:focus-visible) .svx-hero-caption__text,.svx-hero:has(.svx-hero-caption:hover) .svx-hero-caption__text{opacity:1}@media (hover:none),(max-width:640px){.svx-hero{--svx-hero-x:9rem}.svx-hero-caption__text{opacity:1}}