/**
 * Elementor Logo Scrolling Widget Stylesheet
 * High-performance, hardware-accelerated infinite marquee
 */

/* Core Variables Container */
.els-logo-scroller-wrapper {
	--els-logo-gap: 50px;
	--els-fade-width: 100px;
	--els-fade-color: #ffffff;
	--els-animation-duration: 30s;
	--els-track-shift: -50%;
	
	position: relative;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	display: block;
}

.els-logo-scroller-container {
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
}

/* Scrolling Track */
.els-logo-scroller-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: var(--els-logo-gap);
	will-change: transform;
	transform: translate3d(0, 0, 0);
	animation-name: els-marquee-scroll;
	animation-duration: var(--els-animation-duration);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

/* Keyframes for seamless looping */
@keyframes els-marquee-scroll {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(var(--els-track-shift), 0, 0);
	}
}

/* Pause on Hover */
.els-logo-scroller-wrapper.pause-on-hover:hover .els-logo-scroller-track {
	animation-play-state: paused;
}

/* Direction Classes */
.els-logo-scroller-wrapper[data-direction="right"] .els-logo-scroller-track {
	animation-direction: reverse;
}

/* Logo Item & Link */
.els-logo-item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	text-decoration: none;
}

.els-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	outline: none;
	border: none;
}

.els-logo-item img {
	display: block;
	max-width: 180px;
	height: 60px;
	width: auto;
	object-fit: contain;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-origin: center center;
	transition: all 0.3s ease-in-out;
}

/* Gradient Fade Edges Overlay */
.els-logo-scroller-wrapper.has-gradient-overlay::before,
.els-logo-scroller-wrapper.has-gradient-overlay::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--els-fade-width);
	z-index: 3;
	pointer-events: none;
}

.els-logo-scroller-wrapper.has-gradient-overlay::before {
	left: 0;
	background: linear-gradient(to right, var(--els-fade-color) 0%, transparent 100%);
}

.els-logo-scroller-wrapper.has-gradient-overlay::after {
	right: 0;
	background: linear-gradient(to left, var(--els-fade-color) 0%, transparent 100%);
}

/* Accessibility & Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	.els-logo-scroller-track {
		animation: none !important;
		transform: none !important;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
	}
	
	.els-logo-clone {
		display: none !important;
	}
}

/* Responsive Overrides */
@media (max-width: 767px) {
	.els-logo-scroller-wrapper {
		--els-fade-width: 50px;
	}
}