/* ═══════════════════════════════════════════════════════════════
   Logo marquee — eyebrow plus scrolling row.

   One animated element holding two identical lists. Animating two
   sibling tracks independently produces a long seam and a jump: the
   shift has to be exactly "one list + one gap", which as a percentage
   of the whole track is 50% plus half a gap.
   ═══════════════════════════════════════════════════════════════ */
.logo-marquee {
	--gd-logo-gap: clamp(40px, 30.67px + 2.3916vw, 72px);
	--gd-logo-h: clamp(48px, 41.01px + 1.7937vw, 72px);
	--gd-logo-w: clamp(110px, 92.53px + 4.4843vw, 170px);
}

.logo-marquee__title {
	margin: 0;
	padding: 0;
}

.logo-marquee__viewport {
	margin-top: 10px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	width: 100%;
}

.logo-marquee__track {
	animation: gd-marquee 60s linear infinite;
	display: flex;
	gap: var(--gd-logo-gap);
	width: max-content;
	will-change: transform;
}

.logo-marquee__list {
	display: flex;
	flex: 0 0 auto;
	gap: var(--gd-logo-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The design sizes each mark by eye (171x43 … 234x44 … 129x111).
   With 17 logos rather than the 7 drawn, they are normalised instead:
   capped on both axes so wide and square marks carry equal weight. */
.logo-marquee__item {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	height: var(--gd-logo-h);
	justify-content: center;
	padding: 0;
}

.logo-marquee__item img {
	/* height, not max-height: an unloaded <img> has no intrinsic size, and
	   aspect-ratio from the width/height attributes can only derive a width if
	   one axis is definite. Logos whose original is under 300px wide get no
	   medium size, so no srcset/sizes either — without this they measured 0x0
	   until load and left holes in the loop. Layout-identical once loaded. */
	height: 100%;
	max-width: var(--gd-logo-w);
	object-fit: contain;
	width: auto;
}

@keyframes gd-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-50% - var(--gd-logo-gap) / 2));
	}
}

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

@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation: none;
	}

	.logo-marquee__viewport {
		overflow-x: auto;
	}
}