/*
 * Brands Marquee — pure-CSS infinite-loop strip of brand logos.
 *
 * Same animation pattern as Reviews Marquee: cards rendered twice in DOM,
 * keyframes translate -50% on the track for seamless loop.
 *
 * Default treatment: B&W (filter: grayscale) + reduced opacity at idle,
 * full color + full opacity on per-item hover. Toggleable.
 */

.sia-bm {
	/* `--marquee-duration` is set inline by `assets/js/marquee-speed.js`
	   based on the px-per-second PPS config + measured track size. The
	   30s fallback only matters before the JS runs (tiny FOUC window). */
	--marquee-duration:      30s;
	--sia-bm-idle-opacity:   1;
	--sia-bm-hover-opacity:  1;

	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

.sia-bm__track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	will-change: transform;
}

.sia-bm__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	color: inherit;
	text-decoration: none;
	/* Row height = the logo box height. Driven by a variable, NOT by a literal
	   the Elementor control has to out-specify — see the note on .sia-bm__logo. */
	height: var(--sia-bm-logo-h, 60px);
	opacity: var(--sia-bm-idle-opacity);
	transition: opacity 0.3s ease, filter 0.3s ease, transform 0.2s ease;
}

.sia-bm__item:hover {
	opacity: var(--sia-bm-hover-opacity);
	transform: scale(1.04);
}

/* Every dimension here is a VARIABLE with a fallback, and the Logo style
   controls set the variables on the widget wrapper rather than re-declaring
   the properties. Two reasons this matters (v5.1.3):
     1. No specificity contest. The old literals lived here AND in a hardcoded
        `style` attribute on the <img>; an inline style attribute beats every
        stylesheet, so Max width / Max height / Image fit were inert no matter
        what Elementor generated. Same failure the Marquee icon had in v4.25.1.
     2. `max-height` outranks `height`. Even after removing the inline style, a
        literal `max-height: 60px` here would have clamped the logo whenever the
        control asked for anything taller. */
/* Compound selector + `!important`, both load-bearing — see v5.1.4. Elementor's
   own frontend reset ships `.elementor img { max-width: 100%; height: auto }`
   at specificity (0,1,1), which outranks a bare `.sia-bm__logo` (0,1,0). That
   silently clamped every logo to 100% and made Max width look dead while Max
   height still worked, because the reset has no `max-height` to collide with.
   Themes are worse: WoodMart and Blocksy both ship their own img rules, and
   sia-discounts leaks `body [class*=" sia-"] img` (0,1,2).

   `!important` here does NOT lock the user out — every value is a variable the
   Logo style controls set on the widget wrapper, so their settings still flow
   straight through. That is the whole point of routing sizing through vars. */
.sia-bm .sia-bm__logo {
	display: block;
	max-width: var(--sia-bm-logo-w, 140px) !important;
	max-height: var(--sia-bm-logo-h, 60px) !important;
	width: auto !important;
	height: auto !important;
	object-fit: var(--sia-bm-fit, contain);
	transition: filter 0.3s ease;
}

/* ─── Direction: HORIZONTAL LEFT (default) ─── */

.sia-bm--dir-left .sia-bm__track {
	animation: sia-bm-scroll-left var(--marquee-duration) linear infinite;
}

@keyframes sia-bm-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--marquee-translate, -50%)); }
}

/* ─── Direction: HORIZONTAL RIGHT ─── */

.sia-bm--dir-right .sia-bm__track {
	animation: sia-bm-scroll-right var(--marquee-duration) linear infinite;
}

@keyframes sia-bm-scroll-right {
	from { transform: translateX(var(--marquee-translate, -50%)); }
	to   { transform: translateX(0); }
}

/* ─── Direction: VERTICAL UP / DOWN ─── */

.sia-bm--dir-up .sia-bm,
.sia-bm--dir-down .sia-bm {
	height: 400px;
}

.sia-bm--dir-up .sia-bm__track,
.sia-bm--dir-down .sia-bm__track {
	flex-direction: column;
	width: auto;
	height: max-content;
	align-items: center;
}

