/**
 * Flavors Marquee - seamless infinite scroller (pure CSS, no JS).
 * Two identical sets translate by -50% minus half the inter-set gap so the
 * loop is seamless. Speed / gap / sizing come from Elementor control selectors
 * as CSS custom properties; this file is static and HTTP-cacheable.
 */

.flavor-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.flavor-mq-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	gap: var(--flavor-mq-gap, 48px);
	animation: flavor-mq-scroll var(--flavor-mq-duration, 30s) linear infinite;
	will-change: transform;
}

.flavor-mq-set {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--flavor-mq-gap, 48px);
}

@keyframes flavor-mq-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - (var(--flavor-mq-gap, 48px) / 2))); }
}

.flavor-mq-dir-right .flavor-mq-track { animation-direction: reverse; }
.flavor-mq-pause:hover .flavor-mq-track { animation-play-state: paused; }

.flavor-mq-item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	transition: opacity .3s ease, filter .3s ease;
}

.flavor-mq-item img {
	display: block;
	width: auto;
	max-width: none;
}

.flavor-mq-link {
	display: inline-flex;
	align-items: center;
}

.flavor-mq-text {
	white-space: nowrap;
	line-height: 1;
}

/* Grayscale-until-hover (logo-wall style) */
.flavor-mq-gray .flavor-mq-item img { filter: grayscale(1); }
.flavor-mq-gray .flavor-mq-item:hover img { filter: grayscale(0); }

/* Faded edges */
.flavor-mq-fade {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.flavor-mq-track { animation: none; }
}