/**
 * Marquee band.
 *
 * The track holds two identical groups and translates by -50%. At the end of the cycle the
 * second group sits exactly where the first began, so the restart is invisible. Any other
 * distance produces a visible jump.
 */

.enigma-marquee {
	position: relative;
	overflow: hidden;
	background: var(--e-accent);
	color: var(--e-on-accent);
}

.enigma-marquee__track {
	display: flex;
	width: max-content;
	padding-block: 21px;
	animation: enigma-marquee var(--enigma-marquee-duration, 46s) linear infinite;
	animation-direction: var(--enigma-marquee-direction, normal);
	will-change: transform;
}

.enigma-marquee.pause-on-hover:hover .enigma-marquee__track {
	animation-play-state: paused;
}

.enigma-marquee__group {
	display: flex;
	align-items: center;
	gap: 34px;
	padding-inline-end: 34px;
}

.enigma-marquee__item {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	color: inherit;
}

/* Theme-class prefixed (0-2-0) so a builder's generic img rule cannot resize the mark. */
.enigma .enigma-marquee__mark {
	flex: 0 0 auto;
	display: block;
	width: 15px;
	height: auto;
	opacity: .5;
}

@keyframes enigma-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

/*
 * Reduced motion: stop the animation, but keep the band readable rather than blank. The
 * duplicate group is hidden so the list is not announced or shown twice.
 */
@media (prefers-reduced-motion: reduce) {
	.enigma-marquee__track {
		animation: none;
		width: 100%;
		overflow-x: auto;
	}

	.enigma-marquee__group[aria-hidden="true"] {
		display: none;
	}
}

:lang(ar) .enigma-marquee__item {
	letter-spacing: 0;
	text-transform: none;
}