/* IPS Image Marquee.
   Pure CSS infinite scroll: the track is rendered twice by PHP
   (see includes/class-widget.php) and animated from translateX(0) to
   translateX(-50%), which is exactly one copy's width, so the loop
   has no visible seam. No JavaScript is involved in the scroll
   itself, so there's nothing to desync or throw a runtime error. */

.ips-marquee-wrap {
	--ips-marquee-fade: 10%;
	overflow: hidden;
	width: 100%;
}

.ips-marquee-fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--ips-marquee-fade),
		black calc(100% - var(--ips-marquee-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--ips-marquee-fade),
		black calc(100% - var(--ips-marquee-fade)),
		transparent 100%
	);
}

.ips-marquee-track {
	--ips-marquee-duration: 22s;
	display: flex;
	width: max-content;
	animation: ips-marquee-scroll-left var(--ips-marquee-duration) linear infinite;
}

/* Direction: right reuses the same keyframes, just played backwards
   in time, which reads as scrolling the opposite way. */
.ips-marquee-dir-right .ips-marquee-track {
	animation-direction: reverse;
}

/* Pause on hover: only added when the "Pause on hover" control is on
   (prefix_class adds ips-marquee-pause-yes / ips-marquee-pause- for
   off, so this selector only ever matches when it's actually on). */
.ips-marquee-pause-yes .ips-marquee-track:hover {
	animation-play-state: paused;
}

.ips-marquee-track__group {
	display: flex;
	flex: 0 0 auto;
}

.ips-marquee-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30px;
	flex: 0 0 auto;
}

.ips-marquee-item img {
	display: block;
	height: 40px;
	width: auto;
	max-width: 100%;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.ips-marquee-item a {
	display: flex;
	align-items: center;
}

/* Optional hover effects, off by default (Style > Images > Hover effect) */
.ips-marquee-hover-grayscale .ips-marquee-item img {
	filter: grayscale(100%);
	opacity: 0.7;
}
.ips-marquee-hover-grayscale .ips-marquee-item:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

.ips-marquee-hover-fade .ips-marquee-item img {
	opacity: 0.55;
}
.ips-marquee-hover-fade .ips-marquee-item:hover img {
	opacity: 1;
}

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

/* Respect reduced-motion preferences: still shows the images, just
   without the constant scrolling motion. */
@media (prefers-reduced-motion: reduce) {
	.ips-marquee-track {
		animation: none;
	}
}