/* =========================================================
 * Tech Resolve — Clients Trust Rail
 * Version: 2.0.0
 * ======================================================= */


/* =========================================================
 * Section
 * ======================================================= */

.tr-clients {
	position: relative;
	z-index: 20;

	margin-top: -10px;

	padding:
		0
		0
		44px;

	background:
		#050b10;
}


.tr-clients__shell {
	width: min(
		calc(100% - (var(--tr-gutter) * 2)),
		var(--tr-container-wide)
	);

	margin-inline: auto;
}


/* =========================================================
 * Rail
 * ======================================================= */

.tr-clients__rail {
	position: relative;
	isolation: isolate;

	overflow: hidden;

	min-height: 118px;

	border:
		1px solid rgba(255, 255, 255, 0.07);

	border-radius: 24px;

	background:
		linear-gradient(
			110deg,
			rgba(9, 18, 24, 0.94),
			rgba(7, 14, 20, 0.97) 48%,
			rgba(8, 18, 23, 0.94)
		);

	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/* =========================================================
 * Top Energy Line
 * ======================================================= */

.tr-clients__rail::before {
	content: "";

	position: absolute;
	z-index: 3;

	top: 0;
	left: 50%;

	width: 48%;
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(25, 224, 120, 0.22),
			rgba(20, 215, 232, 0.16),
			transparent
		);

	transform:
		translateX(-50%);

	pointer-events: none;
}


/* =========================================================
 * Subtle Background Glow
 * ======================================================= */

.tr-clients__rail::after {
	content: "";

	position: absolute;
	z-index: 0;

	top: -130px;
	left: 50%;

	width: 760px;
	height: 260px;

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse,
			rgba(25, 224, 120, 0.065),
			rgba(20, 215, 232, 0.025) 44%,
			transparent 72%
		);

	transform:
		translateX(-50%);

	pointer-events: none;
}


/* =========================================================
 * Ambient Decoration
 * ======================================================= */

.tr-clients__ambient {
	position: absolute;
	z-index: 1;

	inset: 0;

	pointer-events: none;
}


.tr-clients__ambient-line {
	position: absolute;

	top: 50%;
	right: 3%;
	left: 3%;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent,
			rgba(255, 255, 255, 0.025) 15%,
			rgba(255, 255, 255, 0.045) 50%,
			rgba(255, 255, 255, 0.025) 85%,
			transparent
		);
}


.tr-clients__ambient-dot {
	position: absolute;

	width: 4px;
	height: 4px;

	border-radius: 50%;

	background:
		var(--tr-green);

	box-shadow:
		0 0 14px rgba(25, 224, 120, 0.70);
}


.tr-clients__ambient-dot--one {
	top: 22px;
	left: 27%;
}


.tr-clients__ambient-dot--two {
	right: 19%;
	bottom: 20px;

	background:
		var(--tr-spectrum-cyan);

	box-shadow:
		0 0 14px rgba(20, 215, 232, 0.60);
}


/* =========================================================
 * Viewport
 * ======================================================= */

.tr-clients__viewport {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;

	min-height: inherit;

	overflow: hidden;

	-webkit-mask-image:
		linear-gradient(
			to right,
			transparent,
			#000 7%,
			#000 93%,
			transparent
		);

	mask-image:
		linear-gradient(
			to right,
			transparent,
			#000 7%,
			#000 93%,
			transparent
		);
}


/* =========================================================
 * Track
 * ======================================================= */

.tr-clients__track {
	display: flex;
	align-items: center;

	width: max-content;

	transform:
		translate3d(0, 0, 0);

	backface-visibility:
		hidden;

	will-change:
		transform;

	animation:
		tr-clients-marquee
		34s
		linear
		infinite;
}


@keyframes tr-clients-marquee {

	from {
		transform:
			translate3d(0, 0, 0);
	}

	to {
		transform:
			translate3d(-50%, 0, 0);
	}

}


/* =========================================================
 * Groups
 * ======================================================= */

