.text-marquee {
	position: absolute;
	inset-inline: 0;
	overflow: hidden;
	pointer-events: none;
}

.text-marquee__track {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: max-content;
	animation: text-marquee-loop var(--marquee-duration, 64s) linear infinite;
	will-change: transform;
}

.text-marquee__group {
	display: flex;
	width: max-content;
	flex: none;
}

.text-marquee__track--reverse {
	animation-direction: reverse;
}

@keyframes text-marquee-loop {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.text-marquee__track {
		left: 50%;
		animation: none !important;
		transform: translateX(-50%);
		will-change: auto;
	}

	.text-marquee__group--clone {
		display: none;
	}
}