:root {
	--cool-loader-bg: #020509;
	--cool-loader-blue: #02365d;
	--cool-loader-cyan: #4bd8ff;
	--cool-loader-ice: #effaff;
	--cool-loader-muted: rgba(221, 246, 255, 0.2);
}

body.cool-loader-lock {
	overflow: hidden;
}

.cool-loader {
	position: fixed;
	inset: 0;
	z-index: 2147483647;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #fff;
	color: #111820;
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.cool-loader--front {
	background:
		radial-gradient(circle at 50% 50%, rgba(2, 54, 93, 0.38), transparent 34%),
		radial-gradient(circle at 18% 24%, rgba(75, 216, 255, 0.12), transparent 24%),
		linear-gradient(145deg, #000 0%, var(--cool-loader-bg) 48%, #03111d 100%);
	color: var(--cool-loader-ice);
	transition:
		opacity 700ms ease,
		visibility 0ms linear 700ms;
}

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

.cool-loader--internal {
	background: #fff;
	color: #111820;
	transform: translateY(0);
	transition:
		transform 640ms cubic-bezier(0.72, 0, 0.16, 1),
		opacity 480ms ease,
		visibility 0ms linear 640ms;
}

.cool-loader--internal::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	background: rgba(10, 18, 28, 0.08);
}

.cool-loader--internal.is-hidden {
	transform: translateY(100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.cool-loader-internal__indicator {
	position: relative;
	width: clamp(112px, 24vw, 180px);
	height: 2px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(17, 24, 32, 0.12);
	box-shadow: 0 16px 40px rgba(17, 24, 32, 0.08);
}

.cool-loader-internal__indicator span {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	width: 46%;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, rgba(17, 24, 32, 0.95), transparent);
	animation: cool-loader-internal-line 1.1s ease-in-out infinite;
}

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

.cool-loader__stars {
	position: absolute;
	inset: 0;
	opacity: 0.72;
	background-image:
		radial-gradient(circle, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.8px),
		radial-gradient(circle, rgba(75, 216, 255, 0.75) 0 1px, transparent 1.7px),
		radial-gradient(circle, rgba(255, 255, 255, 0.34) 0 1px, transparent 1.8px);
	background-position:
		0 0,
		32px 58px,
		88px 18px;
	background-size:
		180px 180px,
		260px 260px,
		132px 132px;
	animation: cool-loader-stars 18s linear infinite;
}

.cool-loader__stage {
	position: relative;
	width: clamp(280px, 58vmin, 680px);
	aspect-ratio: 1;
	border-radius: 50%;
	perspective: 900px;
	transform-style: preserve-3d;
	filter: drop-shadow(0 0 22px rgba(75, 216, 255, 0.18));
}

.cool-loader__stage::before,
.cool-loader__stage::after {
	content: "";
	position: absolute;
	inset: 2%;
	border-radius: 50%;
	border: 1px solid rgba(239, 250, 255, 0.13);
}

.cool-loader__stage::after {
	inset: 12%;
	border-color: rgba(75, 216, 255, 0.12);
	box-shadow:
		inset 0 0 36px rgba(2, 54, 93, 0.5),
		0 0 42px rgba(75, 216, 255, 0.08);
}

.cool-loader__reticle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		linear-gradient(rgba(239, 250, 255, 0.2), rgba(239, 250, 255, 0.2)) 50% 0 / 1px 7% no-repeat,
		linear-gradient(rgba(239, 250, 255, 0.2), rgba(239, 250, 255, 0.2)) 50% 100% / 1px 7% no-repeat,
		linear-gradient(90deg, rgba(239, 250, 255, 0.2), rgba(239, 250, 255, 0.2)) 0 50% / 7% 1px no-repeat,
		linear-gradient(90deg, rgba(239, 250, 255, 0.2), rgba(239, 250, 255, 0.2)) 100% 50% / 7% 1px no-repeat;
}

.cool-loader__reticle::before,
.cool-loader__reticle::after {
	content: "";
	position: absolute;
	inset: 16%;
	border-radius: 50%;
	border: 1px solid rgba(239, 250, 255, 0.07);
}

.cool-loader__reticle::after {
	inset: 28%;
	border-style: dashed;
	animation: cool-loader-spin-reverse 12s linear infinite;
}

.cool-loader__ring,
.cool-loader__gimbal {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.cool-loader__ring {
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 18deg,
		rgba(239, 250, 255, 0.94) 20deg,
		var(--cool-loader-cyan) 25deg,
		transparent 35deg,
		transparent 178deg,
		rgba(2, 54, 93, 0.74) 190deg,
		transparent 218deg,
		transparent 360deg
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
}

.cool-loader__ring--outer {
	inset: 5%;
	animation: cool-loader-spin 4.6s linear infinite;
}

.cool-loader__ring--middle {
	inset: 19%;
	opacity: 0.76;
	animation: cool-loader-spin-reverse 6.8s linear infinite;
}

.cool-loader__ring--inner {
	inset: 32%;
	opacity: 0.95;
	animation: cool-loader-spin 3.2s linear infinite;
}

.cool-loader__gimbal {
	inset: 22%;
	background: conic-gradient(
		from 70deg,
		transparent 0deg,
		rgba(75, 216, 255, 0.24) 18deg,
		rgba(239, 250, 255, 0.78) 20deg,
		transparent 42deg,
		transparent 182deg,
		rgba(239, 250, 255, 0.22) 210deg,
		transparent 238deg,
		transparent 360deg
	);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.4px), #000 calc(100% - 0.6px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 1.4px), #000 calc(100% - 0.6px));
	transform-style: preserve-3d;
}

.cool-loader__gimbal--x {
	animation: cool-loader-gimbal-x 5.8s linear infinite;
}

.cool-loader__gimbal--y {
	inset: 25%;
	opacity: 0.78;
	animation: cool-loader-gimbal-y 7.2s linear infinite;
}

.cool-loader__gimbal--z {
	inset: 29%;
	opacity: 0.58;
	animation: cool-loader-gimbal-z 9s linear infinite;
}

.cool-loader__satellite {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	animation: cool-loader-spin 7.5s linear infinite;
}

.cool-loader__satellite::before {
	content: "";
	position: absolute;
	top: 14%;
	right: 14%;
	width: clamp(8px, 1.3vmin, 14px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--cool-loader-ice);
	box-shadow:
		0 0 12px rgba(239, 250, 255, 0.96),
		0 0 28px rgba(75, 216, 255, 0.78);
}

.cool-loader__core {
	position: absolute;
	inset: 36%;
	z-index: 2;
	display: grid;
	place-items: center;
	border: 1px solid rgba(239, 250, 255, 0.18);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(2, 54, 93, 0.22), rgba(0, 0, 0, 0.38)),
		rgba(0, 0, 0, 0.22);
	box-shadow:
		inset 0 0 18px rgba(75, 216, 255, 0.08),
		0 0 34px rgba(2, 54, 93, 0.36);
	overflow: hidden;
}

