/* --- Основной экран --- */
.sp-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #020618; /* Или твой цвет #020618 */
	z-index: 999999;
	overflow: hidden;

	transform: translate3d(0, 0, 0);
	will-change: transform;

	/* Шторка едет 0.5 сек (как ты хотел) */
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}

/* --- Логика Шторки --- */

/* 1. Улетает вверх (после загрузки страницы) */
.sp-screen.sp-hidden {
	transform: translate3d(0, -100%, 0);
}

/* 2. Сброс вниз (перед кликом) */
.sp-screen.sp-reset-bottom {
	transition: none !important;
	transform: translate3d(0, 100%, 0);
}

/* 3. Выезд снизу (при клике) */
.sp-screen.sp-entering {
	transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) !important;
	transform: translate3d(0, 0, 0);
}

/* --- Логика Иконки (Brand Icon) --- */

.brand-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	/* Объединяем X и Y в одну строку, иначе сработает только последнее */
	transform: translate(-50%, -50%);

	width: 100px; /* Задай нужный размер */
	height: auto;

	/* Состояние по умолчанию (на загруженной странице): ВИДИМА */
	opacity: 1;
	transition: opacity 0.5s ease;
}

/* * Сценарий перехода:
 * 1. Шторку телепортировали вниз (sp-reset-bottom).
 * Иконку мгновенно скрываем, чтобы она не приехала вместе со шторкой снизу.
 */
.sp-screen.sp-reset-bottom .brand-icon {
	opacity: 0;
	transition: none;
}

/* * 2. Шторка поехала вверх (sp-entering).
 * Мы возвращаем opacity: 1, но добавляем ЗАДЕРЖКУ (delay).
 * Шторка едет 0.5с. Мы ждем 0.3с, и начинаем плавно показывать иконку.
 */
.sp-screen.sp-entering .brand-icon {
	opacity: 1;
	/* transition: свойство | длительность появления | тип | задержка */
	/* 0.2s — само появление, 0.3s — ждем, пока шторка проедет больше половины пути */
	transition: opacity 0.3s ease 0.2s;
}

html {
	background-color: #020618 !important;
}

body {
	overflow: hidden;
	background-color: #fff;
}

/* body.sp-loading-active {
	overflow: hidden;
	background-color: #020618 !important;
} */

:root {
	--main-bg: #ffffff; /* цвет по умолчанию */
	background-color: var(--main-bg);
}

body.sp-loading-active {
	--main-bg: #020618;
}