/**
 * Styles specific to the Nuvobrix — Home Marquee widget only.
 *
 * The pause-on-hover and reduced-motion behavior come from the shared
 * nuvobrix-widgets.js utility (NB.initMarquee), triggered by the
 * [data-nuvobrix-marquee] attribute on the root element — this widget
 * only needs to style the .is-paused / .is-static states that utility
 * toggles, not implement the behavior itself.
 */

.nuvobrix-home-marquee {
	--nuvobrix-marquee-duration: 32s;
	background: var(--nuvobrix-dark);
	color: var(--nuvobrix-paper);
	overflow: hidden;
	border-top: 1px solid var(--nuvobrix-dark-line);
	border-bottom: 1px solid var(--nuvobrix-dark-line);
}

.nuvobrix-home-marquee__track {
	display: flex;
	width: max-content;
	animation: nuvobrix-marquee-scroll var(--nuvobrix-marquee-duration) linear infinite;
}

.nuvobrix-home-marquee.is-paused .nuvobrix-home-marquee__track {
	animation-play-state: paused;
}

.nuvobrix-home-marquee.is-static .nuvobrix-home-marquee__track {
	animation: none;
}

/*
 * The track renders 4 copies of the item list back-to-back (see the
 * widget's render()), not 2 — with a short list like this, 2 copies
 * often aren't wide enough to fill a real browser window, so the track
 * visibly "runs out" of content before the loop resets: a blank gap
 * flashes by instead of a smooth continuous scroll. 4 copies means at
 * least 3 are always on screen at once, which comfortably covers even
 * wide monitors. Moving exactly one copy's width per loop (-25%, i.e.
 * 100% / 4 copies) is what keeps the reset invisible.
 */
@keyframes nuvobrix-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-25%); }
}

.nuvobrix-home-marquee__set {
	display: flex;
	align-items: center;
	flex: none;
}

.nuvobrix-home-marquee__item {
	font-family: var(--nuvobrix-font-mono);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 20px 30px;
	white-space: nowrap;
	color: var(--nuvobrix-dark-ink-70);
}

.nuvobrix-home-marquee__sep {
	font-style: normal;
	color: var(--nuvobrix-signal-dim);
}

@media (prefers-reduced-motion: reduce) {
	.nuvobrix-home-marquee__track {
		animation: none;
	}
}