/**
 * Curel — marquee runtime CSS.
 *
 * Minimal styles for the parametrized marquee that ships from
 * includes/marquees.php. All visual properties (colors, font, sizing,
 * spacing, animation duration/direction, borders) are inlined per
 * instance from the admin; this file contributes only the keyframe,
 * the structural classes, and a reduced-motion override.
 *
 * Class hierarchy:
 *   .curel-marquee            container; carries inline bg/text/font/padding/border
 *     .curel-marquee-viewport overflow-hidden clip + relative anchor for fades
 *       .curel-marquee-track  inline-flex; animated; items duplicated 2x
 *         .curel-marquee-item one per resolved item (span or anchor)
 *         .curel-marquee-sep  optional separator glyph between items
 *       .curel-marquee-fade   optional left/right gradient overlays
 *   .curel-marquee-uppercase  on container when uppercase option is on
 */

.curel-marquee {
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}

.curel-marquee-uppercase {
	text-transform: uppercase;
}

.curel-marquee a.curel-marquee-item {
	color: inherit;
	text-decoration: none;
}
.curel-marquee a.curel-marquee-item:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.curel-marquee-viewport {
	position: relative;
	overflow: hidden;
}

.curel-marquee-track {
	display: inline-flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
	gap: var(--cur-marquee-gap, 0);
}

/* One repeating tile of items (with a trailing separator). The track holds two
   as a baseline; marquees.js clones more to fill wide viewports. The group's
   internal gap matches the track gap so spacing is uniform across the seam. */
.curel-marquee-group {
	display: inline-flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	align-items: center;
	flex-shrink: 0;
	gap: var(--cur-marquee-gap, 0);
}

.curel-marquee-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.curel-marquee-sep {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	user-select: none;
}

.curel-marquee-fade {
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
}
.curel-marquee-fade-left  { left:  0; }
.curel-marquee-fade-right { right: 0; }

/* Shift by exactly one tile (group width + gap, in px), set by marquees.js, so
   the next identical group lands precisely where the previous one was — a
   seamless loop. Falls back to -50% (the two-group baseline) before JS runs. */
@keyframes curel-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--cur-marquee-shift, 50%))); }
}

@media (prefers-reduced-motion: reduce) {
	.curel-marquee-track {
		animation: none !important;
		transform: none !important;
	}
}