.scl-showcase {
	--scl-columns: 4;
	--scl-gap: 24px;
	--scl-speed: 30s;
	--scl-fade-size: 80px;
	--scl-item-width: 160px;
	--scl-item-height: 80px;
	--scl-img-max-height: 80px;
	--scl-container-width: 100%;
	--scl-hover-scale: 1.2;
	--scl-hover-duration: 0.3s;
	--scl-hover-base-size: var(--scl-img-max-height);
	--scl-hover-overflow-pad: calc(var(--scl-hover-base-size) * (var(--scl-hover-scale) - 1) / 2);
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: visible;
	direction: ltr;
}

.scl-showcase__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	pointer-events: none;
}

.scl-showcase__viewport {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow: hidden;
	container-type: inline-size;
	container-name: scl-showcase;
}

/* فضای رشد لوگو روی هاور تا overflow:hidden قطع نکند */
.scl-showcase--hover-scale .scl-showcase__viewport {
	padding: var(--scl-hover-overflow-pad);
	box-sizing: border-box;
}

.scl-showcase--custom-size {
	--scl-hover-base-size: max(var(--scl-item-width), var(--scl-item-height));
}

.scl-showcase--fade-edges .scl-showcase__viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--scl-fade-size),
		#000 calc(100% - var(--scl-fade-size)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--scl-fade-size),
		#000 calc(100% - var(--scl-fade-size)),
		transparent 100%
	);
}

.scl-showcase__track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.scl-showcase__group {
	display: flex;
	flex-shrink: 0;
	gap: var(--scl-gap);
	align-items: center;
	padding-inline-end: var(--scl-gap);
}

.scl-showcase__item {
	/* 100cqw از عرض واقعی ویوپورت است، نه از track با width:max-content (که درصد را صفر می‌کند). */
	flex: 0 0 calc(
		(100cqw - (var(--scl-columns) - 1) * var(--scl-gap)) / var(--scl-columns)
	);
	width: calc(
		(100cqw - (var(--scl-columns) - 1) * var(--scl-gap)) / var(--scl-columns)
	);
	min-width: 40px;
	max-width: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	z-index: 1;
	overflow: visible;
}

.scl-showcase--hover-scale .scl-showcase__item:hover {
	z-index: 5;
}

.scl-showcase__item-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	box-sizing: border-box;
	overflow: visible;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.scl-showcase__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	line-height: 0;
	overflow: visible;
}

.scl-showcase__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--scl-img-max-height);
	object-fit: contain;
	transform: scale(1);
	transition: transform var(--scl-hover-duration) ease, opacity 0.25s ease;
	transform-origin: center center;
	will-change: transform;
	position: relative;
	z-index: 1;
}

.scl-showcase--custom-size .scl-showcase__image {
	width: var(--scl-item-width);
	height: var(--scl-item-height);
	max-height: none;
	object-fit: contain;
}

.scl-showcase--hover-scale .scl-showcase__item:hover .scl-showcase__image {
	transform: scale(var(--scl-hover-scale));
}

.scl-showcase__track--animate {
	animation-name: scl-marquee-left;
	animation-duration: var(--scl-speed);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.scl-showcase--dir-right .scl-showcase__track--animate {
	animation-name: scl-marquee-right;
}

.scl-showcase--pause-hover:hover .scl-showcase__track--animate {
	animation-play-state: paused;
}

.scl-showcase.is-paused .scl-showcase__track--animate {
	animation-play-state: paused;
}

@keyframes scl-marquee-left {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes scl-marquee-right {
	from {
		transform: translate3d(-50%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.scl-showcase__image {
		transition: none;
	}

	.scl-showcase--hover-scale .scl-showcase__item:hover .scl-showcase__image {
		transform: none;
	}

	.scl-showcase__track--animate {
		animation: none !important;
		transform: none !important;
	}
}