.sia-bm--dir-up .sia-bm__track {
	animation: sia-bm-scroll-up var(--marquee-duration) linear infinite;
}

@keyframes sia-bm-scroll-up {
	from { transform: translateY(0); }
	to   { transform: translateY(var(--marquee-translate, -50%)); }
}

.sia-bm--dir-down .sia-bm__track {
	animation: sia-bm-scroll-down var(--marquee-duration) linear infinite;
}

@keyframes sia-bm-scroll-down {
	from { transform: translateY(var(--marquee-translate, -50%)); }
	to   { transform: translateY(0); }
}

/* ─── Pause on hover ─── */

.sia-bm--pause-yes:hover .sia-bm__track {
	animation-play-state: paused;
}

/* ─── Edge fade (alpha mask) ─── */

.sia-bm--fade-yes .sia-bm {
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.sia-bm--fade-yes.sia-bm--dir-up .sia-bm,
.sia-bm--fade-yes.sia-bm--dir-down .sia-bm {
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* ─── Solid color fade ───
   When `bm_fade_type = solid`, wrapper gets `sia-bm--ft-solid`. We disable
   the alpha mask and overlay two gradient pseudo-elements at the edges
   (left/right for horizontal, top/bottom for vertical), fading the logos
   into the user-chosen `--sia-bm-fade-color`. */
.sia-bm--ft-solid.sia-bm--fade-yes .sia-bm {
	-webkit-mask-image: none;
	        mask-image: none;
}
.sia-bm--ft-solid.sia-bm--fade-yes .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes .sia-bm::after {
	content: '';
	position: absolute;
	pointer-events: none;
	z-index: 5;
}
/* Horizontal */
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-left  .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-left  .sia-bm::after,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-right .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-right .sia-bm::after {
	top: 0;
	bottom: 0;
	width: 8%;
}
/* 4-stop aggressive falloff (color 0→20%, transition 20→80%, transparent
   80→100%) — same rationale as marquee/marquee.css. */
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-left  .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-right .sia-bm::before {
	left: 0;
	background: linear-gradient(
		to right,
		var(--sia-bm-fade-color, #fff) 0%,
		var(--sia-bm-fade-color, #fff) 20%,
		transparent 80%,
		transparent 100%
	);
}
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-left  .sia-bm::after,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-right .sia-bm::after {
	right: 0;
	background: linear-gradient(
		to left,
		var(--sia-bm-fade-color, #fff) 0%,
		var(--sia-bm-fade-color, #fff) 20%,
		transparent 80%,
		transparent 100%
	);
}
/* Vertical */
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-up   .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-up   .sia-bm::after,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-down .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-down .sia-bm::after {
	left: 0;
	right: 0;
	height: 8%;
}
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-up   .sia-bm::before,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-down .sia-bm::before {
	top: 0;
	background: linear-gradient(
		to bottom,
		var(--sia-bm-fade-color, #fff) 0%,
		var(--sia-bm-fade-color, #fff) 20%,
		transparent 80%,
		transparent 100%
	);
}
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-up   .sia-bm::after,
.sia-bm--ft-solid.sia-bm--fade-yes.sia-bm--dir-down .sia-bm::after {
	bottom: 0;
	background: linear-gradient(
		to top,
		var(--sia-bm-fade-color, #fff) 0%,
		var(--sia-bm-fade-color, #fff) 20%,
		transparent 80%,
		transparent 100%
	);
}

/* ─── B&W → color on hover ─── */

.sia-bm--gray-yes .sia-bm__logo {
	filter: grayscale(1);
}

.sia-bm--gray-yes .sia-bm__item:hover .sia-bm__logo {
	filter: grayscale(0);
}

/* ─── Editor placeholder ─── */

.sia-bm--placeholder {
	padding: 32px;
	text-align: center;
	background: #fafafa;
	border: 1px dashed #d4d4d8;
	border-radius: 8px;
	color: #6b7280;
	font-size: 14px;
}

/* ─── Reduced motion ─── */

@media (prefers-reduced-motion: reduce) {
	.sia-bm__track {
		animation: none !important;
	}
}