/**
 * Partner-marquee — doorlopende logobalk (Over NContact).
 *
 * De band bestaat uit twee identieke reeksen achter elkaar. De animatie
 * verschuift precies één reeks plus één tussenruimte naar links; op dat punt
 * staat de tweede reeks exact waar de eerste begon, dus de herhaling is
 * naadloos en er is geen zichtbare sprong.
 */

.nc-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.nc-marquee__track {
	display: flex;
	align-items: center;
	gap: 80px;
	width: max-content;
	will-change: transform;
	animation: nc-marquee-schuif var(--nc-marquee-duur, 40s) linear infinite;
}

.nc-marquee__group {
	display: flex;
	align-items: center;
	gap: 80px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nc-marquee__item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	height: 32px;
	margin: 0;
}

.nc-marquee__item .nc-marquee__logo {
	display: block;
	width: auto;
	max-width: none;
	height: 32px;
}

/* -50% is precies het midden van de band; de extra 40px (de halve
   tussenruimte van 80px die tussen de twee reeksen zit) legt reeks twee exact
   op de startpositie van reeks één. */
@keyframes nc-marquee-schuif {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-50% - 40px), 0, 0); }
}

/* Zelfde afspraak als de rest van de motion-laag: wie bewegende beelden
   uitzet, krijgt een stilstaande balk. */
@media (prefers-reduced-motion: reduce) {
	.nc-marquee__track {
		animation: none;
	}
}