.els-page-loader {
	--els-loader-bg: #ffffff;
	--els-loader-accent: #21D0B3;
	--els-loader-text: #2F455C;
	--els-loader-fade: 480ms;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	width: 100vw;
	min-width: 100vw;
	min-height: 100vh;
	min-height: 100svh;
	color: var(--els-loader-text);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--els-loader-fade) ease,
		visibility var(--els-loader-fade) ease;
	background:
		radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--els-loader-accent) 8%, transparent), transparent 34%),
		linear-gradient(180deg, #ffffff 0%, var(--els-loader-bg) 52%, color-mix(in srgb, var(--els-loader-accent) 5%, #ffffff) 100%),
		var(--els-loader-bg);
}

.els-page-loader *,
.els-page-loader *::before,
.els-page-loader *::after {
	box-sizing: border-box;
}

.els-page-loader::before,
.els-page-loader::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.els-page-loader::before {
	opacity: 0.62;
	background-image:
		linear-gradient(color-mix(in srgb, var(--els-loader-text) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--els-loader-text) 5%, transparent) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 66%);
	mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 66%);
}

.els-page-loader::after {
	opacity: 0.22;
	background: linear-gradient(112deg, transparent 20%, color-mix(in srgb, var(--els-loader-accent) 22%, transparent) 42%, transparent 64%);
	transform: translateX(-26%);
	animation: elsLoaderAmbientSweep 3600ms ease-in-out infinite;
}

.els-page-loader.els-is-hiding {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.els-page-loader__inner {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 1rem;
	width: min(100%, 34rem);
	text-align: center;
	transform: translateY(-1vh);
}

.els-page-loader__brand {
	display: grid;
	place-items: center;
	min-height: 8.25rem;
	perspective: 48rem;
}

.els-page-loader__logo-image {
	display: block;
	max-width: min(68vw, 18rem);
	max-height: 8.25rem;
	width: auto;
	height: auto;
	object-fit: contain;
	transform-origin: center;
	filter: drop-shadow(0 14px 30px rgba(47, 69, 92, 0.14));
	animation: elsLoaderBrandReveal 980ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.els-page-loader__wordmark {
	position: relative;
	display: block;
	max-width: 100%;
	font-family: inherit;
	font-size: clamp(2rem, 3.6vw, 3.85rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--els-loader-text);
	text-wrap: balance;
	text-shadow: 0 10px 28px rgba(47, 69, 92, 0.08);
	animation: elsLoaderBrandReveal 940ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.els-page-loader__wordmark {
		background: linear-gradient(
			90deg,
			var(--els-loader-text) 0%,
			color-mix(in srgb, var(--els-loader-accent) 36%, var(--els-loader-text)) 48%,
			var(--els-loader-text) 100%
		);
		background-size: 190% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation:
			elsLoaderBrandReveal 940ms cubic-bezier(0.22, 1, 0.36, 1) both,
			elsLoaderWordmarkSheen 1800ms ease 360ms both;
	}
}

.els-page-loader__motion {
	position: relative;
	display: grid;
	place-items: center;
	width: min(68vw, 23rem);
	min-height: 5.5rem;
	animation: elsLoaderMotionReveal 900ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.els-page-loader__track {
	position: relative;
	display: block;
	width: 100%;
	height: 5.5rem;
	overflow: visible;
	background: transparent;
	transform-origin: center;
}

.els-page-loader__alignment-line {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 10%;
	right: 10%;
	height: 1px;
	background:
		linear-gradient(90deg, transparent, color-mix(in srgb, var(--els-loader-text) 11%, transparent) 18%, color-mix(in srgb, var(--els-loader-accent) 30%, transparent) 50%, color-mix(in srgb, var(--els-loader-text) 11%, transparent) 82%, transparent);
	opacity: 0;
	transform: scaleX(0.32);
	transform-origin: center;
	animation: elsLoaderAlignmentLine 1300ms cubic-bezier(0.16, 1, 0.3, 1) 360ms both;
}

.els-page-loader__connector {
	content: "";
	position: absolute;
	z-index: 2;
	top: var(--els-connector-top, 50%);
	left: var(--els-connector-left, 50%);
	width: var(--els-connector-width, 20%);
	height: 1px;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--els-loader-accent) 78%, var(--els-loader-text)), color-mix(in srgb, var(--els-loader-accent) 24%, transparent));
	opacity: 0;
	transform: rotate(var(--els-connector-angle, 0deg)) scaleX(0);
	transform-origin: left center;
	animation: elsLoaderConnectorDraw 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--els-connector-delay, 520ms) both;
}

