/**
 * Paripoorn Logo Marquee widget.
 * The track is rendered twice back-to-back in the DOM (see
 * LogoMarquee.php render()); animating from translateX(0) to
 * translateX(-50%) moves exactly one full copy's width, so the moment
 * the loop restarts at 0% it is pixel-identical to what was already on
 * screen — no visible seam, jump, or pause, and no JS timer to drift
 * or ever "finish". animation-iteration-count is infinite by design.
 */

.pp-lm {
	width: 100%;
}

.pp-lm__viewport {
	overflow: hidden;
	width: 100%;
}

.pp-lm__viewport--fade {
	--pp-lm-fade-width: 120px;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--pp-lm-fade-width),
		#000 calc(100% - var(--pp-lm-fade-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--pp-lm-fade-width),
		#000 calc(100% - var(--pp-lm-fade-width)),
		transparent 100%
	);
}

/*
 * The viewport holds TWO identical tracks side by side, separated by the
 * same gap used between logos. The animation therefore has to run on the
 * viewport's inner row — not on each track — because one full loop is
 * "one track's width PLUS the gap that follows it", and a track animating
 * its own translateX(-100%) moves only its own width. That shortfall (one
 * gap per cycle) is what made logos drift into each other over time.
 *
 * Animating the row and translating by calc(-50% - half a gap) moves
 * exactly one track + one gap, so the restart is pixel-identical to what
 * was already on screen.
 */
.pp-lm__row {
	display: flex;
	align-items: center;
	gap: var(--pp-lm-gap, 64px);
	width: max-content;
	animation: pp-lm-scroll-left var(--pp-lm-duration, 30s) linear infinite;
	/* Promote to its own layer: without this the browser can re-rasterise
	   the row mid-animation, which shows up as logos shimmering or briefly
	   landing on top of each other on lower-end devices. */
	will-change: transform;
}

.pp-lm__track {
	display: flex;
	align-items: center;
	gap: var(--pp-lm-gap, 64px);
	flex-shrink: 0;
	width: max-content;
}

.pp-lm--dir-right .pp-lm__row {
	animation-name: pp-lm-scroll-right;
}

.pp-lm--pause-on-hover:hover .pp-lm__row {
	animation-play-state: paused;
}

/*
 * -50% is the midpoint of the two-track row, which lands on the START of
 * the second track — but the gap between the tracks sits before it, so
 * half a gap must come off as well for the loop to be seamless.
 */
@keyframes pp-lm-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-50% - (var(--pp-lm-gap, 64px) / 2)));
	}
}

@keyframes pp-lm-scroll-right {
	from {
		transform: translateX(calc(-50% - (var(--pp-lm-gap, 64px) / 2)));
	}
	to {
		transform: translateX(0);
	}
}

.pp-lm__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pp-lm__logo a {
	display: inline-flex;
}

.pp-lm__logo img {
	height: 40px;
	width: auto;
	max-width: none;
	object-fit: contain;
	transition: opacity 250ms ease, filter 250ms ease;
}

.pp-lm--grayscale .pp-lm__logo img {
	filter: grayscale(100%);
	opacity: 0.6;
}

.pp-lm--grayscale .pp-lm__logo:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	/* The animation lives on the row now, so stopping the track would
	   leave it running. Also drop the transform so the row isn't frozen
	   mid-scroll with the first logos cut off. */
	.pp-lm__row {
		animation: none;
		transform: none;
		will-change: auto;
	}

	.pp-lm__viewport {
		overflow-x: auto;
	}
}