/* Signal glitch. Crt.js seeds the --mf-crt-tear-* properties and holds a mode
   class for the length of one burst:
     is-bar   - a strip parked at a random height that jumps sideways
     is-sweep - a strip that runs top to bottom once
   Only the strip distorts, so it reads as a torn band, not a shaking frame. */

:root {
	--mf-crt-tear-fill: color-mix(in srgb, var(--mf-color-accent-strong) 5%, transparent);
	--mf-crt-tear-edge-red: rgb(255 40 80 / 0.5);
	--mf-crt-tear-edge-blue: rgb(0 180 255 / 0.45);
}

.mf-crt-tear {
	display: none;
	bottom: auto;
	height: var(--mf-crt-tear-height, 10px);
	background: var(--mf-crt-tear-fill);
	backdrop-filter: brightness(1.5) contrast(1.25) hue-rotate(8deg);

	/* The misconverged-tube tell. */
	box-shadow:
		inset 2px 0 0 var(--mf-crt-tear-edge-red),
		inset -2px 0 0 var(--mf-crt-tear-edge-blue);
}

.mf-crt.is-bar,
.mf-crt.is-sweep {
	/* The grain spikes for the length of the burst. */
	--mf-crt-noise-opacity: var(--mf-crt-noise-opacity-peak);

	.mf-crt-tear {
		display: block;
	}
}

.mf-crt.is-bar .mf-crt-tear {
	top: var(--mf-crt-tear-top, 40%);
	animation: mf-crt-tear-bar var(--mf-crt-tear-duration, 200ms) steps(1) both;
}

.mf-crt.is-sweep .mf-crt-tear {
	top: 0;
	animation: mf-crt-tear-sweep var(--mf-crt-tear-duration, 900ms) linear both;
}

@keyframes mf-crt-tear-bar {
	0% {
		transform: translateX(0);
	}

	30% {
		transform: translateX(var(--mf-crt-tear-throw, -8px));
	}

	55% {
		transform: translateX(calc(var(--mf-crt-tear-throw, -8px) * -0.5));
	}

	80% {
		transform: translateX(var(--mf-crt-tear-throw, -8px));
	}

	100% {
		transform: translateX(0);
	}
}

@keyframes mf-crt-tear-sweep {
	0% {
		transform: translateY(-3vh);
	}

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

@media (prefers-reduced-motion: reduce) {
	.mf-crt-tear {
		backdrop-filter: brightness(1.25);
		box-shadow: none;
	}

	/* Drops the sideways jump only: the strip still shows for its full duration,
	   which Crt.js times rather than the animation. */
	.mf-crt.is-bar .mf-crt-tear {
		animation: none !important;
	}

	/* Smooth enough to keep, and Crt.js already runs it slower. */
	.mf-crt.is-sweep .mf-crt-tear {
		animation-duration: var(--mf-crt-tear-duration, 900ms) !important;
	}
}