h1.magnify-text{--font-size:clamp(2rem,4vw + 1rem,6rem);background:radial-gradient(circle at center,hsl(0 0% 100%/.85),transparent) calc(var(--size) * -1px) 50% /calc(var(--size) * 1px) 100% no-repeat,var(--color,rgb(0,34,255));background-clip:text;color:transparent;font-size:var(--font-size);animation:spotlight calc(var(--speed) * 1s) infinite linear;filter:url(#magnify);font-family:var(--font-headline);font-weight:700;letter-spacing:-.05em;line-height:1.1}@keyframes spotlight{50%,to{background-position:calc(100% + (var(--size) * 1px)) 100%}}svg.magnify-svg{position:fixed;bottom:100%;overflow:visible}.hero-animation-container{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;z-index:0;transform-style:preserve-3d;perspective:80vmin}.hero-animation-container section{width:100vmin;aspect-ratio:4/3;transform-origin:100% 50%;transform:rotateY(25deg) translateX(50%);container-type:inline-size;mask:linear-gradient(90deg,#0000 0 40px,#fff,#0000 calc(100% - 40px) 100%)}.hero-animation-container section div{width:40px;aspect-ratio:1;background:red;position:absolute;top:calc(var(--y) * 1%);background:hsl(var(--hue) 90% 60%);animation-name:travel;animation-iteration-count:infinite;animation-delay:calc(var(--d) * -1s);animation-duration:calc(var(--a) * 1s);border-radius:4px}@keyframes travel{0%{transform:translateX(100cqi)}to{transform:translateX(-50%)}}@media (max-width:1024px){.hero-animation-container section{width:150vmin;transform:rotateY(20deg) translateX(25%) translateY(-10%)}}@media (max-width:768px){.hero-animation-container section{opacity:.3;width:200vmin;transform:rotateY(10deg) translateX(10%) translateY(0)}}