.hero-bg-container{z-index:2;transition:transform 3s,perspective 3s;position:absolute;overflow:hidden;transform:perspective(600px)translateY(-5%)rotateX(60deg);-webkit-mask:linear-gradient(360deg,#0000 8%,#000,#0000 80%);mask:linear-gradient(360deg,#0000 8%,#000,#0000 80%)}.hero-bg-lines{--right-color:#c70303;--left-color:#6702c5;background-image:linear-gradient(to right,var(--left-color)45%,transparent 50%,var(--right-color)55%);background-position-y:100%;width:200vw;margin-left:-50%;animation:50s linear infinite move-bg-down;position:absolute;inset:-100% 0;transform:translateZ(-50px)rotateX(25deg);-webkit-mask-image:linear-gradient(90deg,#000 2px,#0000 0),linear-gradient(#000 2px,#0000 0);mask-image:linear-gradient(90deg,#000 2px,#0000 0),linear-gradient(#000 2px,#0000 0);-webkit-mask-size:60px 60px;mask-size:60px 60px;-webkit-mask-repeat:repeat;mask-repeat:repeat}@keyframes move-bg-down{0%{transform:translateY(0)}to{transform:translateY(50%)}}.hero-bg-line{z-index:2;background:linear-gradient(179deg,#fff,#ffffff85);width:100%;height:70vh;position:absolute;top:0;left:0}@media (min-width:1024px){.hero-bg-lines{-webkit-mask-size:80px 80px;mask-size:80px 80px}}.dark .hero-bg-lines{--right-color:#ff0078;--left-color:red}