/**
 * GEA Marquee — Widget Styles
 *
 * Covers:
 *  1. Wrapper — overflow clip, position context
 *  2. Track   — flex row, no-wrap, gap handled via Elementor selector
 *  3. Items   — flex children, shrink prevention
 *  4. Reduced-motion static fallback
 *  5. prefers-reduced-motion media query bypass
 *
 * GSAP writes transform:translateX() directly onto .gea-marquee-track.
 * The wrapper clips the overflow so only the viewport portion is visible.
 * No CSS animation properties are used — GSAP owns every frame.
 *
 * @package GsapElementorAnimator
 */

/* ── 1. Wrapper ──────────────────────────────────────────────────────────── */

.gea-marquee-wrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* Default height — overridden by Elementor height control. */
	min-height: 2em;
	display: flex;
	align-items: center;
}

/* ── 2. Track ────────────────────────────────────────────────────────────── */

/**
 * The track is a flex row that GSAP translates horizontally.
 * will-change is NOT set here — it is applied by gea-marquee.js in
 * initInstance() before the timeline starts, and removed in destroyInstance().
 * This prevents unnecessary GPU layer promotion on elements that have not
 * yet been initialised or on pages where the marquee is hidden.
 *
 * flex-wrap:nowrap is critical — items must stay on a single line so the
 * scroll width is wider than the wrapper, allowing the loop to work.
 */
.gea-marquee-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	/* gap is set by the Elementor selector {{WRAPPER}} .gea-marquee-track */
	/* will-change is set/removed by JS to avoid unnecessary GPU layers */
	backface-visibility: hidden;
}

/* ── 3. Items ────────────────────────────────────────────────────────────── */

/**
 * Items must not shrink — they need their natural content width so the JS
 * can measure offsetWidth reliably. flex-shrink:0 prevents the flex
 * algorithm from compressing items to fit the container.
 */
.gea-marquee-item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	/* User-set padding is applied via Elementor selectors. */
	box-sizing: border-box;
	/* Prevent pointer events on aria-hidden clones from stealing focus. */
}

.gea-marquee-item[aria-hidden="true"] {
	pointer-events: none;
	user-select: none;
}

/**
 * Inline elements inside items (images, icons, spans) should not
 * cause unexpected line breaks or overflow.
 */
.gea-marquee-item img,
.gea-marquee-item svg {
	display: inline-block;
	vertical-align: middle;
	max-height: 100%;
	width: auto;
}

/* ── 4. Reduced-motion static fallback ───────────────────────────────────── */

/**
 * When prefers-reduced-motion is active, JS adds .gea-mq-reduced and skips
 * all animation. The wrapper becomes a static scrollable container instead.
 * Horizontal scroll lets users access long content without motion.
 */
.gea-marquee-wrapper.gea-mq-reduced {
	overflow-x: auto;
	overflow-y: hidden;
}

.gea-marquee-wrapper.gea-mq-reduced .gea-marquee-track {
	will-change: auto;
	transform: none !important;
}

/* ── 5. prefers-reduced-motion CSS-level bypass ──────────────────────────── */

/**
 * Belt-and-suspenders: even if JS hasn't run yet (or failed), the CSS
 * media query prevents any accidental animation from showing.
 */
@media ( prefers-reduced-motion: reduce ) {
	.gea-marquee-track {
		will-change: auto;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}

	.gea-marquee-wrapper {
		overflow-x: auto;
	}
}

/* ── 6. Editor preview tweaks ────────────────────────────────────────────── */

/**
 * In the Elementor editor the preview iframe may constrain the wrapper width
 * before GSAP measures it. This ensures the wrapper takes its full column
 * width regardless of how Elementor's panel is positioned.
 */
.elementor-editor-active .gea-marquee-wrapper {
	max-width: 100%;
}

/* ── 7. Screen-reader-only utility ──────────────────────────────────────── */

/**
 * Visually hides the accessible text fallback while keeping it available to
 * assistive technology. Uses clip-path:inset(50%) — the modern replacement
 * for the deprecated clip:rect() technique.
 *
 * Defined here so gea-marquee.css is self-contained and does not depend on
 * gea-text-reveal.css being loaded on the same page.
 */
.gea-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}