/*
 * =============================================================
 * Vio Marquee Text Widget
 * CSS-only animation — no JS required.
 * Speed is driven by the --vio-marquee-speed custom property
 * set as an inline style on .vio-marquee from the widget render.
 * =============================================================
 */

/* ── Outer wrapper ─────────────────────────────────────────── */
.vio-marquee {
	overflow: hidden;
	width: 100%;
}

/* ── Scrolling track ───────────────────────────────────────── */
/*
 * Two identical .vio-marquee__content copies sit side-by-side.
 * translateX(-50%) moves exactly one copy's width — creating a
 * seamless loop with no JS duplication logic required.
 */
.vio-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: vio-marquee-left var(--vio-marquee-speed, 20s) linear infinite;
}

/* Direction variants */
.vio-marquee--dir-left  .vio-marquee__track { animation-name: vio-marquee-left;  }
.vio-marquee--dir-right .vio-marquee__track { animation-name: vio-marquee-right; }

/*
 * --vio-marquee-translate is set by JS to exactly one copy's pixel width.
 * The -50% default handles the initial 2-copy render before JS runs.
 */
@keyframes vio-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX( var(--vio-marquee-translate, -50%) ); }
}

@keyframes vio-marquee-right {
	from { transform: translateX( var(--vio-marquee-translate, -50%) ); }
	to   { transform: translateX(0); }
}

/* ── Pause on hover ────────────────────────────────────────── */
.vio-marquee--pause-hover:hover .vio-marquee__track {
	animation-play-state: paused;
}

/* ── Content row ───────────────────────────────────────────── */
.vio-marquee__content {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* ── Individual text items ─────────────────────────────────── */
.vio-marquee__item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	/* typography controlled via Elementor Group_Control_Typography */
}

/* ── Separator line ────────────────────────────────────────── */
/*
 * width, height, margin-inline, background-color are all set
 * via Elementor's responsive controls — no defaults here that
 * would conflict with the panel values.
 */
.vio-marquee__separator {
	display: inline-block;
	flex-shrink: 0;
	align-self: center;
}

/* ── Accessibility: respect reduced-motion preference ──────── */
/*
 * Stop the animation and allow horizontal scrolling so all
 * content remains reachable without motion.
 */
@media (prefers-reduced-motion: reduce) {
	.vio-marquee {
		overflow-x: auto;
	}
	.vio-marquee__track {
		animation: none;
	}
}