/* Logo Carousel Widget */
.awyb-logo-carousel {
	display: flex;
	flex-direction: column;
	gap: 24px;
	overflow: hidden;
	width: 100%;
}

/* Row Container */
.awyb-logo-carousel__row {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Fade edges */
.awyb-logo-carousel__row::before,
.awyb-logo-carousel__row::after {
	content: "";
	position: absolute;
	top: 0;
	width: 100px;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

.awyb-logo-carousel__row::before {
	left: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.awyb-logo-carousel__row::after {
	right: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

/* Track - holds duplicated logos for seamless loop */
.awyb-logo-carousel__track {
	display: flex;
	gap: 32px;
	width: max-content;
}

/* Right to Left animation (top row) */
.awyb-logo-carousel__track--rtl {
	animation: scrollRTL var(--logo-carousel-duration, 30s) linear infinite;
}

/* Left to Right animation (bottom row) */
.awyb-logo-carousel__track--ltr {
	animation: scrollLTR var(--logo-carousel-duration, 30s) linear infinite;
}

/* Pause animation on hover */
.awyb-logo-carousel:hover .awyb-logo-carousel__track {
	animation-play-state: paused;
}

/* Individual Logo */
.awyb-logo-carousel__logo {
	flex: 0 0 auto;
	width: 180px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.awyb-logo-carousel__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Keyframes - uses JS-calculated --scroll-distance for seamless loop */
@keyframes scrollRTL {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(var(--scroll-distance, 50%) * -1));
	}
}

@keyframes scrollLTR {
	0% {
		transform: translateX(calc(var(--scroll-distance, 50%) * -1));
	}
	100% {
		transform: translateX(0);
	}
}