/*
 * Индикатор загрузки.
 *
 * Тёмное полотно, имя тем же шрифтом, что и логотип в шапке, и под ним короткая
 * линия с бегущим фиолетовым бликом. Больше ничего: индикатор должен сообщать,
 * что сайт грузится, и не соревноваться с первым экраном.
 *
 * Два состояния на <html>: is-loading — полотно показано, is-loaded — оно гаснет.
 * Оба ставит assets/js/preloader.js.
 */

/* По умолчанию индикатора нет: его включает только класс на <html>. */
.preloader {
	display: none;
}

html.is-loading .preloader {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	position: fixed;
	inset: 0;
	/* Именно 100vw, а не 100%. Если у страницы появится горизонтальное
	   переполнение, и inset, и width:100% растянут полотно до ширины прокрутки
	   (замерено: 420px при вьюпорте 375) — 100vw остаётся равным экрану. */
	width: 100vw;
	/* dvh — чтобы на iOS полотно совпадало с реально видимой областью и не
	   прыгало вместе с адресной строкой. vh остаётся запасным вариантом. */
	height: 100vh;
	height: 100dvh;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	/* Выше попапов темы (10000). Конфликта с ними нет — к моменту, когда их
	   можно открыть, узла уже нет в DOM. */
	z-index: 10010;
	background-color: #111315;
	opacity: 1;
	-webkit-transition: opacity 300ms ease;
	        transition: opacity 300ms ease;
}

html.is-loaded .preloader {
	opacity: 0;
	pointer-events: none;
}

.preloader__inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0 1.25rem;
	text-align: center;
}

/* Кегль и начертание — как у логотипа в шапке. */
.preloader__name {
	margin: 0;
	font-family: Unbounded, "Segoe UI", system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(1.25rem, 5vw, 1.875rem);
	line-height: 1.2;
	letter-spacing: 0.012em;
	color: #fff;
	white-space: nowrap;
	-webkit-animation: kh-load-in 300ms ease both;
	        animation: kh-load-in 300ms ease both;
}

.preloader__line {
	position: relative;
	width: 6.25rem;
	height: 2px;
	margin-top: 1.5rem;
	border-radius: 2px;
	overflow: hidden;
	background-color: rgba(130, 40, 227, 0.22);
	-webkit-animation: kh-load-in 300ms ease 80ms both;
	        animation: kh-load-in 300ms ease 80ms both;
}

/* Блик ходит по линии, пока страница грузится. */
.preloader__line::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40%;
	height: 100%;
	border-radius: 2px;
	background-image: linear-gradient(90deg,
		rgba(130, 40, 227, 0) 0%,
		#8228E3 50%,
		rgba(130, 40, 227, 0) 100%);
	-webkit-box-shadow: 0 0 8px rgba(130, 40, 227, 0.65);
	        box-shadow: 0 0 8px rgba(130, 40, 227, 0.65);
	-webkit-animation: kh-load-slide 900ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
	        animation: kh-load-slide 900ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@-webkit-keyframes kh-load-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes kh-load-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@-webkit-keyframes kh-load-slide {
	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
	to   { -webkit-transform: translateX(250%);  transform: translateX(250%); }
}

@keyframes kh-load-slide {
	from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
	to   { -webkit-transform: translateX(250%);  transform: translateX(250%); }
}

/* ---------- первый экран под полотном ---------- */

/*
 * Единственное, что индикатор знает о первом экране: пока он открыт, заголовок
 * не должен просвечивать в промежуточном состоянии, которое ему задаёт бандл
 * (слова уведены вниз и погашены). Поэтому на время загрузки состояние
 * фиксируется, а при закрытии снимается обычным проявлением — без лесенок и
 * стыковки фаз. Author !important перебивает инлайновые стили GSAP.
 */
html.is-loading .main-screen .word,
html.is-loading .main-screen__button,
html.is-loading .main-screen__text,
html.is-loading .main-screen__image,
html.is-loading .main-screen__link {
	opacity: 0 !important;
}

html.is-loading .main-screen .word {
	-webkit-transform: none !important;
	        transform: none !important;
}

html.is-loaded .main-screen .word,
html.is-loaded .main-screen__button,
html.is-loaded .main-screen__text,
html.is-loaded .main-screen__image,
html.is-loaded .main-screen__link {
	opacity: 1 !important;
	-webkit-transition: opacity 320ms ease 120ms;
	        transition: opacity 320ms ease 120ms;
}

html.is-loaded .main-screen .word {
	-webkit-transform: none !important;
	        transform: none !important;
}

/* У стрелки в теме свой transition: 2s — плавный поворот при наведении.
   Общее правило выше заменяло его на «только opacity», и первые секунды
   после загрузки стрелка поворачивалась рывком. Оставляем обе анимации. */
html.is-loaded .main-screen__image {
	-webkit-transition: opacity 320ms ease 120ms, -webkit-transform 2s ease;
	        transition: opacity 320ms ease 120ms, transform 2s ease;
}

/* ---------- сокращённое движение ---------- */

@media (prefers-reduced-motion: reduce) {
	.preloader__name,
	.preloader__line {
		-webkit-animation: none;
		        animation: none;
		opacity: 1;
	}

	/* Блик замирает в середине линии — индикатор остаётся, движение уходит. */
	.preloader__line::after {
		-webkit-animation: none;
		        animation: none;
		left: 30%;
	}

	html.is-loading .preloader {
		-webkit-transition: opacity 200ms linear;
		        transition: opacity 200ms linear;
	}

	html.is-loaded .main-screen .word,
	html.is-loaded .main-screen__button,
	html.is-loaded .main-screen__text,
	html.is-loaded .main-screen__image,
	html.is-loaded .main-screen__link {
		-webkit-transition: opacity 200ms linear;
		        transition: opacity 200ms linear;
	}
}