.els-page-loader__connector::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0.28rem;
	height: 0.28rem;
	border-radius: 999px;
	background: var(--els-loader-accent);
	box-shadow: 0 0 14px color-mix(in srgb, var(--els-loader-accent) 48%, transparent);
	opacity: 0;
	transform: translate(50%, -50%) scale(0.72);
	animation: elsLoaderConnectorEndpoint 520ms ease calc(var(--els-connector-delay, 520ms) + 540ms) both;
}

.els-page-loader__connector--client {
	--els-connector-top: 50%;
	--els-connector-left: 14%;
	--els-connector-width: 36%;
	--els-connector-delay: 420ms;
	background: linear-gradient(90deg, color-mix(in srgb, var(--els-loader-text) 18%, transparent), color-mix(in srgb, var(--els-loader-accent) 78%, var(--els-loader-text)));
}

.els-page-loader__connector--talent-one {
	--els-connector-top: 50%;
	--els-connector-left: 50%;
	--els-connector-width: 23.5%;
	--els-connector-angle: -17deg;
	--els-connector-delay: 860ms;
}

.els-page-loader__connector--talent-two {
	--els-connector-top: 50%;
	--els-connector-left: 50%;
	--els-connector-width: 36%;
	--els-connector-delay: 940ms;
}

.els-page-loader__connector--talent-three {
	--els-connector-top: 50%;
	--els-connector-left: 50%;
	--els-connector-width: 23.5%;
	--els-connector-angle: 17deg;
	--els-connector-delay: 1020ms;
}

.els-page-loader__alignment-node {
	position: absolute;
	z-index: 3;
	top: var(--els-node-y);
	left: var(--els-node-x);
	display: grid;
	place-items: center;
	width: 1.92rem;
	height: 1.92rem;
	border-radius: 999px;
	background: color-mix(in srgb, #ffffff 88%, var(--els-loader-accent));
	border: 1px solid color-mix(in srgb, var(--els-loader-text) 15%, transparent);
	box-shadow:
		0 0 0 4px color-mix(in srgb, var(--els-loader-accent) 9%, transparent),
		0 10px 22px rgba(47, 69, 92, 0.1);
	opacity: 0;
	transform: translate(calc(-50% + var(--els-from-x)), calc(-50% + var(--els-from-y))) scale(0.84);
	animation: elsLoaderNodeSettle 760ms cubic-bezier(0.16, 1, 0.3, 1) var(--els-node-delay) both;
}

.els-page-loader__alignment-node > span {
	position: relative;
	display: block;
	width: 0.96rem;
	height: 0.96rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--els-loader-text) 86%, var(--els-loader-accent));
	box-shadow: inset 0 -0.28rem 0 color-mix(in srgb, var(--els-loader-bg) 86%, transparent);
}

.els-page-loader__alignment-node > span::before {
	content: "";
	position: absolute;
	top: 0.16rem;
	left: 50%;
	width: 0.32rem;
	height: 0.32rem;
	border-radius: 999px;
	background: var(--els-loader-bg);
	transform: translateX(-50%);
}

