/* The misconverged beam. Opt-in per element: too heavy for body text. */

:root {
	--mf-crt-aberration-red: rgb(255 40 80 / 0.35);
	--mf-crt-aberration-blue: rgb(0 120 255 / 0.4);
}

.mf-crt-aberration {
	animation: mf-crt-aberration 3s steps(4) infinite;
}

@keyframes mf-crt-aberration {
	0%,
	100% {
		text-shadow: 0.4px 0 1px var(--mf-crt-aberration-blue), -0.4px 0 1px var(--mf-crt-aberration-red);
	}

	25% {
		text-shadow: 1.6px 0 1px var(--mf-crt-aberration-blue), -1.6px 0 1px var(--mf-crt-aberration-red);
	}

	50% {
		text-shadow: 0.2px 0 1px var(--mf-crt-aberration-blue), -0.2px 0 1px var(--mf-crt-aberration-red);
	}

	75% {
		text-shadow: 1.1px 0 1px var(--mf-crt-aberration-blue), -1.1px 0 1px var(--mf-crt-aberration-red);
	}
}

/* Frozen at its narrowest offset instead of pulsing. */
@media (prefers-reduced-motion: reduce) {
	.mf-crt-aberration {
		animation: none !important;
		text-shadow: 0.4px 0 1px var(--mf-crt-aberration-blue), -0.4px 0 1px var(--mf-crt-aberration-red);
	}
}