/* Прелоадер: сетка первого экрана и крупный контурный знак G — тот же, что на фоне первого экрана,
	в том же месте и того же размера. По контуру знака бежит обводка фирменного цвета со шлейфом.
	Показывается, только если в <head> отработал скрипт (класс is-loading); без JS его нет вовсе.
	Если скрипт снятия не сработал — сам гаснет через 6 с и не закрывает сайт. */
.preloader {
	display: none;
}

html.is-loading .preloader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: block;
	background: var(--c-black);
	animation: preloader-out 400ms var(--ease-out) 6s forwards;
}

html.is-loaded .preloader {
	opacity: 0;
	visibility: hidden;
	transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms;
}

@keyframes preloader-out {
	to { opacity: 0; visibility: hidden; }
}

/* Знак: размер как у .hero__mark (3,4 ячейки), стоит точно по центру экрана */
.preloader__radar {
	--cell: calc(100vw / 12);
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--cell) * 3.4);
	aspect-ratio: 722 / 721;
	translate: -50% -50%;
}

/* Контур знака: тонкая серая линия, как фон первого экрана */
.preloader__mark {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.preloader__base path {
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 1px;
	vector-effect: non-scaling-stroke;
}

/* Обводка со шлейфом: несколько отрезков разной длины с общей головой — от яркого к прозрачному;
	без non-scaling-stroke: иначе длины штрихов считаются в пикселях экрана, а не в долях контура;
	толщина задана в единицах рисунка (722 по ширине) — около 2 px на экране */
.preloader__trail {
	stroke: var(--accent);
	stroke-width: 3.6;
	stroke-linecap: round;
	stroke-dasharray: var(--len) calc(100 - var(--len));
	opacity: var(--a);
	/* голова у всех слоёв в одной точке: длинный слой отстаёт по времени на свою добавочную длину */
	animation: preloader-run 2.2s linear infinite;
	animation-delay: calc((var(--shift) / 100 - 1) * 2.2s);
}

@keyframes preloader-run {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 0; }
}

@media (max-width: 900px) {
	.preloader__radar { width: calc(var(--cell) * 6.8); }
}

@media (prefers-reduced-motion: reduce) {
	.preloader__trail { animation: none; stroke-dashoffset: var(--shift); }
}