.cool-loader__core::before {
	content: "";
	position: absolute;
	inset: -45%;
	background: linear-gradient(90deg, transparent 38%, rgba(239, 250, 255, 0.22) 50%, transparent 62%);
	transform: rotate(22deg) translateX(-42%);
	animation: cool-loader-scan 2.8s ease-in-out infinite;
}

.cool-loader__logo {
	position: relative;
	z-index: 1;
	display: block;
	width: 78%;
	max-height: 78%;
	object-fit: contain;
	filter:
		drop-shadow(0 0 8px rgba(255, 255, 255, 0.24))
		drop-shadow(0 0 16px rgba(75, 216, 255, 0.22));
}

@keyframes cool-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes cool-loader-spin-reverse {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes cool-loader-gimbal-x {
	from {
		transform: rotateX(66deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(66deg) rotateZ(360deg);
	}
}

@keyframes cool-loader-gimbal-y {
	from {
		transform: rotateY(66deg) rotateZ(35deg);
	}

	to {
		transform: rotateY(66deg) rotateZ(395deg);
	}
}

@keyframes cool-loader-gimbal-z {
	from {
		transform: rotateX(58deg) rotateY(54deg) rotateZ(0deg);
	}

	to {
		transform: rotateX(58deg) rotateY(54deg) rotateZ(-360deg);
	}
}

@keyframes cool-loader-scan {
	0%,
	100% {
		transform: rotate(22deg) translateX(-54%);
		opacity: 0;
	}

	35%,
	58% {
		opacity: 1;
	}

	80% {
		transform: rotate(22deg) translateX(54%);
		opacity: 0;
	}
}

@keyframes cool-loader-stars {
	to {
		background-position:
			180px 180px,
			-228px 318px,
			220px -114px;
	}
}

@keyframes cool-loader-internal-line {
	0% {
		transform: translateX(-120%);
	}

	100% {
		transform: translateX(260%);
	}
}

@media (max-width: 520px) {
	.cool-loader__stage {
		width: min(82vw, 360px);
	}

	.cool-loader__core {
		inset: 34%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cool-loader__stars,
	.cool-loader__ring,
	.cool-loader__gimbal,
	.cool-loader__satellite,
	.cool-loader__core::before,
	.cool-loader__reticle::after,
	.cool-loader-internal__indicator span {
		animation-duration: 1ms;
		animation-iteration-count: 1;
	}

	.cool-loader--internal {
		transition-duration: 1ms;
	}
}