/* =============================================================================
   Client logo marquee — _partials/marquee.html.

   Used by the home page, /services/, /our-work/ and /about-us/. The mechanism
   is the one all four used to carry separately: each row holds two identical
   copies of the strip, so translating by 50% lands on an identical frame and
   the loop is seamless; the second row runs the other way, offset so its logos
   do not line up with the first row's.

   A page tunes it with these custom properties, set on the page or any
   ancestor of the marquee (they are read with fallbacks, not declared here, so
   an ancestor's value is never shadowed):

     --marquee-duration    one full loop               default 32s — the one
                           speed every strip runs at; do not override it
                           per page (they used to run at 32/56/60s)
     --marquee-offset      delay on the reverse row     default -11s
     --marquee-gap         between two logos            default 50.3px
     --marquee-row-gap     between the two rows         default 40px
     --marquee-logo-scale  factor on every logo's size  default 1

   Logos keep their measured size — each frame places every mark at its natural
   dimensions on a shared centre line, so there is no common height to set.
   --logo-w / --logo-h come from _data/clients.json through the markup, which
   also writes them as width/height attributes so the box is reserved before
   the SVG arrives. Scaling the logos (rather than forcing one height) keeps
   the proportions the frames give them.
   ========================================================================== */

.marquee {
	display: flex;
	flex-direction: column;
	gap: var(--marquee-row-gap, 40px);
	overflow: hidden;
}

.marquee__row {
	display: flex;
	align-items: center;
	gap: var(--marquee-gap, 50.3px);
	width: max-content;
	animation: marquee-left var(--marquee-duration, 32s) linear infinite;
}

.marquee__row--reverse {
	animation-name: marquee-right;
	animation-delay: var(--marquee-offset, -11s);
}

.marquee__row img {
	display: block;
	flex: none;
	width: calc(var(--logo-w) * var(--marquee-logo-scale, 1));
	height: calc(var(--logo-h) * var(--marquee-logo-scale, 1));
}

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

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

/* Stopped, both rows start at the first logo and the second copy simply
   overflows out of view. */
@media (prefers-reduced-motion: reduce) {
	.marquee__row {
		animation: none;
		transform: none;
	}
}