/*
 * Makira Brands Slider - frontend styles.
 *
 * The infinite-loop illusion works by rendering the logo set twice (see
 * class-brands-slider.php) and animating the track exactly -50% of its own
 * width. Because the content is duplicated, -50% always lines up perfectly
 * with the start of the second copy, regardless of logo count or screen
 * width - no JavaScript required for the motion itself.
 */

.makira-brands-slider {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.makira-brands-slider__track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var( --makira-slider-gap, 60px );
	animation: makira-brands-slider-scroll var( --makira-slider-duration, 30s ) linear infinite;
	will-change: transform;
}

.makira-brands-slider__track--reverse {
	animation-direction: reverse;
}

.makira-brands-slider--pause-on-hover:hover .makira-brands-slider__track {
	animation-play-state: paused;
}

.makira-brands-slider__set {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var( --makira-slider-gap, 60px );
}

.makira-brands-slider__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	height: var( --makira-slider-height, 50px );
}

.makira-brands-slider__logo {
	display: block;
	height: 100% !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain;
	filter: grayscale( 100% );
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.makira-brands-slider__logo:hover {
	filter: grayscale( 0% );
	opacity: 1;
}

@keyframes makira-brands-slider-scroll {
	from {
		transform: translateX( 0 );
	}
	to {
		transform: translateX( -50% );
	}
}

/* Accessibility: honor the visitor's OS-level reduced-motion preference. */
@media ( prefers-reduced-motion: reduce ) {
	.makira-brands-slider__track {
		animation: none;
	}
}