/**
 * AgileTix Slider — logo marquee.
 *
 * No JavaScript is involved. Two identical tracks sit side by side inside an
 * overflow-hidden viewport, and both translate left by exactly 100% of their
 * own width. At the moment track one finishes leaving the frame, track two is
 * back at its starting offset, so the loop restarts with no visible seam.
 *
 * Only `transform` is animated, which the browser can run on the compositor
 * without layout or paint work on the main thread. That matters on a page
 * that scrolls: a marquee driven by JavaScript timers competes with scrolling
 * for the main thread, and this one does not.
 */

.atxrs-marquee {
	--atxrs-logo-h: 56px;
	--atxrs-gap: 56px;
	--atxrs-duration: 40s;

	position: relative;
	width: 100%;
	overflow: hidden;
}

.atxrs-marquee__viewport {
	display: flex;
	width: 100%;
	overflow: hidden;
}

.atxrs-marquee__track {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: var( --atxrs-gap );
	/* Keeps the spacing even across the seam between the two tracks. */
	padding: 0 0 0 var( --atxrs-gap );
	margin: 0;
	list-style: none;
	min-width: max-content;
	animation: atxrs-marquee-scroll var( --atxrs-duration ) linear infinite;
	will-change: transform;
}

.atxrs-marquee--align-baseline .atxrs-marquee__track {
	align-items: baseline;
}

@keyframes atxrs-marquee-scroll {
	from { transform: translate3d( 0, 0, 0 ); }
	to   { transform: translate3d( -100%, 0, 0 ); }
}

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

.atxrs-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	height: var( --atxrs-logo-h );
}

/**
 * SPECIFICITY IS LOAD-BEARING HERE.
 *
 * Elementor ships a global image reset:
 *
 *     .elementor img { height: auto; max-width: 100%; }   -> (0,1,1)
 *
 * A bare `.atxrs-marquee__logo` selector is (0,1,0) and LOSES that fight, so
 * `height` silently reverts to `auto` and every logo renders at its natural
 * pixel size. Qualifying with the wrapper class takes this to (0,2,0), which
 * beats the reset without resorting to !important.
 *
 * This is also why setting a max-height on the shortcode container does not
 * help: once the image has an intrinsic height, a container cap only clips it,
 * it does not scale it. The image itself has to be constrained.
 */
.atxrs-marquee .atxrs-marquee__logo {
	display: block;
	height: var( --atxrs-logo-h );
	width: auto;
	max-height: var( --atxrs-logo-h );
	max-width: var( --atxrs-logo-max-w, none );
	object-fit: contain;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

/**
 * Escape hatch. Some themes use !important in their image reset, which no
 * amount of specificity can beat. Add the `atxrs-force-size` class to the
 * slider's Custom CSS target, or set this class on the wrapper via a filter.
 */
.atxrs-marquee.atxrs-force-size .atxrs-marquee__logo {
	height: var( --atxrs-logo-h ) !important;
	width: auto !important;
	max-height: var( --atxrs-logo-h ) !important;
	max-width: var( --atxrs-logo-max-w, none ) !important;
}

.atxrs-marquee__link {
	display: block;
	line-height: 0;
}

/* Logo treatments. */
.atxrs-marquee.atxrs-marquee--logo-grayscale .atxrs-marquee__logo {
	filter: grayscale( 100% );
	opacity: 0.7;
}

.atxrs-marquee.atxrs-marquee--logo-grayscale-hover .atxrs-marquee__logo {
	filter: grayscale( 100% );
	opacity: 0.65;
}

.atxrs-marquee--logo-grayscale-hover .atxrs-marquee__item:hover .atxrs-marquee__logo,
.atxrs-marquee--logo-grayscale-hover .atxrs-marquee__link:focus-visible .atxrs-marquee__logo {
	filter: grayscale( 0% );
	opacity: 1;
}

/* Pause on hover, and always on keyboard focus so a link cannot slide out
   from under someone tabbing through the logos. */
.atxrs-marquee--pause-hover:hover .atxrs-marquee__track,
.atxrs-marquee:focus-within .atxrs-marquee__track {
	animation-play-state: paused;
}

/* Edge fade. mask-image is progressive: browsers without it simply show hard
   edges, which is a cosmetic difference, not a broken layout. */
.atxrs-marquee--fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 8%,
		#000 92%,
		transparent 100%
	);
}

.atxrs-marquee__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/**
 * Reduced motion: stop the animation entirely and turn the strip into
 * something the visitor scrolls themselves. The duplicate track is removed so
 * the logo list is not repeated for someone reading it manually.
 */
@media ( prefers-reduced-motion: reduce ) {
	.atxrs-marquee__track {
		animation: none;
	}

	.atxrs-marquee__track[aria-hidden="true"] {
		display: none;
	}

	.atxrs-marquee__viewport {
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.atxrs-marquee__item {
		scroll-snap-align: center;
	}
}

/* Print: no motion, wrap the logos onto the page. */
@media print {
	.atxrs-marquee__track {
		animation: none;
		flex-wrap: wrap;
	}

	.atxrs-marquee__track[aria-hidden="true"] {
		display: none;
	}

	.atxrs-marquee {
		overflow: visible;
	}
}