/*
 * Smooth Logo Marquee — Front-end Styles
 *
 * Provides the structural CSS for the marquee layout.
 * Per-instance animation settings (speed, direction, gap, height,
 * pause-on-hover, grayscale) are injected as inline <style> blocks by
 * PHP and are keyed to a unique class so multiple marquees coexist.
 *
 * Design goals:
 *   - GPU-accelerated via translate3d (forces compositor layer).
 *   - flex layout with fit-content width keeps logos at natural aspect ratios.
 *   - overflow: hidden on the outer container clips the scrolling track.
 *   - will-change: transform hints the browser to promote the element.
 */

/* ------------------------------------------------------------------
   Outer Container
   Clips the scrolling track. Full-width, no height restriction.
   ------------------------------------------------------------------ */
.slm-outer {
	position:   relative;
	overflow:   hidden;
	width:      100%;

	/* Prevent text selection while dragging or swiping. */
	user-select: none;
	-webkit-user-select: none;
}

/* ------------------------------------------------------------------
   Scrolling Track
   A single flex row that holds all .slm-set groups side-by-side.
   Width is fit-content so it expands to the total sum of its children.
   The CSS custom property --slm-set-width is written by marquee.js.
   ------------------------------------------------------------------ */
.slm-track {
	display:          flex;
	flex-wrap:        nowrap;
	align-items:      center;
	width:            fit-content;

	/* GPU acceleration: promote to its own compositor layer. */
	will-change:      transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	/*
	 * animation-name, animation-duration, and play-state are injected
	 * inline per instance by PHP.
	 * The timing-function and iteration-count are set here globally.
	 */
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state:      running;
}

/* ------------------------------------------------------------------
   Logo Set
   One group of logo images. The track contains the original set plus
   dynamically cloned sets added by marquee.js.
   ------------------------------------------------------------------ */
.slm-set {
	display:        flex;
	flex-wrap:      nowrap;
	align-items:    center;
	flex-shrink:    0;
}

/* ------------------------------------------------------------------
   Individual Logo Image
   max-height and horizontal margin (gap) are injected inline per instance.
   width: auto + height: auto preserves the natural aspect ratio.
   ------------------------------------------------------------------ */
.slm-logo {
	display:    block;
	width:      auto;
	height:     auto;
	flex-shrink: 0;

	/* Prevent blurry upscaling on high-dpi screens. */
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

/* ------------------------------------------------------------------
   Accessibility — Respect prefers-reduced-motion
   Stop the animation entirely for users who have requested reduced motion.
   ------------------------------------------------------------------ */
@media ( prefers-reduced-motion: reduce ) {
	.slm-track {
		animation: none !important;
	}
}