/*
 * Marquee — one real items group plus N-1 aria-hidden, inert clones. The track
 * translates by exactly one group width per cycle (-100% / N) for a seamless
 * loop.
 */

.marquee {
	overflow: clip;
	/* The track is four copies wide, so the marquee's intrinsic width means
	   nothing. As a Row child it would push the page sideways and squeeze its
	   siblings. Containing inline size makes it 0: Fill then takes only the
	   space left over. */
	contain: inline-size;
	/*
	 * Pause on interaction — WCAG 2.2.2. :active covers touch (tap and hold),
	 * since :hover is unreliable there and a text-only marquee has nothing
	 * focusable for :focus-within to catch.
	 */
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee:active .marquee__track {
	animation-play-state: paused;
}

.marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	/*
	 * NO gap here. It would make the width N*group + (N-1)*gap, so -100%/N falls
	 * short by (1/N)*gap per cycle and the loop visibly jumps. Inter-group
	 * spacing lives on the group's margin-inline-end instead.
	 */
	animation: wage-marquee-scroll var(--marquee-duration, 30s) linear infinite;
	will-change: transform;
}

.marquee__group {
	display: flex;
	align-items: center;
	gap: var(--marquee-gap, var(--wp--preset--spacing--s));
	flex-shrink: 0;
	margin-inline-end: var(--marquee-gap, var(--wp--preset--spacing--s));
}

/* Flex, not block, so inline content cannot float high in an oversized line
   box — keeps each item centred against the separators. */
.marquee__group > * {
	display: flex;
	align-items: center;
	white-space: nowrap;
	margin: 0;
}

/* Editor: the one editable group wraps onto rows so every item stays visible.
   Core sets rich text to pre-wrap, so otherwise items shrink and break mid-phrase. */
.editor-styles-wrapper .marquee__group {
	flex-wrap: wrap;
}

/* The separator is drawn after every item rather than being markup, so it
   never reaches the accessibility tree and never needs escaping. After EVERY
   item, last included, so the seam between one group and the next clone gets
   one too. Falls back to `none` so an empty separator leaves no stray gap. */
.marquee__group > *::after {
	content: var(--marquee-separator, none);
	margin-inline-start: var(--marquee-gap, var(--wp--preset--spacing--s));
	color: var(--marquee-separator-foreground, var(--wp--preset--color--primary));
	line-height: 1;
}

/* Translate exactly one slot per cycle: -100% / 4 = -25%. Must match the four
   groups render.php emits (WAGE_MARQUEE_COPIES). */
@keyframes wage-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}

/* Fade edges: items fade out at both ends instead of cutting off. A mask, not
   an overlay, so it works over any background. --marquee-fade is the band width (6% per side, as in the PHP trust strip). */
.marquee--fade {
	mask-image: linear-gradient(to right, transparent, #000 var(--marquee-fade, 6%), #000 calc(100% - var(--marquee-fade, 6%)), transparent);
}

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

/*
 * Reduced motion: animation off and clones hidden, with the x-axis made
 * scrollable so the content is still reachable.
 */
@media (prefers-reduced-motion: reduce) {
	.marquee {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.marquee__track {
		animation: none;
	}

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