.danas-marquee-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 20px 0;
	--danas-marquee-visible-logos: 5;
	--danas-marquee-speed: 25s;
	--danas-marquee-gap: 40px;
	--danas-marquee-logo-height: 50px;
	--danas-marquee-logo-opacity: 0.6;
	--danas-marquee-logo-opacity-hover: 1;
	--danas-marquee-fade-width: 100px;
	--danas-marquee-fade-color: #ffffff;
}

/* Edge Fade Effect using linear-gradient overlay */
.danas-marquee-wrapper.has-fade::before,
.danas-marquee-wrapper.has-fade::after {
	content: "";
	position: absolute;
	top: -1px;
	bottom: -1px;
	z-index: 2;
	pointer-events: none;
}

.danas-marquee-wrapper.has-fade::before {
	left: -10px;
	width: calc(var(--danas-marquee-fade-width) + 15px);
	background: linear-gradient(to right, var(--danas-marquee-fade-color) 0%, var(--danas-marquee-fade-color) 10px, transparent 85%, transparent 100%);
}

.danas-marquee-wrapper.has-fade::after {
	right: -10px;
	width: calc(var(--danas-marquee-fade-width) + 15px);
	background: linear-gradient(to left, var(--danas-marquee-fade-color) 0%, var(--danas-marquee-fade-color) 10px, transparent 85%, transparent 100%);
}

/* Main Container and Track */
.danas-marquee-container {
	display: flex;
	width: 100%;
	overflow: hidden;
	container-type: inline-size;
}

.danas-marquee-track {
	display: flex;
	width: max-content;
	animation: danas-marquee-scroll var(--danas-marquee-speed) linear infinite;
	gap: var(--danas-marquee-gap);
	padding-right: var(--danas-marquee-gap); /* ensure spacing between lists */
}

/* Direction: Right */
.danas-marquee-wrapper.direction-right .danas-marquee-track {
	animation-direction: reverse;
}

/* Pause on Hover option */
.danas-marquee-wrapper.pause-on-hover:hover .danas-marquee-track {
	animation-play-state: paused;
}

/* Marquee Item Lists (original & duplicated) */
.danas-marquee-list {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: var(--danas-marquee-gap);
	flex-shrink: 0;
}

.danas-marquee-item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Calculate width using cqw (container query width) to avoid circular percentage dependencies */
	width: calc((100cqw - (var(--danas-marquee-gap) * (var(--danas-marquee-visible-logos) - 1))) / var(--danas-marquee-visible-logos));
	max-width: 300px; /* safety ceiling */
	flex-shrink: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.danas-marquee-item img {
	max-height: var(--danas-marquee-logo-height);
	width: auto;
	object-fit: contain;
	opacity: var(--danas-marquee-logo-opacity);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.danas-marquee-item img:hover {
	opacity: var(--danas-marquee-logo-opacity-hover);
	transform: scale(1.05);
}

/* Infinite Marquee Scroll Animation */
@keyframes danas-marquee-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(calc(-50% - (var(--danas-marquee-gap) / 2)));
	}
}