/*
 * PureCSS.com
 * https://purecss.com/examples/marquee-text/
 * Infinite scrolling text using translateX keyframes — no JavaScript required.
 */

.demo-marquee-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow: hidden;
}

.demo-marquee-text .marquee-track {
		overflow: hidden;
		border-top: 1px solid var(--border);
		border-bottom: 1px solid var(--border);
		padding: .7rem 0;
	}

.demo-marquee-text .marquee-inner {
		display: inline-flex;
		white-space: nowrap;
		animation: marquee-scroll 16s linear infinite;
	}

:is(.demo-marquee-text .marquee-inner):hover {
			animation-play-state: paused;
		}

.demo-marquee-text .marquee-inner-rev {
		animation-direction: reverse;
		animation-duration: 12s;
	}

.demo-marquee-text .marquee-item {
		padding: 0 2rem;
		font-family: var(--font-mono);
		font-size: .75rem;
		letter-spacing: .08em;
		color: var(--text-muted);
		text-transform: uppercase;
		display: inline-flex;
		align-items: center;
		gap: 2rem;
	}

:is(.demo-marquee-text .marquee-item)::after {
			content: "✦";
			color: var(--accent);
			font-size: .6rem;
		}

.demo-marquee-text .marquee-item-accent {
		color: var(--accent);
	}

@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}