/*
 * =============================================================
 * Vio Image Marquee Widget
 *
 * Edge gradient uses CSS mask-image — works transparently on any
 * background colour without needing to know what that colour is.
 * =============================================================
 */

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

/* ── Edge gradient (CSS mask — background-agnostic) ────────── */
/*
 * --vio-imarquee-fade controls the width of each fade zone.
 * Default: 10%. Overridden per-breakpoint via Elementor selectors.
 */
.vio-imarquee--gradient {
	--vio-imarquee-fade: 10%;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--vio-imarquee-fade),
		black calc(100% - var(--vio-imarquee-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black var(--vio-imarquee-fade),
		black calc(100% - var(--vio-imarquee-fade)),
		transparent 100%
	);
}

/* ── Scrolling track ───────────────────────────────────────── */
.vio-imarquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: vio-imarquee-left var(--vio-imarquee-speed, 30s) linear infinite;
}

.vio-imarquee--dir-left  .vio-imarquee__track { animation-name: vio-imarquee-left;  }
.vio-imarquee--dir-right .vio-imarquee__track { animation-name: vio-imarquee-right; }

/*
 * --vio-imarquee-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-imarquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX( var(--vio-imarquee-translate, -50%) ); }
}

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

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

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

/* ── Individual image items ────────────────────────────────── */
.vio-imarquee__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.vio-imarquee__item a {
	display: inline-flex;
	align-items: center;
}

/* ── Image ─────────────────────────────────────────────────── */
.vio-imarquee__img {
	display: block;
	width: auto;        /* overridden by Image Width control when set */
	max-width: none;    /* prevent theme CSS squashing width */
	object-fit: contain;
}

/* ── Accessibility: respect reduced-motion preference ──────── */
@media (prefers-reduced-motion: reduce) {
	.vio-imarquee {
		overflow-x: auto;
	}
	.vio-imarquee__track {
		animation: none;
	}
}