/**
 * Logo marquee.
 *
 * The list is rendered twice and the track slides exactly half its own width,
 * which puts the second copy precisely where the first started — that is what
 * makes the loop seamless and why the duplicate exists.
 *
 * The duration is set by the script from the width of one pass, so the row
 * travels at a speed rather than for a time: adding a logo does not make
 * everything go faster.
 */

.jmgw-marq {
	--jmgw-marq-bg: #ffffff;
	--jmgw-marq-h: 44px;
	--jmgw-marq-gap: 72px;
	--jmgw-marq-fade: 120px;
	--jmgw-marq-dim: 1;

	/* Replaced by the script with one worked out from the real width. Enough
	   on its own that the row still moves sensibly if the script never runs. */
	--jmgw-marq-time: 40s;

	box-sizing: border-box;
	padding: 28px 0;
	background-color: var(--jmgw-marq-bg, #fff);
	overflow: hidden;
}

.jmgw-marq *,
.jmgw-marq *::before,
.jmgw-marq *::after {
	box-sizing: inherit;
}

/*
 * The ends fade with a mask rather than two blocks of background colour laid
 * over them. A block only works when it matches what is behind it, and it stops
 * matching the moment anybody changes the section colour.
 */
.jmgw-marq__window {
	position: relative;
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		#000 var(--jmgw-marq-fade, 120px),
		#000 calc(100% - var(--jmgw-marq-fade, 120px)),
		transparent
	);
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 var(--jmgw-marq-fade, 120px),
		#000 calc(100% - var(--jmgw-marq-fade, 120px)),
		transparent
	);
}

.jmgw-marq__track {
	display: flex;
	width: max-content;
	animation: jmgw-marq-slide var(--jmgw-marq-time, 40s) linear infinite;
	/* Kept on its own layer, so a long row is composited rather than repainted
	   on every frame. */
	will-change: transform;
}

.jmgw-marq--right .jmgw-marq__track {
	animation-direction: reverse;
}

.jmgw-marq--pausable:hover .jmgw-marq__track,
.jmgw-marq--pausable:focus-within .jmgw-marq__track {
	animation-play-state: paused;
}

/*
 * Half, not all of it. The track holds the list twice, so half its width is
 * exactly one pass — and at that point the second copy is sitting where the
 * first one was when it started.
 */
@keyframes jmgw-marq-slide {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.jmgw-marq__set {
	display: flex;
	align-items: center;
	gap: var(--jmgw-marq-gap, 72px);
	/* The gap between the last of one pass and the first of the next, so the
	   join is not visible as a tighter or wider space. */
	margin: 0 var(--jmgw-marq-gap, 72px) 0 0;
	padding: 0;
	list-style: none;
}

.jmgw-marq__item {
	flex: 0 0 auto;
}

.jmgw-marq__link {
	display: block;
	text-decoration: none;
}

/*
 * One height, natural width. A row of logos that are all the same *width* is a
 * row where a wordmark is tiny and a roundel is enormous; matching the height
 * is what makes very different shapes read as one row.
 */
/*
 * Scoped under the section, and that is not tidiness — it is the only reason
 * any of this applies.
 *
 * Elementor's frontend stylesheet carries `.elementor img { height: auto;
 * max-width: 100% }`. One class and one type beats one class, so a bare
 * `.jmgw-marq__logo` loses both declarations: every logo renders at its own
 * intrinsic height whatever the Height slider says, and a wide one is squeezed
 * by a max-width meant for images sitting in a column. Adding the parent takes
 * it to two classes, which wins without this plugin ever naming an
 * `.elementor-` class of its own.
 */
.jmgw-marq .jmgw-marq__logo {
	display: block;
	width: auto;
	height: var(--jmgw-marq-h, 44px);
	max-width: none;
	opacity: var(--jmgw-marq-dim, 1);
	object-fit: contain;
	transition: opacity var(--jmgw-quick, 0.3s) var(--jmgw-ease, ease),
		filter var(--jmgw-quick, 0.3s) var(--jmgw-ease, ease);
}

.jmgw-marq--flat .jmgw-marq__logo {
	filter: grayscale(1);
}

.jmgw-marq--pausable .jmgw-marq__link:hover .jmgw-marq__logo,
.jmgw-marq--pausable .jmgw-marq__link:focus-visible .jmgw-marq__logo {
	filter: none;
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Less movement
 * ---------------------------------------------------------------------- */

/*
 * A row that slides forever is motion nobody asked for and cannot stop, which
 * is the clearest case there is. It becomes a still, wrapped row of the logos
 * — the duplicate pass is dropped, because with nothing moving it is only the
 * same logos listed twice.
 */
@media (prefers-reduced-motion: reduce) {
	.jmgw-marq__track {
		width: 100%;
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}

	.jmgw-marq__set {
		flex-wrap: wrap;
		justify-content: center;
		margin-right: 0;
		row-gap: calc(var(--jmgw-marq-gap, 72px) / 2);
	}

	.jmgw-marq__set[aria-hidden="true"] {
		display: none;
	}

	.jmgw-marq__window {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.jmgw-marq__logo {
		transition: none;
	}
}