:root {
	--loader-green: #06c167;
}

#pageLoader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: #fff;
	transition:
		opacity 0.45s ease,
		visibility 0.45s ease;
}

#pageLoader[hidden] {
	display: none;
}
#pageLoader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.loader-content {
	font-family:
		Inter,
		-apple-system,
		BlinkMacSystemFont,
		sans-serif;
	text-align: center;
}
.loader-dots {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-bottom: 15px;
}
.loader-dots span {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: #e6e6e6;
	animation: loader-dot 1.2s infinite;
}
.loader-dots span:nth-child(2) {
	animation-delay: 0.2s;
}
.loader-dots span:nth-child(3) {
	animation-delay: 0.4s;
}
.loader-logo {
	margin: 20px 0 10px;
	color: #111;
	font-size: clamp(42px, 8vw, 68px);
	font-weight: 900;
	letter-spacing: -2px;
}
.loader-logo span {
	color: var(--loader-green);
}
.loader-text {
	color: #777;
	font-size: 20px;
}

@keyframes loader-dot {
	0%,
	100% {
		background: #e6e6e6;
		transform: translateY(0);
	}
	50% {
		background: var(--loader-green);
		transform: translateY(-8px);
	}
}

@media (prefers-reduced-motion: reduce) {
	#pageLoader {
		transition: none;
	}
	.loader-dots span {
		animation: none;
	}
}