/**
 * Wappbiz Logo Marquee — infinite scrolling row of client logos.
 *
 * Mechanic: .wappbiz-marquee__track holds two identical .wappbiz-marquee__group
 * copies laid out side by side with flex. The whole track is animated with a
 * translateX keyframe from 0 to -50% (its own half-width, i.e. exactly one
 * group's width): the moment the first group has fully scrolled off, the
 * second group is sitting exactly where the first one started, so the loop
 * point is invisible and the motion never appears to reset or jump.
 */

.wappbiz-marquee {
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
	padding: 40px 0;
	background: #ffffff;
	overflow: hidden;
	/*
	 * This animation runs continuously forever, including while scrolled
	 * far off-screen elsewhere on a long page — that's wasted compositing
	 * work competing with whatever the user is actually looking at, which
	 * is a plausible source of "sometimes gets slow" on pages where this
	 * widget isn't the only thing on screen. content-visibility: auto lets
	 * the browser skip layout/paint/animation work for this block entirely
	 * while it's off-screen, and contain-intrinsic-size avoids a layout
	 * jump when it re-enters by reserving its approximate height upfront.
	 */
	content-visibility: auto;
	contain-intrinsic-size: auto 160px;
}

.wappbiz-marquee__viewport {
	overflow: hidden;
	width: 100%;
}

.wappbiz-marquee__track {
	--wappbiz-marquee-duration: 30s;

	display: flex;
	width: max-content;
	animation: wappbiz-marquee-scroll var(--wappbiz-marquee-duration) linear infinite;
	/*
	 * Without an upfront compositing hint, the browser can leave this
	 * translateX animation on the main thread until it decides otherwise
	 * mid-animation — which shows up as exactly the intermittent
	 * slowdown/stutter this is fixing: smooth most of the time, then
	 * janky whenever the browser has to repaint the track instead of just
	 * compositing it. will-change promotes it to its own GPU layer from
	 * the start, every time, not just when the browser happens to notice.
	 */
	will-change: transform;
	backface-visibility: hidden;
}

.wappbiz-marquee__track--reverse {
	animation-direction: reverse;
}

.wappbiz-marquee--pausable .wappbiz-marquee__track:hover {
	animation-play-state: paused;
}

/* Respect reduced-motion preferences: freeze on a static single row. */
@media (prefers-reduced-motion: reduce) {
	.wappbiz-marquee__track {
		animation: none;
	}

	.wappbiz-marquee__group[aria-hidden='true'] {
		display: none;
	}
}

@keyframes wappbiz-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/*
		 * -50% of the track's own width == exactly the width of one group,
		 * since the track is two equal groups placed side by side.
		 */
		transform: translateX(-50%);
	}
}

.wappbiz-marquee__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.wappbiz-marquee__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin-right: 64px;
	/* Lets the Border-group control apply a style/width with no extra step. */
	border-style: solid;
	border-width: 0;
	border-color: transparent;
	/*
	 * Clips any logo with an opaque/filled background (not just transparent
	 * PNGs) to the frame's own rounded corners — otherwise a square-cornered
	 * logo image visibly overhangs the border radius.
	 */
	overflow: hidden;
	line-height: 0;
	text-decoration: none;
}

.wappbiz-marquee__item:last-child {
	margin-right: 64px;
}

.wappbiz-marquee__item img {
	height: 48px;
	max-width: 160px;
	width: auto;
	object-fit: contain;
	opacity: 1;
	transition-property: opacity, filter;
	transition-duration: 0.25s;
	transition-timing-function: ease;
}

/* Grayscale-to-colour hover mode */

.wappbiz-marquee--grayscale .wappbiz-marquee__item img {
	filter: grayscale(100%);
}

.wappbiz-marquee--grayscale .wappbiz-marquee__item:hover img {
	filter: grayscale(0%);
}

/* Edge fade masks — sit above the track, fading to the section background. */

.wappbiz-marquee__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.wappbiz-marquee__fade--left {
	left: 0;
	background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.wappbiz-marquee__fade--right {
	right: 0;
	background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* ------------------------------------------------------------------------
 * Responsive
 * --------------------------------------------------------------------- */

@media (max-width: 600px) {
	.wappbiz-marquee {
		padding: 28px 0;
	}

	.wappbiz-marquee__item {
		margin-right: 36px;
	}

	.wappbiz-marquee__item img {
		height: 34px;
		max-width: 110px;
	}

	.wappbiz-marquee__fade {
		width: 48px;
	}
}