/*
 * Полноэкранный экран загрузки сайта.
 * Показывается сразу при заходе на любую страницу, скрывается скриптом
 * assets/js/preloader.js после полной загрузки страницы (см. этот файл —
 * там же логика минимального времени показа и запасной таймаут).
 */

.radeka-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999; /* Выше шапки/модалок/лайтбокса — должен перекрывать буквально всё. */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F3EEE7; /* Тон в цвет самого изображения, чтобы не было цветной рамки по краям при разных пропорциях экрана. */
}

/* Класс, который JS добавляет непосредственно перед скрытием — плавное затухание, а не резкое исчезновение. */
.radeka-preloader.is-hiding {
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

/* Класс, который JS добавляет после окончания transition — полностью убираем из потока и из accessibility-дерева. */
.radeka-preloader.is-hidden {
	display: none;
}

.radeka-preloader__inner {
	width: min(90vw, 1100px);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.radeka-preloader__bg {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 28px;
}

.radeka-preloader__bar {
	width: 100%;
	max-width: 640px;
	height: 6px;
	border-radius: 999px;
	background: rgba(30, 26, 20, 0.12);
	overflow: hidden;
}

.radeka-preloader__bar-fill {
	display: block;
	height: 100%;
	width: 30%;
	border-radius: inherit;
	background: linear-gradient(90deg, #8a6a3f, #c9a464);
	/* Анимация неопределённого прогресса: мы не знаем реальный процент загрузки
	   ресурсов страницы, поэтому полоска "гуляет" туда-сюда, а не растёт линейно —
	   это честнее по отношению к пользователю, чем выдуманный процент. */
	animation: radeka-preloader-indeterminate 1.4s ease-in-out infinite;
}

@keyframes radeka-preloader-indeterminate {
	0% {
		transform: translateX(-100%);
		width: 30%;
	}
	50% {
		width: 55%;
	}
	100% {
		transform: translateX(220%);
		width: 30%;
	}
}

.radeka-preloader__label {
	margin: 18px 0 0;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(20px, 2.4vw, 28px);
	letter-spacing: 0.12em;
	color: #4a3d2c;
}

.radeka-preloader__dots {
	display: inline-block;
	width: 1.6em; /* Фиксированная ширина под самую длинную фазу анимации — текст правее не подрагивает при смене количества точек. */
	text-align: left;
	animation: radeka-preloader-dots 1.2s steps(4, end) infinite;
	overflow: hidden;
	vertical-align: bottom;
}

@keyframes radeka-preloader-dots {
	0% { width: 0; }
	100% { width: 1.6em; }
}

/* Уважаем настройку "уменьшить анимацию" — оставляем статичную полосу и точки без движения. */
@media (prefers-reduced-motion: reduce) {
	.radeka-preloader__bar-fill {
		animation: none;
		width: 60%;
	}
	.radeka-preloader__dots {
		animation: none;
		width: 1.6em;
	}
	.radeka-preloader.is-hiding {
		transition: none;
	}
}

@media (max-width: 600px) {
	.radeka-preloader__inner {
		width: 86vw;
	}
	.radeka-preloader__label {
		letter-spacing: 0.08em;
	}
}