/**
 * PARTNERS
 *
 * A logo strip. Measured from the design: gaps are exactly 88px between every
 * logo, and the row runs from x=-94 to x=1501 in a 1440 frame — it bleeds past
 * both edges, which is what a marquee looks like caught mid-scroll.
 *
 * The animation is pure CSS. The track holds the logo list twice and shifts by
 * exactly -50%, so the second copy lands where the first began and the loop is
 * seamless. No JS, nothing to measure at runtime.
 */

@layer components {
	.partners {
		padding-block: var(--space-2xl);
		background-color: var(--clr-bg);
		text-align: center;
	}

	.partners__label {
		margin: 0 0 var(--space-l);
		font-family: var(--font-text);
		font-size: var(--fs-eyebrow);
		font-weight: var(--weight-semibold);
		line-height: var(--lh-eyebrow);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--clr-text-subtle);
	}

	/* Fades the bleed at both edges so logos don't hard-cut at the viewport. */
	.partners__viewport {
		overflow: hidden;
		mask-image: linear-gradient(
			to right,
			transparent,
			#000 var(--partners-fade, 6%),
			#000 calc(100% - var(--partners-fade, 6%)),
			transparent
		);
	}

	.partners__track {
		display: flex;
		align-items: center;
		gap: var(--partners-gap, 5.5rem);   /* 88px measured */
		inline-size: max-content;
	}

	.partners--scrolling .partners__track {
		animation: dl-marquee var(--partners-duration, 40s) linear infinite;
	}
	/* Keyboard focus pauses; focus restored after a mouse interaction does not.
	   See the note in lounge-gallery.css. */
	.partners--scrolling .partners__viewport:hover .partners__track,
	.partners--scrolling .partners__viewport:has(:focus-visible) .partners__track {
		animation-play-state: paused;
	}

	@keyframes dl-marquee {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(-50%, 0, 0); }
	}

	/* Static variant: centre the row and let it scroll by hand if it overflows. */
	.partners:not(.partners--scrolling) .partners__viewport {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.partners:not(.partners--scrolling) .partners__viewport::-webkit-scrollbar { display: none; }
	.partners:not(.partners--scrolling) .partners__track {
		justify-content: center;
		min-inline-size: 100%;
	}

	.partners__item {
		display: inline-flex;
		align-items: center;
		flex: 0 0 auto;
	}

	/*
	 * Logos are optically balanced rather than uniform in the design (heights
	 * run 23–42px), so each partner can nudge its own scale. Width is left to
	 * the logo's own aspect ratio.
	 */
	/*
	 * Definite height so width follows the ratio. Logos vary in aspect, and a
	 * max-height alone lets an unresolved intrinsic size stretch them.
	 */
	.partners__item img {
		block-size: calc(var(--partners-logo-height, 2.625rem) * var(--logo-scale, 1));
		inline-size: auto;
		max-inline-size: none;
		object-fit: contain;
	}

	/* Linked logos get a little feedback without colouring a brand mark. */
	a.partners__item {
		opacity: 0.75;
		transition: opacity var(--transition-fast);
	}
	a.partners__item:hover,
	a.partners__item:focus-visible { opacity: 1; }

	@media (max-width: 47.999rem) {
		.partners { --partners-gap: 3rem; --partners-logo-height: 2rem; }
	}

	/*
	 * Reduced motion: stop the animation entirely and hand control back, rather
	 * than leaving logos drifting past. The row stays swipeable.
	 */
	@media (prefers-reduced-motion: reduce) {
		.partners--scrolling .partners__track { animation: none; }
		.partners--scrolling .partners__viewport {
			overflow-x: auto;
			mask-image: none;
		}
		/* The duplicate set is decorative once nothing is moving. */
		.partners--scrolling .partners__track > [data-duplicate] { display: none; }
	}
}

@layer components {
	/*
	 * On a dark band the supplied logos — dark artwork on transparent — would
	 * disappear. brightness(0) flattens each one to black and invert(1) turns
	 * it white, which is how the design shows them, and it works for any logo
	 * without asking the client for a second set of files.
	 */
	[data-theme="dark"] .partners__item img {
		filter: brightness(0) invert(1);
	}
}