/* CSS Guardrails to help prevent initial flash on load */

/* start hidden */
.ts-logo-marquee {
	opacity: 0;
	transition: opacity 150ms ease;
}

/* reveal only when JS adds tslm-ready */
.ts-logo-marquee.tslm-ready {
	opacity: 1;
}

/* Container */
.tslm-instance {
	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 10px 0;
}

/* Both fades combined */
.tslm-instance.tslm-fade-both {
	-webkit-mask-image: linear-gradient(
		to right,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0) calc(var(--tslm-fade-w) * var(--tslm-fade-ramp) / 100),
		rgba(0,0,0,1) var(--tslm-fade-w),
		rgba(0,0,0,1) calc(100% - var(--tslm-fade-w)),
		rgba(0,0,0,0) calc(100% - (var(--tslm-fade-w) * var(--tslm-fade-ramp) / 100)),
		rgba(0,0,0,0) 100%
	);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(
		to right,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,0) calc(var(--tslm-fade-w) * var(--tslm-fade-ramp) / 100),
		rgba(0,0,0,1) var(--tslm-fade-w),
		rgba(0,0,0,1) calc(100% - var(--tslm-fade-w)),
		rgba(0,0,0,0) calc(100% - (var(--tslm-fade-w) * var(--tslm-fade-ramp) / 100)),
		rgba(0,0,0,0) 100%
	);
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

/* Scrolling track */
.tslm-track {
	display: flex;
	align-items: center;
	will-change: transform;
	transform: translate3d(0,0,0);
}

/* Item wrapper */
.tslm-item {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
}

/* Base image presentation */
.tslm-item img {
	display: block;
	max-height: var(--tslm-max-h, 80px);
	max-width: var(--tslm-max-w, 140px);
	height: auto;
	width: auto;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

/* Hover effects */
.tslm-has-hover .tslm-item img {
	transition:
		transform var(--tslm-hover-ms, 200ms) ease,
		opacity var(--tslm-hover-ms, 200ms) ease,
		filter var(--tslm-hover-ms, 200ms) ease;
}

.tslm-hover-scale .tslm-item:hover img {
	transform: scale(var(--tslm-hover-scale, 1.05));
}

.tslm-hover-fade .tslm-item img {
	opacity: var(--tslm-hover-fade, 0.75);
}
.tslm-hover-fade .tslm-item:hover img {
	opacity: 1;
}

.tslm-hover-color .tslm-item img {
	filter: grayscale(1) contrast(1.05);
}
.tslm-hover-color .tslm-item:hover img {
	filter: grayscale(0);
}

/* Kadence adjustments */
.ts-logo-marquee {
	margin: 0;
	padding: 0;
}

.tslm-track,
.tslm-item,
.tslm-item img {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
}