/* ==========================================================================
   Image Marquee for Elementor
   The track holds N copies of the image set. JS sets --imq-set-w (the exact
   width of ONE set, gap included) and clones until the track is wider than
   the viewport plus one set. The animation always travels exactly one set,
   so the loop is seamless at any screen width.
   ========================================================================== */

.imq-wrap {
	--imq-fade: 120px;
	position: relative;
	width: 100%;
}

.imq-full-width {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

.imq-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: 28px;
}

.imq-fade .imq-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--imq-fade),
		#000 calc( 100% - var(--imq-fade) ),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--imq-fade),
		#000 calc( 100% - var(--imq-fade) ),
		transparent 100%
	);
}

.imq-track {
	--imq-item-w: 320px;
	--imq-item-h: 232px;
	--imq-tilt-scale: 1;
	--imq-set-w: 0px;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: 40px;
	width: max-content;
	will-change: transform;
}

/* Animation only starts once JS has measured a real set width. */
.imq-ready .imq-track {
	animation: imq-scroll var(--imq-duration, 40s) linear infinite;
}

.imq-dir-right .imq-track {
	animation-direction: reverse;
}

@keyframes imq-scroll {
	from {
		transform: translate3d( 0, 0, 0 );
	}
	to {
		transform: translate3d( calc( -1 * var(--imq-set-w) ), 0, 0 );
	}
}

.imq-pause-hover .imq-viewport:hover .imq-track,
.imq-pause-hover .imq-viewport:focus-within .imq-track {
	animation-play-state: paused;
}

/* ---------- Items -------------------------------------------------------- */

.imq-item {
	flex: 0 0 auto;
	width: var( --imq-w, var( --imq-item-w ) );
	height: var( --imq-item-h );
	overflow: hidden;
	transform: rotate( calc( var(--imq-rot, 0deg) * var(--imq-tilt-scale) ) );
	backface-visibility: hidden;
}

.imq-item a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.imq-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Natural width mode: height is fixed, width follows the aspect ratio. */
.imq-auto-width .imq-item {
	width: auto;
}

.imq-auto-width .imq-item img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

/* ---------- Measuring state (JS only, never painted) --------------------- */

.imq-measuring .imq-track {
	animation: none !important;
	transform: none !important;
}

.imq-measuring .imq-item {
	transform: none !important;
}

/* ---------- Reduced motion ----------------------------------------------- */

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

	.imq-viewport {
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}
}