/*
##########################################
LOADING SPINNER
##########################################
*/
#loading-page {
	position: fixed;
	z-index: var(--z-spinner);
	inset: 0;
	width: 100%;
	height: 100%;
	background: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transform: translateZ(0);
	transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
	animation: loadingPageFailsafeHide 0s linear 3200ms forwards;
}

#loading-page.is-leaving {
	opacity: 0;
	will-change: opacity;
	pointer-events: none;
}

#loading-page.is-hidden {
	visibility: hidden;
	display: none;
}

#loading-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.1rem;
	width: min(84vw, 22rem);
}

#loading-logo {
	width: 100%;
	display: flex;
	justify-content: center;
}

#loading-logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

#loading-logo .custom-logo {
	width: min(84vw, 15rem);
	height: auto;
	max-height: 5rem;
	object-fit: contain;
}

.loading-logo__text {
	color: var(--color-primary-alt);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: 0.03em;
}

#loading-bars {
	width: min(78vw, 12rem);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.loading-bar {
	flex: 1 1 auto;
	height: 0.35rem;
	border-radius: 999px;
	transform-origin: center;
	animation: loadingBarPulse 1s ease-in-out infinite;
}

.loading-bar--1 {
	background: var(--color-primary-alt);
	animation-delay: 0s;
}

.loading-bar--2 {
	background: var(--color-primary);
	animation-delay: 0.12s;
}

.loading-bar--3 {
	background: var(--color-secondary);
	animation-delay: 0.24s;
}

@keyframes loadingBarPulse {
	0%,
	100% {
		transform: scaleX(0.72);
		opacity: 0.55;
	}

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

@keyframes loadingPageFailsafeHide {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#loading-page {
		transition: none;
		animation-duration: 0s;
		animation-delay: 1200ms;
	}

	.loading-bar {
		animation: none;
		opacity: 0.85;
		transform: none;
	}
}

@media (max-width: 767.98px) {
	#loading-wrapper {
		gap: 0.95rem;
	}

	#loading-logo .custom-logo {
		width: min(86vw, 13rem);
		max-height: 4.5rem;
	}

	#loading-bars {
		width: min(80vw, 10.5rem);
	}
}