/* =================================================================
   File:    inc/elementor/widgets/brand-slider/style.css
   Purpose: Brand Slider — marquee + carousel variants.
   ================================================================= */

.liqui-brands { padding-block: var(--space-5); }

/* Common brand chip */
.liqui-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	padding: var(--space-3) var(--space-5);
	color: var(--c-ink-muted);
	font-size: var(--fs-md);
	font-weight: var(--fw-semi);
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.liqui-brand img { max-height: 44px; width: auto; object-fit: contain; }
.liqui-brand:hover { color: var(--c-accent); transform: translateY(-2px); }
.liqui-brand.is-grayscale img { filter: grayscale(1); opacity: 0.7; }
.liqui-brand.is-grayscale:hover img { filter: grayscale(0); opacity: 1; }

/* Marquee mode — CSS animation, infinite loop via duplicated track */
.liqui-brands__marquee {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.liqui-brands__track {
	display: flex;
	gap: var(--space-6);
	align-items: center;
	width: max-content;
	animation: liqui-brand-marquee var(--marquee-dur, 30s) linear infinite;
}
.liqui-brands__marquee:hover .liqui-brands__track { animation-play-state: paused; }
@keyframes liqui-brand-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
[dir="rtl"] @keyframes liqui-brand-marquee {
	0%   { transform: translateX(0); }
	100% { transform: translateX(50%); }
}

/* Reduced motion — stop the marquee, wrap as flex row */
html[data-reduced-motion] .liqui-brands__track { animation: none; flex-wrap: wrap; justify-content: center; }

/* Carousel mode slide */
.liqui-brands__slide { display: flex; align-items: center; justify-content: center; }