/**
 * Animated Marquee — Common base CSS ( loads for every style ).
 *
 * Owns the seamless scroll engine: a flex track holds two identical groups and
 * animates translateX( -50% ) so the loop is perfectly continuous. Per-style
 * files paint the items. CSS variables drive theme, speed and spacing:
 *   --captwiki-mq-accent / --captwiki-mq-accent-2  → colours
 *   --captwiki-mq-duration                         → loop time
 *   --captwiki-mq-gap                              → space between items
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-marquee {
	--captwiki-mq-accent: #6d5efc;
	--captwiki-mq-accent-2: #00d4ff;
	--captwiki-mq-duration: 25s;
	--captwiki-mq-gap: 44px;
	position: relative;
	display: flex;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.captwiki-marquee *,
.captwiki-marquee *::before,
.captwiki-marquee *::after {
	box-sizing: border-box;
}

/* ── Scroll engine ─────────────────────────────────────── */
.captwiki-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	animation: captwiki-marquee-scroll var( --captwiki-mq-duration ) linear infinite;
	will-change: transform;
}

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

.captwiki-marquee.is-pause:hover .captwiki-marquee__track {
	animation-play-state: paused;
}

.captwiki-marquee__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex-shrink: 0;
	gap: var( --captwiki-mq-gap );
	padding-right: var( --captwiki-mq-gap );
}

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

/* ── Items ─────────────────────────────────────────────── */
.captwiki-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
	transition: color 0.25s ease, background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.captwiki-marquee__item-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	line-height: 1;
}

.captwiki-marquee__item-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-marquee__item-icon i {
	font-size: inherit;
	font-style: normal;
}

.captwiki-marquee__text {
	display: inline-block;
	line-height: 1.3;
}

/* ── Separator ─────────────────────────────────────────── */
.captwiki-marquee__sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 8px;
	line-height: 1;
	color: var( --captwiki-mq-accent );
	opacity: 0.7;
}

.captwiki-marquee__sep svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-marquee__sep i {
	font-size: inherit;
	font-style: normal;
}

/* ── Edge fade ─────────────────────────────────────────── */
.captwiki-marquee.is-fade {
	-webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 9%, #000 91%, transparent 100% );
	mask-image: linear-gradient( 90deg, transparent 0, #000 9%, #000 91%, transparent 100% );
}

/* Respect reduced-motion: stop the loop, let content rest. */
@media ( prefers-reduced-motion: reduce ) {
	.captwiki-marquee__track {
		animation: none;
		transform: none;
	}
}