.tr-clients__group {
	display: flex;
	align-items: center;

	flex:
		0
		0
		auto;

	gap:
		clamp(36px, 4vw, 70px);

	padding-right:
		clamp(36px, 4vw, 70px);
}


/* =========================================================
 * Client
 * ======================================================= */

.tr-clients__item {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	flex:
		0
		0
		auto;

	width: 170px;
	height: 116px;

	padding:
		20px
		4px;

	transform:
		translate3d(0, 0, 0);

	backface-visibility:
		hidden;
}


/* =========================================================
 * Hover Field
 * ======================================================= */

.tr-clients__item::before {
	content: "";

	position: absolute;

	top: 50%;
	left: 50%;

	width: 150px;
	height: 74px;

	border-radius: 50%;

	background:
		radial-gradient(
			ellipse,
			rgba(25, 224, 120, 0.10),
			rgba(20, 215, 232, 0.035) 45%,
			transparent 72%
		);

	opacity: 0;

	transform:
		translate(-50%, -50%)
		scale(0.65);

	transition:
		opacity 300ms ease,
		transform 450ms var(--tr-ease);

	pointer-events: none;
}


.tr-clients__item:hover::before {
	opacity: 1;

	transform:
		translate(-50%, -50%)
		scale(1);
}


/* =========================================================
 * Logo
 * ======================================================= */

.tr-clients__logo {
	position: relative;
	z-index: 2;

	display: block;

	width: auto;
	height: auto;

	max-width: 145px;
	max-height: 50px;

	object-fit:
		contain;

	opacity: 0.67;

	transform:
		translate3d(0, 0, 0)
		scale(0.96);

	transform-origin:
		center;

	backface-visibility:
		hidden;

	transition:
		opacity 300ms ease,
		transform 380ms var(--tr-ease);
}


.tr-clients__logo--medium {
	max-width: 135px;
	max-height: 48px;
}


.tr-clients__logo--wide {
	max-width: 165px;
	max-height: 47px;
}


.tr-clients__item:hover
.tr-clients__logo {
	opacity: 1;

	transform:
		translate3d(0, -5px, 0)
		scale(1.055);
}


/* =========================================================
 * Stop Only When Hovering Logo
 * ======================================================= */

.tr-clients__viewport:has(.tr-clients__item:hover)
.tr-clients__track {
	animation-play-state:
		paused;
}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 900px) {

	.tr-clients__rail {
		min-height: 108px;

		border-radius: 22px;
	}


	.tr-clients__item {
		width: 150px;
		height: 106px;
	}


	.tr-clients__group {
		gap: 38px;

		padding-right: 38px;
	}


	.tr-clients__logo {
		max-width: 128px;
		max-height: 43px;
	}


	.tr-clients__logo--wide {
		max-width: 145px;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 700px) {

	.tr-clients {
		margin-top: 0;

		padding-bottom: 28px;
	}


	.tr-clients__shell {
		width:
			calc(100% - 24px);
	}


	.tr-clients__rail {
		min-height: 96px;

		border-radius: 20px;
	}


	.tr-clients__viewport {
		-webkit-mask-image:
			linear-gradient(
				to right,
				transparent,
				#000 4%,
				#000 96%,
				transparent
			);

		mask-image:
			linear-gradient(
				to right,
				transparent,
				#000 4%,
				#000 96%,
				transparent
			);
	}


	.tr-clients__group {
		gap: 27px;

		padding-right: 27px;
	}


	.tr-clients__item {
		width: 130px;
		height: 94px;
	}


	.tr-clients__logo {
		max-width: 112px;
		max-height: 37px;
	}


	.tr-clients__logo--wide {
		max-width: 126px;
		max-height: 36px;
	}

}


/* =========================================================
 * Reduced Motion
 * ======================================================= */

@media (prefers-reduced-motion: reduce) {

	.tr-clients__track {
		animation: none;
	}


	.tr-clients__viewport {
		overflow-x: auto;

		-webkit-mask-image: none;
		mask-image: none;

		scrollbar-width: none;
	}


	.tr-clients__viewport::-webkit-scrollbar {
		display: none;
	}

}