.grid-container {
	--grid: clamp(6rem, 7em, 14rem);
	width: 200%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	transform-style: preserve-3d;
	perspective: 100rem;
	perspective-origin: center center;
	animation: rotate 100s linear infinite forwards;
    overflow: hidden;
    pointer-events: none;
    z-index: -17;
	background-size: cover;




	.plane {
		--dir: 1;
		width: 300vw;
		height: 150vh;
		min-height: 60rem;
		position: fixed;
		bottom: 0;
		transform-style: preserve-3d;
		transform-origin: bottom center;
		transform: translateX(-50%) rotateX(85deg);
        overflow: hidden;
        pointer-events: none;
		background-size: cover;



		& > * {
			transform-style: preserve-3d;
			height: 100%;
			width: 100%;
			position: absolute;
			
			&::before, &::after {
				content: '';
				display: block;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}

			&::before {
				background-image: repeating-linear-gradient(to left, var(--primary-color-alpha), var(--primary-color-alpha) 4px, transparent 4px, transparent var(--grid)), repeating-linear-gradient(to bottom, var(--primary-color), var(--primary-color-alpha) 4px, transparent 4px, transparent var(--grid)), linear-gradient(to bottom, var(--nocolor) 50%, var(--nocolor) 100%);
                animation: move 1s linear infinite forwards;
			}

			&::after {
				background-image: linear-gradient(to bottom, var(--nocolor) var(--grid), var(--nocolor));
				z-index: -1;
				transform: translateZ(1px);
				
			}
		}
		
		.glow {
			filter: blur(1.2rem);
			z-index: -11;
			mix-blend-mode: plus-lighter;
		}
	}
}

@keyframes move {
	from {
		transform: translateY(0px);
	}
	
	to {
		transform: translateY(calc(var(--grid) * var(--dir)));
	}
}

@keyframes blink {
	0% {
		visibility: visible;
	}
	
	50% {
		visibility: visible;
	}
	
	51% {
		visibility: hidden;
	}
	
	100% {
		visibility: hidden;
	}
}