/* TN - Infinite Scroller: seamless auto-scrolling logo/image marquee.
   Track is duplicated by JS; this file only handles layout + the static
   (reduced-motion / no-JS) fallback. */

.tn-infinite-scroller {
	overflow: hidden;
	position: relative;
}

.tn-infinite-scroller__viewport {
	display: flex;
	width: max-content;
	will-change: transform;
}

.tn-infinite-scroller__track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var( --tn-scroller-gap, 3rem );
	padding-inline-end: var( --tn-scroller-gap, 3rem );
}

.tn-infinite-scroller__track img {
	max-width: none;
	height: var( --tn-scroller-item-height, 48px );
	width: auto;
	flex-shrink: 0;
}

/* Duplicate track injected by JS to create the seamless loop. Hidden from
   assistive tech since it repeats the same content. */
.tn-infinite-scroller__track[aria-hidden="true"] {
	pointer-events: none;
}

/* No-JS / reduced-motion fallback: let people scroll the single track by hand
   instead of shipping a frozen, half-clipped marquee. */
.tn-infinite-scroller--static {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tn-infinite-scroller--static .tn-infinite-scroller__viewport {
	width: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	.tn-infinite-scroller:not( .tn-infinite-scroller--static ) .tn-infinite-scroller__viewport {
		transform: none !important;
	}
}