/* ----------------
FADE IN
---------------- */
.fade-in {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ----------------
MARQUEE
---------------- */
.marquee {
	--gap: 80px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
	padding: 14px 0;
	height: auto;
}

.marquee-content {
	flex-shrink: 0;
	display: flex;
	justify-content: space-around;
	gap: var(--gap);
	min-width: 100%;
	animation: scroll 20s linear infinite;
}

.client-marquee .marquee-content {
	animation-duration: 30s;
}

/* Trim the line box to cap height and baseline so equal padding looks equal */
.client-marquee .marquee-content li {
	text-box: trim-both cap alphabetic;
}

.marquee-content li {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1;
}

@keyframes scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}