/**
 * Logo Carousel — CSS-only infinite scroll
 */

.wp-block-spectra-child-logo-carousel {
	--carousel-speed: 30s;
	--logo-height: 50px;
	overflow: hidden;
	position: relative;
}

.wp-block-spectra-child-logo-carousel::before,
.wp-block-spectra-child-logo-carousel::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.wp-block-spectra-child-logo-carousel::before {
	left: 0;
	background: linear-gradient(to right, var(--wp--preset--color--warm-white), transparent);
}

.wp-block-spectra-child-logo-carousel::after {
	right: 0;
	background: linear-gradient(to left, var(--wp--preset--color--warm-white), transparent);
}

.logo-carousel__track {
	display: flex;
	width: max-content;
	animation: logo-scroll var(--carousel-speed) linear infinite;
}

.logo-carousel__set {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--large, 3rem);
	padding-inline: calc(var(--wp--preset--spacing--large, 3rem) / 2);
}

.logo-carousel__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	text-decoration: none;
}

.logo-carousel__item img {
	display: block;
	height: var(--logo-height);
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition:
		filter 0.3s ease,
		opacity 0.3s ease;
	transform: translateZ(0);
}

.logo-carousel__item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

@keyframes logo-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
	.logo-carousel__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}

	.logo-carousel__set[aria-hidden="true"] {
		display: none;
	}

	.logo-carousel__item img {
		filter: grayscale(0%);
		opacity: 1;
	}
}