/**
 * Out-N-Out Scrolling Marquee. Handle: oon-widget-marquee (depends on oon-tokens).
 * Pure-CSS infinite scroll via two duplicated tracks; pauses on hover; disabled
 * for reduced-motion users.
 */
.oon-marquee {
	--oon-mq-gap: 64px;
	--oon-mq-duration: 30s;
	width: 100%;
	overflow: hidden;
}

.oon-marquee__viewport {
	display: flex;
	width: max-content;
}

.oon-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var(--oon-mq-gap, 64px);
	padding-right: var(--oon-mq-gap, 64px); /* keep spacing across the loop seam */
	animation: oon-marquee-left var(--oon-mq-duration, 30s) linear infinite;
}

.oon-marquee--right .oon-marquee__track {
	animation-name: oon-marquee-right;
}

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

.oon-marquee__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}

.oon-marquee__text {
	font-family: var(--oon-font-body);
	font-weight: var(--oon-fw-medium, 500);
	font-size: 42px;
	line-height: 1.1;
	letter-spacing: 0.005em;
	color: #1a1a1a;
	white-space: nowrap;
}

.oon-marquee__img img {
	display: block;
	height: 80px;
	width: auto;
	object-fit: cover;
	border-radius: 10px;
}

@keyframes oon-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@keyframes oon-marquee-right {
	from { transform: translateX(-100%); }
	to   { transform: translateX(0); }
}

/* Respect reduced-motion: stop scrolling, show one static track centred. */
@media (prefers-reduced-motion: reduce) {
	.oon-marquee__track {
		animation: none;
	}
	.oon-marquee__viewport {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}
	.oon-marquee__track[aria-hidden="true"] {
		display: none;
	}
}