/*
 * Marquee rows. The mask fades both edges so the loop has no visible seam,
 * and the two rows run at different speeds in opposite directions so they
 * never line up into a single moving block.
 *
 * The translation is -50% because each row renders its list twice: half a
 * track width lands the copy exactly where the original started.
 */
.nomon-client-wall__marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.nomon-client-wall__row--a {
	animation: nomon-marquee 60s linear infinite;
}

.nomon-client-wall__row--b {
	animation: nomon-marquee 70s linear infinite reverse;
}

@keyframes nomon-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.nomon-client-wall__row--a,
	.nomon-client-wall__row--b {
		animation: none;
	}

	/* Stopped mid-track the rows would sit at an arbitrary offset, so they
	   fall back to a plain wrapping list. */
	.nomon-client-wall__marquee {
		mask-image: none;
	}

	.nomon-client-wall__row {
		width: auto;
		flex-wrap: wrap;
	}

	.nomon-client-wall__row [aria-hidden="true"] {
		display: none;
	}
}