/* ===========================================================
   Pogosov studio — прелоадер «три удара»: оформление.
   Движение и логика — preloader/preloader.js (там же описание сцены).

   Сцена — три одинаковых по геометрии слоя: чёрный, бумага, оранжевый.
   Каждый слой — фон + сетка (те же три вертикальные линии, что в hero) +
   струна + штрихи удара + слэш + строка с логотипом и номером.
   Отличаются слои только цветами (переменные --pl-* ниже), поэтому
   волна «нового цвета» — это clip-path: circle() следующего слоя.
   В каждом кадре есть все три цвета студии: на чёрном слэш оранжевый,
   на бумаге — тоже, на оранжевом слэш и линии белые, логотип чернильный
   (как шапка над оранжевыми разделами).
   =========================================================== */

/* До сборки сцены: чёрный экран вместо мелькания страницы.
   !important — сильнее html.is-edge (js/overscroll.js) и других тем корня. */
html.pl-hide { background: #141311 none !important; }
html.pl-hide body { visibility: hidden; }
html.pl-hide .pl { visibility: visible; }

/* Пока сцена на экране: линии hero уже нарисованы (оранжевый сворачивается прямо на них —
   его белые линии стоят там же), настоящий курсор ждёт, пока его место держит сцена,
   кольцо курсора (top layer, выше любых z-index) спрятано. */
html.pl-on .hero__lines i { transform: none; transition: none; }
html.pl-on [data-preloader-target] { visibility: hidden; }
html.pl-on .cursor-ring { visibility: hidden; }

.pl {
	position: fixed; inset: 0; z-index: 2000;
	overflow: hidden; contain: strict;
	--pl-fy: 60vh;        /* уровень струны — пишет скрипт */
}
.pl.is-through { pointer-events: none; }                 /* сворачивание: страница уже доступна */
.pl.is-fading { opacity: 0; transition: opacity 280ms var(--ease-out, ease-out); }   /* пропуск */

/* ---------- слои ---------- */
.pl__layer { position: absolute; inset: 0; background: var(--pl-bg); }
.pl__layer--night {
	--pl-bg: #141311;
	--pl-line: rgba(250, 249, 247, .18);
	--pl-floor: rgba(250, 249, 247, .5);
	--pl-slash: #FE6D41;
	--pl-stroke: #FE6D41;
	--pl-text: rgba(250, 249, 247, .66);
	--h-ink: #FAF9F7; --h-slash: #FE6D41;                /* логотип, как в шапке над тёмным блоком */
}
.pl__layer--paper {
	--pl-bg: #FAF9F7;
	--pl-line: #E6E3DD;                                  /* цвет линий hero */
	--pl-floor: rgba(20, 19, 17, .42);
	--pl-slash: #FE6D41;
	--pl-stroke: #141311;
	--pl-text: #6B6760;
	--h-ink: #141311; --h-slash: #FE6D41;
}
.pl__layer--accent {
	--pl-bg: #FE6D41;
	--pl-line: rgba(255, 255, 255, .34);
	--pl-floor: rgba(255, 255, 255, .8);
	--pl-slash: #FFFFFF;
	--pl-stroke: #FFFFFF;
	--pl-text: #FFFFFF;
	--h-ink: #141311; --h-slash: #FFFFFF;
}
/* волны: пока удар не случился, слой закрыт кругом нулевого радиуса */
.pl__layer--paper, .pl__layer--accent { clip-path: circle(0 at 50% 50%); }
.pl.is-covered .pl__layer--night,
.pl.is-covered .pl__layer--paper,
.pl.is-covered .pl__ring { display: none; }

/* всё, кроме фона слоя, гасится разом через --pl-decor: так оранжевый сворачивается в курсор чистым (пишет скрипт) */
.pl__grid, .pl__fx { opacity: var(--pl-decor, 1); }

/* ---------- сетка: линии hero, растут из струны вверх и вниз ---------- */
.pl__grid { position: absolute; inset: 0; }
.pl__grid > div {
	position: relative; height: 100%;
	max-width: var(--maxw, 1440px); margin-inline: auto;
	padding-inline: var(--gutter, clamp(20px, 4.4vw, 72px));
}
.pl__grid i {
	position: absolute; top: 0; bottom: 0; width: 1px; background: var(--pl-line);
	left: calc(var(--gutter, clamp(20px, 4.4vw, 72px)) + (100% - var(--gutter, clamp(20px, 4.4vw, 72px)) * 2) * var(--p));
	transform-origin: 50% var(--pl-fy);
}
.pl__grid i:nth-child(1) { --p: .25; transform: scaleY(var(--pl-g1, 0)); }
.pl__grid i:nth-child(2) { --p: .5;  transform: scaleY(var(--pl-g2, 0)); }
.pl__grid i:nth-child(3) { --p: .75; transform: scaleY(var(--pl-g3, 0)); }
@media (max-width: 860px) { .pl__grid i:nth-child(2) { display: none; } }

/* ---------- струна, штрихи, слэш (SVG в пикселях экрана) ---------- */
.pl__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl__floor { fill: none; stroke: var(--pl-floor); stroke-width: 1; }
.pl__strokes line { stroke: var(--pl-stroke); stroke-width: 1.5; stroke-linecap: round; }
.pl__slash { fill: var(--pl-slash); }

/* кольцо на фронте волны — цвета слоя, который она несёт */
.pl__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pl__ring circle { fill: none; stroke-width: 1.5; }
.pl__ring--paper circle { stroke: #FAF9F7; }
.pl__ring--accent circle { stroke: #FE6D41; }

/* ---------- строка сверху: логотип там же и того же размера, что в шапке, справа номер удара ---------- */
.pl__bar {
	position: absolute; left: 0; right: 0; top: 0;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	height: var(--header-h, 72px);
	max-width: var(--maxw, 1440px); margin-inline: auto;
	padding-inline: var(--gutter, clamp(20px, 4.4vw, 72px));
	opacity: calc(var(--pl-meta, 0) * var(--pl-decor, 1));
}
.pl__logo svg { display: block; width: clamp(118px, 11vw, 158px); height: auto; }
.pl__logo .header__logo-ink { fill: var(--h-ink); }
.pl__logo .header__logo-slash { fill: var(--h-slash); }
.pl__count {
	display: flex; align-items: center; gap: 12px;
	font: 600 .75rem/1 var(--font-text, "Inter", system-ui, sans-serif);
	letter-spacing: .14em; color: var(--pl-text);
	font-variant-numeric: tabular-nums;
}
.pl__count i { width: 32px; height: 1px; background: currentColor; opacity: .5; }
.pl__count b { font-weight: 600; color: var(--pl-slash); }