.loader {
	display: none;
}

.js.has-loader .loader {
	align-items: center;
	background-color: var(--c-bg);
	color: var(--c-text);
	display: flex;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 50;
}

.js.has-loader.is-loader-painted .loader {
	animation: loader-hide 0.4s ease-out 3.5s forwards;
}

.js.has-loader .loader.is-loaded {
	animation: loader-out 0.4s ease-out forwards;
	pointer-events: none;
}

.loader__inner {
	line-height: 1;
	opacity: 0;
	text-align: center;
}

.is-loader-painted .loader__inner {
	animation: loader-in 0.6s ease-out 0.1s both;
}

.loader__sub {
	display: block;
	font-family: var(--ff-serif);
	font-size: 11px;
	letter-spacing: 0.15em;
}

.loader__main {
	display: block;
	font-family: var(--ff-serif);
	font-size: 30px;
	font-weight: 500;
	letter-spacing: 0.05em;
	margin-top: 4px;
}

.loader__line {
	background-color: var(--c-accent);
	display: block;
	height: 2px;
	margin: 20px auto 0;
	transform: scaleX(0);
	transform-origin: left center;
	width: 60px;
}

.is-loader-painted .loader__line {
	animation: loader-line 0.6s ease-out 0.4s forwards;
}

@media (prefers-reduced-motion: reduce) {

.js.has-loader .loader {
	display: none;
}

}

@keyframes loader-in {

from {
	opacity: 0;
	transform: translateY(8px);
}

to {
	opacity: 1;
	transform: none;
}

}

@keyframes loader-line {

to {
	transform: scaleX(1);
}

}

@keyframes loader-hide {

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

}

@keyframes loader-out {

to {
	opacity: 0;
	visibility: hidden;
}

}