/* Logo marquee — Figma: Client Logos Section / Testimonial Logos Bar */
.logo-marquee {
	position: relative;
	overflow: hidden;
	background: var(--color-neutral-5);
	--marquee-gap: 41px;
	--marquee-speed: 20s;
}

.logo-marquee--partners {
	--marquee-gap: 40px;
	--marquee-speed: 30s;
}

.logo-marquee__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-block: 40px;
}

.logo-marquee__title {
	position: relative;
	z-index: 2;
	max-width: 252px;
	box-sizing: content-box;
	padding-inline: var(--gutter);
	color: var(--color-neutral-2);
}

.logo-marquee__viewport {
	position: relative;
	overflow: hidden;
	/* Stacked layout: the strip stays inside the page gutters and fades at its ends */
	margin-inline: var(--gutter);
	mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.logo-marquee__track {
	display: flex;
	width: max-content;
	/* Rows repeat the logo set (--marquee-repeat, set in PHP); keep the same speed */
	animation: logo-marquee calc(var(--marquee-speed) * var(--marquee-repeat, 1)) linear infinite;
}

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

.logo-marquee .logo-marquee__row {
	display: flex;
	align-items: center;
	gap: var(--marquee-gap);
	padding-right: var(--marquee-gap);
}

.logo-marquee__logo {
	flex: none;
	height: auto;
	max-width: none;
	max-height: 61px;
}

.logo-marquee--partners .logo-marquee__logo {
	max-height: 43px;
}

@keyframes logo-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* base.css stops animations under reduced motion, which froze the strips on devices
   with animations off (e.g. Windows "Animation effects"). Keep them moving, slower. */
@media (prefers-reduced-motion: reduce) {
	.logo-marquee__track {
		animation-duration: calc(var(--marquee-speed) * var(--marquee-repeat, 1) * 2) !important;
		animation-iteration-count: infinite !important;
	}
}

/* Whole strip links through (partners strip → Partners page) */
.logo-marquee__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.logo-marquee__link:focus-visible {
	outline-offset: -3px;
}

/* Desktop: title sits over the moving strip, edges fade (Figma gradient overlays) */
@media (min-width: 1024px) {
	.logo-marquee {
		height: 191px;
	}

	.logo-marquee__inner {
		display: block;
		padding: 0;
		height: 100%;
	}

	.logo-marquee__title {
		position: absolute;
		top: 70px;
		left: max(var(--gutter), calc((100% - var(--container)) / 2));
		padding-inline: 0;
		max-width: 246px;
	}

	.logo-marquee--partners .logo-marquee__title {
		max-width: 252px;
	}

	.logo-marquee__viewport {
		position: absolute;
		inset: 0;
		margin-inline: 0;
		display: flex;
		align-items: center;
		mask-image: none;
	}

	.logo-marquee--partners .logo-marquee__viewport {
		padding-bottom: 1px;
	}

	.logo-marquee::before,
	.logo-marquee::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;
		pointer-events: none;
	}

	/* Gradient Overlay Right (behind the title). Figma fades from 243px, under the title;
	   kept solid past the title's right edge (gutter + 252) so no logo shows through the text */
	.logo-marquee::before {
		left: 0;
		width: calc(max(var(--gutter), (100% - var(--container)) / 2) + 540px);
		background: linear-gradient(90deg, var(--color-neutral-5) calc(100% - 250px), rgb(223 239 246 / 0));
	}

	/* Gradient Overlay Left (right edge) */
	.logo-marquee::after {
		right: 0;
		width: 260px;
		background: linear-gradient(79.83deg, rgb(223 239 246 / 0) 5.82%, var(--color-neutral-5) 94.18%);
	}
}