/* Systical — Partner Logos */

.sys-pl {
	--pl-accent: #9afd0d;
	--pl-speed: 46s;
	--pl-stagger: 8s;
	--pl-gap: 64px;
	--pl-logo-h: 34px;
	--pl-opacity: 0.55;
	--pl-opacity-hover: 1;
	--pl-fade: 120px;
	position: relative;
	padding: 100px 0 110px;
	overflow: hidden;
	background: #070707;
}

/* ---------- heading ---------- */

.sys-pl__head {
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 0 24px;
	text-align: center;
}

.sys-pl__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	padding: 8px 16px;
	border-radius: 40px;
	background: #1a1a1a;
	color: #fff;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.sys-pl__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pl-accent);
}

.sys-pl__title {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: clamp(32.5px, 4.2vw, 57.5px);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #fff;
}

/* ---------- rows ---------- */

.sys-pl__rows {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.sys-pl__row {
	overflow: hidden;
}

.sys-pl--carded .sys-pl__row {
	padding: 22px 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
}

.sys-pl__track {
	display: flex;
	align-items: center;
	gap: var(--pl-gap);
	width: max-content;
	padding-left: var(--pl-gap);
	will-change: transform;
	/* Each row runs a little slower than the one above so they don't move in
	   lockstep, which reads as one solid block sliding. */
	animation: sys-pl-marquee calc(var(--pl-speed) + (var(--pl-row, 0) * var(--pl-stagger)))
		linear infinite;
}

.sys-pl__row.is-reverse .sys-pl__track {
	animation-direction: reverse;
}

/* The set is rendered twice, so shifting by exactly half the track lands on an
   identical frame. The gap is halved back out because one sits between the
   two halves as well. */
@keyframes sys-pl-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-50% - (var(--pl-gap) / 2)), 0, 0);
	}
}

/* Scoped to the rows themselves, not the whole widget — hovering the heading
   or the padding around it should not stop the logos. */
.sys-pl--pausable .sys-pl__rows:hover .sys-pl__track {
	animation-play-state: paused;
}

.sys-pl--static .sys-pl__track {
	animation: none;
	justify-content: center;
	width: 100%;
	flex-wrap: wrap;
	row-gap: 28px;
}

/* Hide the duplicate set when nothing is moving, or every logo shows twice. */
.sys-pl--static .sys-pl__logo[aria-hidden="true"] {
	display: none;
}

/* ---------- logo ---------- */

.sys-pl__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	height: calc(var(--pl-logo-h) * var(--pl-scale, 1));
	opacity: var(--pl-opacity);
	transition: opacity 0.28s ease, filter 0.28s ease;
}

.sys-pl--grey .sys-pl__logo {
	filter: grayscale(1);
}

.sys-pl__logo:hover {
	opacity: var(--pl-opacity-hover);
	filter: grayscale(0);
}

.sys-pl__logo img {
	display: block;
	width: auto;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* ---------- edge fade ---------- */

.sys-pl--faded .sys-pl__row {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--pl-fade),
		#000 calc(100% - var(--pl-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--pl-fade),
		#000 calc(100% - var(--pl-fade)),
		transparent 100%
	);
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.sys-pl {
		--pl-gap: 46px;
		--pl-logo-h: 28px;
		--pl-fade: 70px;
	}

	.sys-pl__rows {
		gap: 26px;
	}
}

@media (max-width: 767px) {
	.sys-pl {
		--pl-gap: 34px;
		--pl-logo-h: 24px;
		--pl-fade: 40px;
		padding: 70px 0 76px;
	}

	.sys-pl__head {
		margin-bottom: 40px;
		padding: 0 18px;
	}

	.sys-pl__rows {
		gap: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sys-pl__track {
		animation: none;
	}

	.sys-pl__row {
		overflow-x: auto;
	}
}