/*
 * Defaults for every --oms-ticker-* custom property are supplied as the
 * second argument of var() at each usage site below, NOT as a block
 * declared here on .oms-logo-ticker. Elementor's per-instance Style tab
 * overrides are written to the *ancestor* .elementor-element-{id} wrapper
 * so they can cascade down via inheritance; declaring a same-named
 * default directly on this element (a descendant of that wrapper) would
 * take precedence over the inherited value at this exact element
 * regardless of the ancestor rule's specificity, silently breaking every
 * Style control on this widget. Do not add a defaults block here.
 */

.oms-logo-ticker__viewport {
	overflow: hidden;
	width: 100%;
}

.oms-ticker-edge-fade-yes .oms-logo-ticker__viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--oms-ticker-fade-width, 80px),
		#000 calc(100% - var(--oms-ticker-fade-width, 80px)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--oms-ticker-fade-width, 80px),
		#000 calc(100% - var(--oms-ticker-fade-width, 80px)),
		transparent 100%
	);
}

.oms-logo-ticker__marquee {
	display: flex;
	align-items: center;
	width: max-content;
	animation: oms-logo-ticker-scroll var(--oms-ticker-duration, 30s) linear infinite;
}

.oms-ticker-direction-right .oms-logo-ticker__marquee {
	animation-direction: reverse;
}

.oms-ticker-pause-on-hover-yes .oms-logo-ticker__viewport:hover .oms-logo-ticker__marquee,
.oms-ticker-pause-on-hover-yes .oms-logo-ticker__viewport:focus-within .oms-logo-ticker__marquee {
	animation-play-state: paused;
}

/*
 * The gap between the real and clone track lives here, as this track's own
 * trailing padding-right, rather than as a `gap` on .oms-logo-ticker__marquee
 * between its two <ul> children. That makes each track's own rendered box
 * exactly "its logos + one trailing gap" wide, so the marquee is precisely
 * two equal-width boxes placed edge to edge - which is what lets the
 * translateX(-50%) keyframe below land exactly on the clone track's start.
 * With the gap on the marquee instead (the previous approach), the marquee's
 * total width was track+gap+track, and 50% of that is track + half a gap,
 * not track + gap - undershooting the reset point by half a gap's width
 * every cycle. That's a fixed, viewport-independent error, but it only reads
 * as a visible "gap, then sudden pop" once the viewport is wide enough that
 * the seam itself is in frame at the reset moment (confirmed reported on
 * screens over ~2500px) - narrower viewports have already scrolled the seam
 * off-screen by the time it resets, hiding the same underlying miscalculation.
 */
.oms-logo-ticker__track {
	display: flex;
	align-items: center;
	gap: var(--oms-ticker-gap, 64px);
	list-style: none;
	margin: 0;
	padding: 0 var(--oms-ticker-gap, 64px) 0 0;
}

.oms-logo-ticker__logo {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.oms-logo-ticker__logo a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.oms-logo-ticker__logo img {
	display: block;
	height: 40px;
	width: auto;
	max-width: none;
	transition: transform var(--oms-ticker-hover-duration, 200ms) ease, filter var(--oms-ticker-hover-duration, 200ms) ease;
}

.oms-logo-ticker__logo-mask {
	display: block;
	height: 40px;
	width: auto;
	aspect-ratio: var(--oms-logo-aspect, 1);
	background-color: var(--oms-ticker-mono-color, #ffffff);
	-webkit-mask-image: var(--oms-logo-mask-url);
	mask-image: var(--oms-logo-mask-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: transform var(--oms-ticker-hover-duration, 200ms) ease;
}

.oms-ticker-enlarge-on-hover-yes .oms-logo-ticker__logo:hover img,
.oms-ticker-enlarge-on-hover-yes .oms-logo-ticker__logo a:focus img,
.oms-ticker-enlarge-on-hover-yes .oms-logo-ticker__logo:hover .oms-logo-ticker__logo-mask,
.oms-ticker-enlarge-on-hover-yes .oms-logo-ticker__logo a:focus .oms-logo-ticker__logo-mask {
	transform: scale(var(--oms-ticker-hover-scale, 1.15));
}

@keyframes oms-logo-ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* The marquee contains two identical tracks back to back, so
		   translating exactly half its total width snaps back to a
		   visually identical frame - the loop reads as seamless. */
		transform: translateX(-50%);
	}
}

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