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

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

.emt-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	width: 100%;
	max-width: 100%;
	display: grid;
	place-items: center;
	overflow: hidden;
	contain: layout paint;
	background: #02040a;
	opacity: 1;
	visibility: visible;
	transition: opacity 220ms ease, visibility 220ms ease;
}

.emt-loader::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 50% 48%, rgba(30, 105, 184, 0.22), transparent 34%),
		linear-gradient(115deg, transparent 30%, rgba(0, 214, 255, 0.035) 50%, transparent 70%);
}

.emt-loader.is-complete {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.emt-loader__gauge {
	--progress: 0deg;
	position: relative;
	width: min(50vw, 400px);
	aspect-ratio: 1;
	border-radius: 50%;
	filter: drop-shadow(0 0 30px rgba(30, 105, 184, 0.28));
}

.emt-loader__gauge::before,
.emt-loader__gauge::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
}

.emt-loader__gauge::before {
	inset: 0;
	padding: 3px;
	background: linear-gradient(145deg, #34d9ff, #1e69b8 35%, #794cff 72%, #ff9a26);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	box-shadow: inset 0 0 24px rgba(43, 156, 255, 0.2);
}

.emt-loader__gauge::after {
	inset: 4.5%;
	border: 1px solid rgba(205, 230, 255, 0.4);
	box-shadow:
		0 0 0 7px rgba(17, 33, 57, 0.72),
		0 0 28px rgba(0, 157, 255, 0.35),
		inset 0 0 42px rgba(2, 11, 28, 0.92);
}

.emt-loader__ticks,
.emt-loader__progress {
	position: absolute;
	border-radius: 50%;
}

.emt-loader__ticks {
	inset: 7.5%;
	background: repeating-conic-gradient(
		from 225deg,
		rgba(209, 233, 255, 0.9) 0deg 0.7deg,
		transparent 0.7deg 4.5deg
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 18px), #000 calc(100% - 17px));
	opacity: 0.72;
}

.emt-loader__progress {
	inset: 7%;
	background: conic-gradient(
		from 225deg,
		#00d9ff 0deg,
		#1e69b8 84deg,
		#7748ff 168deg,
		#ff9f2f var(--progress),
		transparent var(--progress)
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px));
	filter: drop-shadow(0 0 8px rgba(0, 198, 255, 0.8));
}

.emt-loader__brand,
.emt-loader__readout,
.emt-loader__status {
	position: absolute;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
	text-align: center;
}

.emt-loader__brand {
	top: 28%;
	width: 80%;
	color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: clamp(13px, 2vw, 21px);
	font-weight: 800;
	letter-spacing: 0.26em;
	line-height: 1.25;
	text-shadow: 0 0 18px rgba(67, 173, 255, 0.28);
}

.emt-loader__brand span {
	display: block;
	margin-top: 5px;
	font-size: 0.52em;
	font-weight: 600;
	letter-spacing: 0.34em;
}

.emt-loader__needle-wrap {
	position: absolute;
	inset: 0;
	z-index: 4;
	transform: rotate(135deg);
	will-change: transform;
}

.emt-loader__needle {
	position: absolute;
	top: 49.1%;
	left: 50%;
	width: 28%;
	height: 5px;
	border-radius: 999px 3px 3px 999px;
	background: linear-gradient(90deg, #fff 0%, #38e5ff 13%, #147cff 82%);
	box-shadow:
		0 0 8px #2bdcff,
		0 0 20px rgba(20, 124, 255, 0.85);
	transform-origin: left center;
}

.emt-loader__hub {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	width: 32px;
	aspect-ratio: 1;
	border: 5px solid #b9c6d3;
	border-radius: 50%;
	background: radial-gradient(circle, #147cff 0 23%, #08101e 25% 55%, #cbd4dc 58% 65%, #050911 68%);
	box-shadow: 0 0 20px rgba(29, 140, 255, 0.75);
	transform: translate(-50%, -50%);
}

.emt-loader__readout {
	top: 70%;
	min-width: 42%;
	color: #4adfff;
	font-family: Consolas, "Courier New", monospace;
	font-size: clamp(34px, 7vw, 64px);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
	line-height: 1;
	text-shadow:
		0 0 7px #147cff,
		0 0 24px rgba(20, 124, 255, 0.7);
}

.emt-loader__unit {
	margin-left: 7px;
	color: #38a9ff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 0.18em;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.emt-loader__status {
	top: 86%;
	color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: clamp(10px, 1.5vw, 13px);
	font-weight: 700;
	letter-spacing: 0.42em;
}

.emt-loader__status::after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	margin-top: 12px;
	background: linear-gradient(90deg, #00d9ff, #1e69b8, #764cff, #ff9f2f);
	box-shadow: 0 0 8px rgba(0, 194, 255, 0.8);
	animation: emt-loader-pulse 800ms ease-in-out infinite alternate;
}

html.emt-loader-active,
html.emt-loader-active body {
	overflow: hidden;
}

@keyframes emt-loader-pulse {
	from { opacity: 0.4; transform: scaleX(0.55); }
	to { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 600px) {
	.emt-loader__gauge {
		width: min(78vw, 340px);
	}

	.emt-loader__hub {
		width: 26px;
		border-width: 3px;
	}

	.emt-loader__brand {
		top: 27%;
		letter-spacing: 0.18em;
	}

	.emt-loader__readout {
		top: 70%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emt-loader__status::after {
		animation: none;
	}
}