@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@property --translate-z {
	syntax: '<length>';
	inherits: false;
	initial-value: -3000px;
}
html, body {
	width: 100svw;
	height: 100svh;
}
section,
section > div {
	position: absolute;
	z-index: 1;
	width: 110%;
	height: 105svh;
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 1000px;
	transform-style: preserve-3d;
	overflow: hidden;
}
.title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	font-family: 'Orbitron', 'Courier New', monospace;
	font-size: clamp(2rem, 8vw, 4rem);
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-shadow:
		0 0 1rem rgba(0, 0, 0, 0.5),
		0 0 2rem rgba(0, 0, 0, 0.3),
		0 0 4rem rgba(0, 0, 0, 0.1);
	letter-spacing: 0.1em;
	pointer-events: none;
}
img {
	position: absolute;
	inset-inline: 10;
	margin: auto;
	width: 20rem;
	object-fit: cover;
	will-change: transform;
	cursor: pointer;
	&:nth-of-type(odd) {
		opacity: 0;
		left: var(--left);
		transform: translateZ(var(--translate-z)) translate( calc(-25rem), calc( (var(--i) - ( var(--count) + 1) / 2) * 8rem ) );
		animation: move var(--duration) linear infinite, opacity var(--duration) linear infinite;
		animation-delay: calc( var(--duration) / var(--count) * (var(--i) - 1) - var(--duration) ),
			calc( var(--duration) / var(--count) * (var(--i) - 1) - var(--duration) );
		&:hover {
			animation-play-state: paused;
		}
	}
	&:nth-of-type(even) {
		opacity: 0;
		right: var(--right);
		transform: translateZ(var(--translate-z)) translate(calc(25rem), calc( (var(--i) - ( var(--count) + 1) / 2) * -8rem ) );
		animation: move var(--duration) linear infinite, opacity var(--duration) linear infinite;
		animation-delay: calc( var(--duration) / var(--count) * (var(--i) - 1) - var(--duration) ),
			calc( var(--duration) / var(--count) * (var(--i) - 1) - var(--duration) );
		&:hover {
			animation-play-state: paused;
		}
	}
}
@keyframes opacity {
	0% {
		opacity: 0;
	}
	20%,80% {
		opacity: 1;
	}
	90%,100% {
		opacity: 0;
	}
}
@keyframes move {
	0% {
		opacity: 0;
		--translate-z: -5000px;
	}
	100% {
		--translate-z: 2000px;
	}
}