/**
 * The moving logo row.
 *
 * Only ever applies once the script has measured the track and added
 * .dwe-rolling — so if the script never runs, or the strip turns out to fit
 * on screen, the row stays exactly the swipe strip it was. Nothing here can
 * break the page on its own.
 */

.dwe-logorow.dwe-rolling,
.dwe-agrow.dwe-rolling {
	overflow: hidden;            /* the scrollbar has no job once it moves */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

/*
 * !important, reluctantly and on purpose.
 *
 * The homepage stylesheet declares its own roll on this exact element and
 * then its script switches the row into swipe mode, and the two together
 * left the computed animation at `none` more often than not. Winning that
 * argument outright is the difference between a logo wall that moves and one
 * that silently does not, and there is no third party whose styling this
 * could trample: the selector requires .dwe-rolling, which only this
 * plugin's own script ever adds.
 */
.dwe-rolling > .dwe-logorow__track,
.dwe-rolling > .dwe-agrow__track {
	width: max-content !important;
	animation: dwe-roll var(--dwe-roll-t, 240s) linear infinite !important;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/* Hold still while somebody is reading one. */
.dwe-rolling:hover > .dwe-logorow__track,
.dwe-rolling:hover > .dwe-agrow__track,
.dwe-rolling:focus-within > .dwe-logorow__track,
.dwe-rolling:focus-within > .dwe-agrow__track {
	animation-play-state: paused !important;
}

@keyframes dwe-roll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(var(--dwe-roll-x, -100%), 0, 0); }
}

/* Asked not to move things: do not move things. */
@media (prefers-reduced-motion: reduce) {
	.dwe-rolling > .dwe-logorow__track,
	.dwe-rolling > .dwe-agrow__track {
		animation: none;
	}

	.dwe-logorow.dwe-rolling,
	.dwe-agrow.dwe-rolling {
		overflow-x: auto;
	}
}