/**
 * OL Logo Rotation — Frontend Marquee CSS
 *
 * Pure CSS infinite scroll animation using duplicated track groups.
 * Configurable via CSS custom properties set inline by PHP.
 */

/* ── Container ── */
.ol-lr-container {
	--ol-lr-speed: 30s;
	--ol-lr-logo-height: 60px;
	--ol-lr-gap: 60px;
	--ol-lr-animation: ol-lr-scroll-left;
	--ol-lr-scale: 1;
	--ol-lr-fade-left: 0px;
	--ol-lr-fade-right: 0px;

	overflow: hidden;
	width: 100%;
	position: relative;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0px,
		black var(--ol-lr-fade-left),
		black calc(100% - var(--ol-lr-fade-right)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0px,
		black var(--ol-lr-fade-left),
		black calc(100% - var(--ol-lr-fade-right)),
		transparent 100%
	);
}

/* ── Track (holds two identical groups) ── */
.ol-lr-track {
	display: flex;
	width: max-content;
	animation: var(--ol-lr-animation) var(--ol-lr-speed) linear infinite;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* ── Pause on hover ── */
.ol-lr-pause-hover:hover .ol-lr-track {
	animation-play-state: paused;
}

/* ── Logo group ── */
.ol-lr-group {
	display: flex;
	align-items: center;
	gap: calc(var(--ol-lr-gap) * var(--ol-lr-scale));
	padding: 0 calc(var(--ol-lr-gap) * var(--ol-lr-scale) / 2);
	flex-shrink: 0;
}

/* ── Individual logo item ── */
.ol-lr-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ol-lr-item img {
	height: calc(var(--ol-lr-logo-height) * var(--ol-lr-scale));
	width: auto;
	max-width: 200px;
	object-fit: contain;
	will-change: filter, opacity;
}

/* ── Grayscale mode (optional, enabled via .ol-lr-grayscale) ── */
.ol-lr-grayscale .ol-lr-item img {
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.ol-lr-grayscale .ol-lr-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

.ol-lr-item a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

/* ── Keyframes: scroll left (default) ── */
@keyframes ol-lr-scroll-left {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* ── Keyframes: scroll right ── */
@keyframes ol-lr-scroll-right {
	0% {
		transform: translate3d(-50%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* ── Accessibility: respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	.ol-lr-track {
		animation-play-state: paused;
	}
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
	.ol-lr-container {
		--ol-lr-scale: 0.7;
	}
}

/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
	.ol-lr-container {
		--ol-lr-scale: 0.5;
	}
}