/**
 * Values Carousel Block - Frontend Styles
 *
 * Infinite marquee animation. CSS custom property --carousel-speed
 * controls the loop duration (default 30s).
 *
 * @package Ably_Blocks
 */

.qs-values-strip {
	overflow: hidden;
	width: 100%;
	padding: var(--semantics-spacing-large, 40px) 0;
}

/* ── Background variants ────────────────────────────────────── */
.qs-values-strip.bg-white {
	background-color: #ffffff;
}

.qs-values-strip.bg-secondary {
	background-color: var(--semantics-colors-fill-background-secondary, #f8f7f8);
}

.qs-values-strip.bg-purpura {
	background-color: var(--semantics-colors-fill-accent-purpura, #6D28D9);
}

.qs-values-strip.bg-ponkan {
	background-color: var(--semantics-colors-fill-accent-ponkan, #FFA301);
}

/* ── Track ──────────────────────────────────────────────────── */
.qs-values-strip__track {
	display: flex;
	width: max-content;
}

.qs-values-strip__set {
	display: flex;
	gap: 32px;
	align-items: center;
	padding-right: 32px;
	flex-shrink: 0;
}

.qs-value {
	height: 80px;
	width: auto;
	flex-shrink: 0;
	object-fit: contain;
	display: block;
}

/* Move by exactly 1 set (25% of 4-set track) for seamless loop. */
@keyframes ably-carousel-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-25%); }
}

@media (max-width: 768px) {
	.qs-value {
		height: 60px;
	}

	.qs-values-strip__set {
		gap: 24px;
		padding-right: 24px;
	}
}