/* Expereo Image Marquee — a track of fixed-height images that never stops moving. */

.eim {
	--eim-height: 420px;
	--eim-gap: 16px;
	--eim-radius: 12px;
	/* Pixels per second. The script turns this into a duration once it has
	   measured the images, so speed stays the same however many there are. */
	--eim-speed: 60;
	/* Set by the script: the width of one set of images, gap included. */
	--eim-distance: 0px;
	--eim-duration: 0s;
	/* reverse = left to right (as in the reference video), normal = right to left. */
	--eim-direction: reverse;
	/* 1 = every image full size. Lower and images shrink towards the edges. */
	--eim-edge-scale: 1;
	overflow: hidden;
	width: 100%;
}

.eim__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: eim-move var(--eim-duration) linear infinite;
	animation-direction: var(--eim-direction);
	will-change: transform;
}

/* Held until the script has measured, so nothing starts at the wrong speed. */
.eim:not(.is-ready) .eim__track {
	animation-play-state: paused;
}

.eim__set {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eim__item {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	/* The gap sits after every image, including the last in a set, so a set is
	   exactly one loop long and the join is invisible. */
	margin-right: var(--eim-gap);
}

/* Fixed height, natural width. The width and height attributes WordPress
   prints give the browser the ratio before the file arrives. Written as
   ".eim .eim__img" because Elementor's own ".elementor img" rule (height:auto,
   max-width:100%, no radius) is otherwise more specific and wins. */
.eim .eim__img {
	display: block;
	height: var(--eim-height);
	width: auto;
	max-width: none;
	border-radius: var(--eim-radius);
	object-fit: cover;
}

/* Travels exactly one set. "normal" runs right to left, "reverse" left to right. */
@keyframes eim-move {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--eim-distance)), 0, 0); }
}

.eim-pausable-yes .eim:hover .eim__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.eim__track {
		animation: none;
	}
}