/*
 * Frontend-only: continuous scroll animation + edge fade for the logo
 * carousel. Kept out of style.scss/editor.scss so the editor shows a plain
 * static row (easier to manage which logos are in the list) while the real
 * page gets the scrolling marquee. The logo set is rendered twice in
 * save.js specifically so this animation can loop seamlessly.
 */
.wp-block-concord-template-logo-carousel .logo-carousel__track-wrapper {
	mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.wp-block-concord-template-logo-carousel .logo-carousel__track {
	width: max-content;
	animation: concord-logo-carousel-scroll 30s linear infinite;
}

.wp-block-concord-template-logo-carousel .logo-carousel__track:hover {
	animation-play-state: paused;
}

@keyframes concord-logo-carousel-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-concord-template-logo-carousel .logo-carousel__track {
		animation: none;
	}
}