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

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

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

/* Пока сцена на экране, шапка спрятана и проявляется вместе с hero (иначе после белого экрана она бы «щёлкнула»);
   кольцо курсора (top layer, выше любых z-index) спрятано. */
html.plg-on .header { opacity: 0; }
html.plg-in .header { transition: opacity 700ms var(--ease-out, ease-out) 250ms; }
html.plg-on .cursor-ring { visibility: hidden; }

.plg {
	position: fixed; inset: 0; z-index: 2000;
	overflow: hidden; contain: strict;
}
.plg.is-fading { opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-out, ease-out); }   /* пропуск */

/* ---------- слои ---------- */
.plg__layer { position: absolute; inset: 0; background: var(--plg-bg); }
.plg__layer--night {
	--plg-bg: #141311;
	--plg-floor: rgba(250, 249, 247, .5);
	--plg-slash: #FE6D41;
	--plg-stroke: #FE6D41;
}
.plg__layer--accent {
	--plg-bg: #FE6D41;
	--plg-floor: rgba(255, 255, 255, .8);
	--plg-slash: #FFFFFF;
	--plg-stroke: #FFFFFF;
	clip-path: circle(0 at 50% 50%);   /* волна: пока 2-й удар не случился, слой закрыт кругом нулевого радиуса */
}
.plg.is-covered .plg__layer--night,
.plg.is-covered .plg__ring { display: none; }

/* ---------- струна, штрихи, слэш, буквы (SVG в пикселях экрана) ---------- */
.plg__fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plg__floor { fill: none; stroke: var(--plg-floor); stroke-width: 1; }
.plg__strokes line { stroke: var(--plg-stroke); stroke-width: 1.5; stroke-linecap: round; }
.plg__slash { fill: var(--plg-slash); }
.plg__word { fill: #141311; }

/* кольцо на фронте волны оранжевого */
.plg__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.plg__ring circle { fill: none; stroke: #FE6D41; stroke-width: 1.5; }