<ul class="menu">
	<li class="menu__item">
		<a href="#" class="menu__link menu__link--primary" aria-label="Chickpeas and cilantro">
			<span aria-hidden="true">Chickpeas, cilantro, tahini</span>
			<span>Chickpeas, cilantro, tahini</span>
			<figure class="menu__background">
				<video loop autoplay muted>
					<source src="https://assets.codepen.io/1366040/confetti2.mp4" type="video/mp4" />
				</video>
			</figure>
		</a>
	</li>
	<li class="menu__item">
		<a href="#" class="menu__link menu__link--secondary" aria-label="Lentils and peppers">
			<span aria-hidden="true">Lentils, tomatoes, and peppers</span>
			<span>Lentils, tomatoes, and peppers</span>
			<figure class="menu__background">
				<video loop autoplay muted>
					<source src="https://assets.codepen.io/1366040/bridge.mp4" type="video/mp4" />
				</video>
			</figure>
		</a>
	</li>
	<li class="menu__item">
		<a href="#" class="menu__link menu__link--tertiary" aria-label="Black beans and tomatoes">
			<span aria-hidden="true">Roasted black bean salsa</span>
			<span>Roasted black bean salsa</span>
			<figure class="menu__background">
				<video loop autoplay muted>
					<source src="https://assets.codepen.io/1366040/run.mp4" type="video/mp4" />
				</video>
			</figure>
		</a>
	</li>
</ul>

html, body {
	height: 100%;
}

body {
	display: grid;
	place-items: center;
	font: 400 100%/1 'Staatliches', sans-serif;
	background-color: #2F3439;
}

.menu {
	&__item {
		& + & {
			// border-top: 1rem solid #363e55;
		}

		&:nth-child(even) span {
			animation-direction: reverse;
		}
	}

	&__link {
		color: #F6D0B1;
		text-decoration: none;
		text-transform: uppercase;
		display: flex;
		white-space: nowrap;
		gap: .15em;
		font-size: 13.5vmax;
		padding: .65em 0;
		line-height: 1;
		position: relative;

		&--primary {
			background: #5B2E48;
		}

		&--secondary {
			background: #585563;
		}

		&--tertiary {
			background: #749C75;
		}

		span {
			display: block;
			animation: marquee 25s linear normal infinite;
			animation-play-state: running;
			position: relative;
			z-index: 1;
		}

		&:hover {
			span {
				animation-play-state: paused;
			}

			.menu__background {
				opacity: .75;
			}
		}
	}

	&__background {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transition: opacity .3s;
		mix-blend-mode: screen;
		filter: saturate(0.5);

		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}


@keyframes marquee {
	to {
		transform: translateX(-100%);
	}
}