// Carousel type "Logo Strip" (Modules/ComponentCarousel/Resources/views/partials/logos.blade.php).
// Logos scroll continuously right to left; the list is printed twice and the track
// moves by exactly half its width, so the loop has no visible jump.
.logo-strip {
	overflow: hidden;
	width: 100%;

	&__track {
		display: flex;
		align-items: center;
		width: max-content;
		// Seconds per logo, so the speed stays the same however many there are.
		// Bigger logos travel further per loop, so this grows with the logo size.
		animation: logo-strip-scroll calc(var(--logo-count, 9) * 7.5s) linear infinite;
		// Moves the strip on the graphics card, so it glides instead of stepping.
		will-change: transform;
		backface-visibility: hidden;
	}

	// Spacing is padding (not gap) so both copies are exactly the same width.
	&__item {
		flex: 0 0 auto;
		padding: 0 2.25rem;

		@include media-breakpoint-up(lg) {
			padding: 0 3.75rem;
		}
	}

	// Every logo the same height, width follows its own shape.
	&__logo {
		display: block;
		height: 105px;
		width: auto;
		max-width: 330px;
		object-fit: contain;

		@include media-breakpoint-up(lg) {
			height: 165px;
			max-width: 480px;
		}
	}

	// Visitors who ask for less motion get a still row they can swipe or scroll.
	@media (prefers-reduced-motion: reduce) {
		overflow-x: auto;

		&__track { animation: none; }
		&__item[aria-hidden="true"] { display: none; }
	}
}

@keyframes logo-strip-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}