/**
 * SFW Marquee Carousel – Basis-Layout, Keyframes, Fade-Mask.
 *
 * Die konkreten Werte (Höhe, Gap, Dauer, Fade-Breite, Ausrichtung) kommen als
 * CSS-Custom-Properties aus den Elementor-Controls (inline via Selectors).
 * Die Loop-Distanz (--sfw-marquee-distance) setzt marquee.js nach der Messung
 * von Set A; erst dann startet die Animation (Klasse .is-ready).
 */

.sfw-marquee {
	position: relative;
	overflow: hidden;
	--sfw-marquee-distance: 0px;
}

.sfw-marquee__track {
	display: flex;
	align-items: var(--sfw-marquee-align, center);
	width: max-content;
	gap: var(--sfw-marquee-gap, 24px);
}

/* Animation erst, wenn JS die Distanz gemessen und das Set dupliziert hat –
   verhindert Sprünge/Lücken vor dem Init und ohne JavaScript. */
.sfw-marquee.is-ready .sfw-marquee__track {
	animation: sfw-marquee-scroll var(--sfw-marquee-duration, 30s) linear infinite;
}

.sfw-marquee[data-direction="right"] .sfw-marquee__track {
	animation-direction: reverse;
}

.sfw-marquee.is-paused .sfw-marquee__track {
	animation-play-state: paused;
}

@keyframes sfw-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--sfw-marquee-distance)));
	}
}

.sfw-marquee__item {
	flex: 0 0 auto;
	line-height: 0;
}

.sfw-marquee__item a {
	display: block;
	line-height: 0;
}

.sfw-marquee__item img {
	display: block;
	height: var(--sfw-marquee-img-height, 100px);
	width: auto;
	max-width: none;
	object-fit: cover;
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Weicher Ein-/Ausgang an beiden Seiten (Fade Mask). */
.sfw-marquee--fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--sfw-marquee-fade, 10%),
		#000 calc(100% - var(--sfw-marquee-fade, 10%)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--sfw-marquee-fade, 10%),
		#000 calc(100% - var(--sfw-marquee-fade, 10%)),
		transparent 100%
	);
}

/* Accessibility: Bewegung komplett stoppen statt nur verlangsamen. */
@media (prefers-reduced-motion: reduce) {
	.sfw-marquee .sfw-marquee__track {
		animation: none !important;
	}
}