/**
 * CVpack logo slider — infinite CSS marquee.
 */

.asg-logo-slider {
	--asg-logo-slider-gap: clamp(1.5rem, 4vw, 3rem);
	--asg-logo-slider-duration: 45s;
	width: 100%;
	overflow: hidden;
}

.asg-logo-slider__viewport {
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(
		to right,
		transparent,
		#000 8%,
		#000 92%,
		transparent
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent,
		#000 8%,
		#000 92%,
		transparent
	);
}

.asg-logo-slider__track {
	display: flex;
	width: max-content;
	animation: asg-logo-slider-scroll var(--asg-logo-slider-duration) linear infinite;
	will-change: transform;
}

.asg-logo-slider__row {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--asg-logo-slider-gap);
	padding-right: var(--asg-logo-slider-gap);
}

.asg-logo-slider__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	max-height: 64px;
	width: auto;
}

.asg-logo-slider__img {
	display: block;
	max-height: 64px;
	width: auto;
	max-width: 160px;
	height: auto;
	object-fit: contain;
	opacity: 1;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

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

@media (prefers-reduced-motion: reduce) {
	.asg-logo-slider__track {
		animation: none;
		transform: none;
	}

	.asg-logo-slider__row--clone {
		display: none;
	}

	.asg-logo-slider__viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		mask-image: none;
		-webkit-mask-image: none;
	}
}