/**
 * Logo Marquee — infinite horizontal scrolling logo bar.
 * Per-instance values arrive as CSS custom properties on .logo-marquee.
 */

.logo-marquee {
	--lm-bg: #c1121f;
	--lm-height: 46px;
	--lm-gap: 48px;
	--lm-speed: 34s;
	--lm-pad: 32px;

	background: var(--lm-bg);
	width: 100%;
	overflow: hidden;
	padding: var(--lm-pad) 0;
	position: relative;
}

.logo-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: logo-marquee-scroll var(--lm-speed) linear infinite;
}

.logo-marquee--reverse .logo-marquee__track {
	animation-direction: reverse;
}

.logo-marquee--pausable:hover .logo-marquee__track {
	animation-play-state: paused;
}

/*
 * UX Builder preview: hold the track still so the element is easy to select
 * and position. Background, logo height, spacing and recoloring all still
 * apply, so the preview reads like the real bar minus the motion.
 */
.logo-marquee--static .logo-marquee__track {
	animation: none;
	transform: none;
}

/*
 * Uniform trailing margin on every logo keeps the two passes perfectly
 * periodic, so translateX(-50%) lands exactly one set over — seamless.
 */
.logo-marquee__logo {
	height: var(--lm-height);
	width: auto;
	margin: 0 var(--lm-gap) 0 0;
	flex: 0 0 auto;
	max-width: none;
}

.logo-marquee--white .logo-marquee__logo {
	filter: brightness(0) invert(1);
}

.logo-marquee--black .logo-marquee__logo {
	filter: brightness(0);
}

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

@media (max-width: 849px) {
	.logo-marquee__logo {
		height: calc(var(--lm-height) * 0.7);
		margin-right: calc(var(--lm-gap) * 0.6);
	}

	.logo-marquee {
		padding: calc(var(--lm-pad) * 0.7) 0;
	}
}

/* Static, wrapped, centred layout when motion is not wanted. */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		gap: 24px var(--lm-gap);
	}

	.logo-marquee__logo {
		margin-right: 0;
	}

	/* The duplicate pass is redundant without motion. */
	.logo-marquee__logo[aria-hidden="true"] {
		display: none;
	}
}