/* ──────────────────────────────────────────────
   SIA Marquee — frontend
   Animation strategy: CSS @keyframes translateX from 0 to negative
   --sia-mq-set-width (one full original-set worth). Track holds N copies
   of the item set (computed by JS to fill viewport + minSetCount). When
   the keyframe completes, the second set has scrolled into the first
   set's position — visually identical, so loop is seamless.

   Speed control: JS sets `--sia-mq-duration` (in seconds) based on
   measured set width and user-configured px/sec speed. Browser handles
   the animation on the GPU compositor; pause/resume uses the built-in
   `animation-play-state` (doesn't restart the animation, just freezes it).
   ────────────────────────────────────────────── */

.sia-mq {
	--sia-mq-set-width: 100%;
	--sia-mq-duration: 30s;
	--sia-mq-fade-w: 80px;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.sia-mq * { box-sizing: border-box; }

/* Viewport — clips the track. Holds the optional edge fade pseudo-elements.
   `display: flex; align-items: center` ensures the track (inline-flex line box
   inside) is vertically centered against the viewport's height. Without
   this, the inline-baseline alignment of the track inside a block viewport
   left descender-room visible at the bottom and shifted the glyphs above
   the optical center — so users had to add asymmetric top padding to look
   centered. The flex centering removes that offset. */
.sia-mq__viewport {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: flex;
	align-items: center;
}

/* Track — holds N copies of the item set; this is the element that animates. */
.sia-mq__track {
	display: inline-flex;
	flex-wrap: nowrap;
	will-change: transform;
	animation: sia-mq-scroll var(--sia-mq-duration) linear infinite;
}

/* Each set — flex row of items, with consistent gap. Inline-flex so two
   adjacent sets in the track stay on the same line without wrapping. */
.sia-mq__set {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 40px;
	flex-shrink: 0;
	padding-right: 40px;  /* fallback gap between adjacent sets in case parent gap isn't honored */
}

/* Direction modifier — reverse swaps animation start/end, so the same
   keyframe scrolls right-to-left instead of left-to-right. */
.sia-mq--dir-right .sia-mq__track {
	animation-direction: reverse;
}

/* Animation — translateX from 0 to negative one set width (which equals
   100% / N for N sets in the track, but JS sets the explicit pixel value
   via the CSS variable for precision). */
@keyframes sia-mq-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--sia-mq-set-width)), 0, 0); }
}

/* Pause on hover — when the toggle is on, hovering the marquee freezes
   the animation in place. CSS `animation-play-state: paused` keeps the
   current frame; resume continues from the same point (no restart). */
.sia-mq--pause-hover-yes:hover .sia-mq__track {
	animation-play-state: paused;
}

/* Pause on focus inside — keyboard users tabbing into a linked item get
   the band paused so they can read each item before continuing. */
.sia-mq:focus-within .sia-mq__track {
	animation-play-state: paused;
}

/* Editor pause — JS adds .sia-mq--editor-paused inside Elementor editor
   when the `mq_pause_in_editor` setting is on. */
.sia-mq--editor-paused .sia-mq__track {
	animation-play-state: paused;
}

/* Reduced motion — fully halts the animation for users who set the
   prefers-reduced-motion media query. They see only the first set,
   static. Acceptable degradation: content is still readable. */
@media (prefers-reduced-motion: reduce) {
	.sia-mq__track {
		animation: none;
	}
}

/* ─── Items ─── */

.sia-mq__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	color: var(--sia-color-text, #1A1718);
	text-decoration: none;
	transition: color 0.18s ease, opacity 0.18s ease;
}
a.sia-mq__item {
	cursor: pointer;
}
a.sia-mq__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}
.sia-mq__text {
	display: inline-block;
	color: var(--sia-color-text, #1A1718);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* line-height: 1 (was 1.2 — caused asymmetric leading inside the glyph
	   box for uppercase-only text: descender room reserved but unused, so
	   the glyph rendered above the optical center of the box. Users had to
	   add more top padding than bottom to make the band feel centered.
	   With line-height: 1 the glyph fills the box and centers cleanly. */
	line-height: 1;
	transition: color 0.18s ease;
}
.sia-mq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--sia-color-primary, #c5ed3b);
	font-size: 16px;
	line-height: 0;
	flex-shrink: 0;
	transition: color 0.18s ease;
}
.sia-mq__icon i,
.sia-mq__icon svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.sia-mq__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.sia-mq__image {
	display: inline-block;
	height: 40px;
	width: auto;
	max-width: none;
	object-fit: contain;
	transition: opacity 0.18s ease;
}

/* ─── Edge fade — alpha mask on the marquee element ───
   Implementation: CSS `mask-image` with a horizontal alpha gradient applied
   to the .sia-mq element (full height including its padding). Edges become
   100% transparent so whatever sits behind the marquee (page bg, gradient,
   image, anything) shows through naturally — no need to color-match a fade
   overlay to the page bg.

   Selector note: Elementor's `prefix_class: 'sia-mq--fade-'` adds the class
   `sia-mq--fade-yes` to the WIDGET WRAPPER, not directly on `.sia-mq`. So
   the descendant selector `.sia-mq--fade-yes .sia-mq` reaches the marquee
   element correctly. Applying mask to the wrapper itself doesn't work
   because the wrapper has Elementor's own surrounding chrome.

   Browser support: Chrome 120+, Firefox 53+, Safari 15.4+ (with -webkit-
   prefix for older Safari/iOS). All evergreen browsers. */
.sia-mq--fade-yes .sia-mq {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--sia-mq-fade-w),
		black calc(100% - var(--sia-mq-fade-w)),
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--sia-mq-fade-w),
		black calc(100% - var(--sia-mq-fade-w)),
		transparent 100%
	);
}

/* ─── Solid color fade ───
   When the user picks "Solid color" fade type (via `mq_fade_type`), the
   class `sia-mq--ft-solid` is added to the wrapper. We disable the alpha
   mask (so what's behind doesn't show through) and overlay two gradient
   pseudo-elements at the left and right edges, fading the track contents
   into the user-chosen `--sia-mq-fade-color` (default #fff). */
.sia-mq--ft-solid.sia-mq--fade-yes .sia-mq {
	-webkit-mask-image: none;
	        mask-image: none;
}
.sia-mq--ft-solid.sia-mq--fade-yes .sia-mq::before,
.sia-mq--ft-solid.sia-mq--fade-yes .sia-mq::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--sia-mq-fade-w, 80px);
	pointer-events: none;
	z-index: 5;
}
/* 4-stop gradient (solid color from 0→20%, transition 20→80%, fully
   transparent 80→100%) — more aggressive falloff than a plain linear
   blend: the outer edge stays at full color longer and the inner
   side reaches transparent earlier, so the fade reads as a stronger
   "wall of color" at the edge rather than a smooth diffuse blur. */
.sia-mq--ft-solid.sia-mq--fade-yes .sia-mq::before {
	left: 0;
	background: linear-gradient(
		to right,
		var(--sia-mq-fade-color, #fff) 0%,
		var(--sia-mq-fade-color, #fff) 20%,
		transparent 80%,
		transparent 100%
	);
}
.sia-mq--ft-solid.sia-mq--fade-yes .sia-mq::after {
	right: 0;
	background: linear-gradient(
		to left,
		var(--sia-mq-fade-color, #fff) 0%,
		var(--sia-mq-fade-color, #fff) 20%,
		transparent 80%,
		transparent 100%
	);
}