.els-page-loader__alignment-node > span::after {
	content: "";
	position: absolute;
	right: 0.2rem;
	bottom: 0.18rem;
	left: 0.2rem;
	height: 0.24rem;
	border-radius: 999px 999px 0.18rem 0.18rem;
	background: var(--els-loader-bg);
}

.els-page-loader__alignment-node--client {
	--els-node-x: 14%;
	--els-node-y: 50%;
	--els-from-x: -1.25rem;
	--els-from-y: 0;
	--els-node-delay: 360ms;
	border-radius: 0.58rem;
}

.els-page-loader__alignment-node--client > span {
	width: 0.98rem;
	height: 0.76rem;
	border-radius: 0.18rem;
	background: color-mix(in srgb, var(--els-loader-text) 82%, var(--els-loader-accent));
	box-shadow: none;
}

.els-page-loader__alignment-node--client > span::before,
.els-page-loader__alignment-node--client > span::after {
	content: "";
	position: absolute;
	background: var(--els-loader-bg);
	opacity: 0.88;
	transform: none;
}

.els-page-loader__alignment-node--client > span::before {
	top: 0.18rem;
	left: 0.2rem;
	width: 0.58rem;
	height: 1px;
}

.els-page-loader__alignment-node--client > span::after {
	top: 0.44rem;
	right: auto;
	bottom: auto;
	left: 0.2rem;
	width: 0.42rem;
	height: 1px;
	border-radius: 0;
}

.els-page-loader__alignment-node--talent-one {
	--els-node-x: 72%;
	--els-node-y: 22%;
	--els-from-x: 1rem;
	--els-from-y: -1rem;
	--els-node-delay: 500ms;
}

.els-page-loader__alignment-node--talent-two {
	--els-node-x: 86%;
	--els-node-y: 50%;
	--els-from-x: 1.25rem;
	--els-from-y: 0;
	--els-node-delay: 620ms;
}

.els-page-loader__alignment-node--talent-three {
	--els-node-x: 72%;
	--els-node-y: 78%;
	--els-from-x: 1rem;
	--els-from-y: 1rem;
	--els-node-delay: 740ms;
}

.els-page-loader__alignment-match {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: 0.82rem;
	height: 0.82rem;
	border-radius: 999px;
	background: var(--els-loader-accent);
	box-shadow:
		0 0 0 7px color-mix(in srgb, var(--els-loader-accent) 12%, transparent),
		0 0 24px color-mix(in srgb, var(--els-loader-accent) 50%, transparent);
	opacity: 0;
	transform: translate(-50%, -50%);
	animation: elsLoaderMatchReveal 820ms cubic-bezier(0.16, 1, 0.3, 1) 820ms both;
}

.els-page-loader__alignment-match::before {
	content: "";
	position: absolute;
	inset: -0.62rem;
	border: 1px solid color-mix(in srgb, var(--els-loader-accent) 32%, transparent);
	border-radius: inherit;
	opacity: 0;
	animation: elsLoaderMatchPulse 1900ms ease-out 1300ms infinite;
}

.els-page-loader__alignment-match::after {
	content: "";
	position: absolute;
	top: 48%;
	left: 50%;
	width: 0.36rem;
	height: 0.2rem;
	border-bottom: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	transform: translate(-50%, -55%) rotate(-45deg);
}

.els-page-loader__pulse,
.els-page-loader__orbit {
	display: none;
}

.els-page-loader__text {
	margin: 0;
	max-width: min(100%, 22rem);
	font-family: inherit;
	font-size: 0.76rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--els-loader-text);
	opacity: 0.74;
	text-wrap: balance;
	animation: elsLoaderTextReveal 900ms ease 420ms both;
}

.els-page-loader--pulse .els-page-loader__track,
.els-page-loader--orbit .els-page-loader__track {
	display: none;
}

