/* The bright band that sweeps down the tube, off-screen for most of its cycle. */

:root {
	--mf-crt-scanbar-height: 140px;
	--mf-crt-scanbar-opacity: 0.04;
	--mf-crt-scanbar-speed: 9s;
	--mf-crt-scanbar-speed-calm: 16s;
}

.mf-crt-scanbar {
	bottom: auto;
	height: var(--mf-crt-scanbar-height);
	opacity: var(--mf-crt-scanbar-opacity);
	background: linear-gradient(
		0deg,
		transparent 0%,
		color-mix(in srgb, var(--mf-color-accent) 12%, transparent) 70%,
		color-mix(in srgb, var(--mf-color-accent-strong) 20%, transparent) 100%
	);
	animation: mf-crt-scanbar var(--mf-crt-scanbar-speed) linear infinite;
}

@keyframes mf-crt-scanbar {
	0%,
	78% {
		transform: translateY(calc(var(--mf-crt-scanbar-height) * -1));
	}

	100% {
		transform: translateY(100vh);
	}
}

/* Slower, not stopped — see css/core/README.md. */
@media (prefers-reduced-motion: reduce) {
	.mf-crt-scanbar {
		animation-duration: var(--mf-crt-scanbar-speed-calm) !important;
		animation-iteration-count: infinite !important;
	}
}