/* Logo Scroller - front end styles
 * Uses CSS custom properties (set inline per-instance by PHP) so multiple
 * scrollers with different settings can share this single stylesheet.
 */

.logosc-wrap {
	--logosc-speed: 30s;
	--logosc-gap: 60px;
	--logosc-logo-height: 60px;
	--logosc-bg: transparent;

	width: 100%;
	overflow: hidden;
	background: var(--logosc-bg);
	padding: 20px 0;
	box-sizing: border-box;

	/* Fade the edges so logos don't appear to "pop" in/out abruptly. */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 40px,
		#000 calc(100% - 40px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 40px,
		#000 calc(100% - 40px),
		transparent 100%
	);
}

.logosc-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--logosc-gap);
	animation: logosc-scroll-left var(--logosc-speed) linear infinite;
	will-change: transform;
}

.logosc-wrap.logosc-dir-right .logosc-track {
	animation-name: logosc-scroll-right;
}

.logosc-wrap.logosc-pause-hover:hover .logosc-track {
	animation-play-state: paused;
}

.logosc-item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--logosc-logo-height);
}

.logosc-item img {
	height: var(--logosc-logo-height);
	width: auto;
	max-width: none;
	display: block;
	object-fit: contain;
}

.logosc-wrap.logosc-grayscale .logosc-item img {
	filter: grayscale(100%);
	opacity: 0.75;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

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

.logosc-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* The track content is duplicated (rendered twice) so translating exactly
 * -50% of the track's total width lines the second copy up perfectly with
 * where the first one started - giving a perfectly seamless, continuous loop. */
@keyframes logosc-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes logosc-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.logosc-empty-notice {
	padding: 12px 16px;
	background: #fff8e5;
	border: 1px solid #f0c33c;
	color: #6b5300;
	font-size: 13px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.logosc-track {
		animation: none !important;
	}
}