.els-page-loader--pulse .els-page-loader__pulse {
	display: block;
	width: 0.78rem;
	height: 0.78rem;
	border-radius: 999px;
	background: var(--els-loader-accent);
	box-shadow:
		-1.8rem 0 0 color-mix(in srgb, var(--els-loader-accent) 48%, transparent),
		1.8rem 0 0 color-mix(in srgb, var(--els-loader-accent) 48%, transparent);
	animation: elsLoaderPulse 980ms ease-in-out infinite;
}

.els-page-loader--orbit .els-page-loader__orbit {
	position: relative;
	display: block;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid color-mix(in srgb, var(--els-loader-text) 16%, transparent);
	border-radius: 999px;
	animation: elsLoaderOrbitSpin 1200ms linear infinite;
}

.els-page-loader--orbit .els-page-loader__orbit::before {
	content: "";
	position: absolute;
	top: -0.24rem;
	left: 50%;
	width: 0.48rem;
	height: 0.48rem;
	border-radius: 999px;
	background: var(--els-loader-accent);
	box-shadow: 0 0 18px color-mix(in srgb, var(--els-loader-accent) 52%, transparent);
	transform: translateX(-50%);
}

@keyframes elsLoaderBrandReveal {
	0% {
		transform: translateY(14px) rotateX(10deg) scale(0.97);
		opacity: 0;
	}

	100% {
		transform: translateY(0) rotateX(0deg) scale(1);
		opacity: 1;
	}
}

@keyframes elsLoaderWordmarkSheen {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes elsLoaderAmbientSweep {
	0%,
	100% {
		transform: translateX(-28%);
		opacity: 0.14;
	}

	50% {
		transform: translateX(24%);
		opacity: 0.24;
	}
}

@keyframes elsLoaderMotionReveal {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes elsLoaderAlignmentLine {
	0% {
		opacity: 0;
		transform: scaleX(0.32);
	}

	100% {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes elsLoaderConnectorDraw {
	0% {
		opacity: 0;
		transform: rotate(var(--els-connector-angle, 0deg)) scaleX(0);
	}

	100% {
		opacity: 1;
		transform: rotate(var(--els-connector-angle, 0deg)) scaleX(1);
	}
}

@keyframes elsLoaderConnectorEndpoint {
	0% {
		opacity: 0;
		transform: translate(50%, -50%) scale(0.72);
	}

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

@keyframes elsLoaderTextReveal {
	0% {
		transform: translateY(8px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 0.8;
	}
}

@keyframes elsLoaderNodeSettle {
	0% {
		opacity: 0;
		transform: translate(calc(-50% + var(--els-from-x)), calc(-50% + var(--els-from-y))) scale(0.84);
	}

	68% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.04);
	}

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

@keyframes elsLoaderMatchReveal {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.68);
	}

	70% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.08);
	}

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

@keyframes elsLoaderMatchPulse {
	0% {
		opacity: 0;
		transform: scale(0.62);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: scale(1.5);
	}
}

@keyframes elsLoaderPulse {
	0%,
	100% {
		transform: scale(0.86);
		opacity: 0.58;
	}

	50% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes elsLoaderOrbitSpin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 767px) {
	.els-page-loader {
		padding: 20px;
	}

	.els-page-loader__inner {
		gap: 1.05rem;
	}

	.els-page-loader__brand {
		min-height: 6.875rem;
	}

	.els-page-loader__logo-image {
		max-width: min(72vw, 14rem);
		max-height: 6.875rem;
	}

	.els-page-loader__wordmark {
		font-size: clamp(1.55rem, 7.8vw, 2.35rem);
		letter-spacing: 0.045em;
	}

	.els-page-loader__motion {
		width: min(76vw, 17rem);
		min-height: 4rem;
	}

	.els-page-loader__track {
		height: 4rem;
	}

	.els-page-loader__text {
		max-width: 17rem;
		font-size: 0.72rem;
		letter-spacing: 0.13em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.els-page-loader,
	.els-page-loader * {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
		scroll-behavior: auto !important;
	}
}
