/*
 * [textual_logos_marquee] — faixa de logos de clientes em rolagem contínua.
 *
 * Base state is a STATIC row on purpose: with no JavaScript, or under
 * prefers-reduced-motion, the logos must simply be there. js/main.js sets
 * `html.textual-js` only when motion is welcome, and that is what opts the
 * row into scrolling — the same contract css/selo-premiado.css uses.
 *
 * The shift distance and the duration are both set by js/logos-marquee.js,
 * because a constant px/s speed depends on how wide one row actually is.
 */

.textual-logos {
	/*
	 * 114.5px reproduces the ElementsKit carousel this replaced, to the pixel:
	 * its 1280px container fitted 10 logos with 15px gaps, so (1280 - 9 × 15) / 10.
	 * As a fixed box rather than a fraction of the container, narrow screens
	 * simply fit fewer logos instead of blowing one up to full width.
	 */
	--txm-logo: 114.5px;
	--txm-gap: 15px;
	/* Replaced by js/logos-marquee.js with the measured row width. */
	--txm-shift: 0px;
	--txm-duration: 0s;

	/*
	 * Matches the `.grayscale` filter the old widget inherited from a
	 * page-local rule. Owned here so the component does not depend on it.
	 */
	filter: grayscale(1);
}

.textual-logos__viewport {
	overflow: hidden;
}

.textual-logos__track {
	display: flex;
	gap: var(--txm-gap);
	width: max-content;
}

.textual-logos__row {
	display: flex;
	gap: var(--txm-gap);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.textual-logos__item {
	flex: 0 0 var(--txm-logo);
	width: var(--txm-logo);
}

.textual-logos__img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Motion, only where it is welcome. `is-ready` is added by the script once it
 * has measured a row, so the row never animates with a zero shift.
 */
.textual-js .textual-logos.is-ready .textual-logos__track {
	animation: textual-logos-scroll var(--txm-duration) linear infinite;
	will-change: transform;
}

@keyframes textual-logos-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		/* One row plus the gap that follows it: the next frame is identical. */
		transform: translate3d(calc(var(--txm-shift) * -1), 0, 0);
	}
}

/*
 * Belt and braces. `html.textual-js` is already withheld under reduced motion,
 * but this component must never scroll if that contract ever changes.
 */
@media (prefers-reduced-motion: reduce) {
	.textual-logos__track {
		animation: none !important;
		transform: none !important;
	}
}