/* -------------------------------------------------------------
 * Logo marquee (.logos-home)
 *
 * The block ships its 6 logos duplicated (12 children). The JS
 * wraps every child in a .milo-marquee-track, then we translate
 * that track by -50% on loop, so the second half slides into the
 * exact position of the first half = seamless infinite scroll.
 * ----------------------------------------------------------- */

.logos-home {
	--milo-marquee-duration: 40s;
	--milo-marquee-gap: 4rem;
	--milo-marquee-fade: 8%;
	--milo-marquee-logo-height: 48px;
}

/* High-specificity override: WP's layout class sets display:flex on
 * .logos-home. We swap it to block so the inner track is the only
 * flex container and controls all spacing/animation. */
.logos-home.wp-block-group.is-layout-flex,
.logos-home.wp-block-group {
	display: block;
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--milo-marquee-fade),
		#000 calc(100% - var(--milo-marquee-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--milo-marquee-fade),
		#000 calc(100% - var(--milo-marquee-fade)),
		transparent 100%
	);
}

.logos-home .milo-marquee-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	width: max-content;
	animation: milo-marquee-scroll var(--milo-marquee-duration) linear infinite;
	will-change: transform;
}

/* Spacing lives on the items themselves (padding-right) rather than
 * the flex `gap` so the loop math stays exact. With `gap`, 12 items
 * have only 11 gaps between them, so translateX(-50%) lands half a
 * gap short of the seamless point. With per-item right padding,
 * total width = 12*(W+pad) and -50% lands precisely on item 7. */
.logos-home .milo-marquee-track > * {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 var(--milo-marquee-gap) 0 0;
}

.logos-home .milo-marquee-track figure,
.logos-home .milo-marquee-track .wp-block-image {
	margin: 0;
}

/* Normalize logo size so wildly different source dimensions sit on
 * the same baseline. */
.logos-home .milo-marquee-track img {
	display: block;
	height: var(--milo-marquee-logo-height);
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* Pause on hover so users can read a logo. */
.logos-home:hover .milo-marquee-track {
	animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
	.logos-home .milo-marquee-track {
		animation: none;
		transform: none;
	}
}