/* ══════════════════════════════════════════════════════════════════════════
   ПРЕЛОАДЕР v2 — 03.09.2026. Переписан с нуля вместо прежних 33 КБ кода
   и 11 КБ стилей. Решение владельца после двух суток поиска дефекта.

   ЧТО СНЕСЕНО И ЧЕМ ОНО ПЛАТИЛО
     ирис            SVG во весь экран с растущей обрезкой поверх всего —
                     композитор пересобирал экран каждый кадр
     кольцо          текстура диаметром в диагональ, до 38 МБ при dpr 3,
                     растеризовалась на первом кадре запуска
     белая заливка   полноэкранный слой с translateZ(0): буква внутри
                     продвинутого слоя перерастеризовывалась каждый кадр
     подписи ×2      переверстывались по fonts.ready
     fitCaps         замер референсной строки вставкой узла в DOM —
                     четыре синхронных лейаута в поддереве с картинкой
     resize          обработчик звал пересчёт; на iOS адресная строка при
                     первом входе выдаёт очередь из десятков событий

   ПЯТЬ ПРАВИЛ, НА КОТОРЫХ ДЕРЖИТСЯ ПЛАВНОСТЬ
     1. Центрирование делает flex. Обработчика resize нет вовсе, поэтому
        поворот экрана и сворачивание адресной строки не стоят ничего.
     2. Размеры заданы числами. Ни одного чтения раскладки за весь показ.
     3. Уход через opacity — свойство композитора, лейаута не вызывает.
     4. Ни will-change, ни translateZ: продвижение слоя не бесплатно,
        а анимировать здесь нечего.
     5. Ширина луча равна ширине подписи ПО ПОСТРОЕНИЮ: блок сжат по
        содержимому, луч тянется на 100% от него. Замеров нет.

   БУКВА — ФАЙЛ 400, НЕ 800. Замерено на живом iPhone в сцене, где
   отличалась ровно одна переменная: 400 идёт ровно, 800 рвётся.
   Стоимость распаковки 4.8 против 19.2 Мпикс/с при потолке устройства
   между 4.8 и 9.4 — аппаратного декодера анимированного WebP у Apple нет.
   Визуально разницы нет: буква гладкая, растяжение переживает незаметно.
   ══════════════════════════════════════════════════════════════════════════ */

.pl{
  position:fixed; inset:0; z-index:99999; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font:12px/1 "Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  color:rgba(0,0,0,.6);
  transition:opacity .45s linear;
}
.pl[hidden]{display:none}
.pl.is-out{opacity:0; pointer-events:none}

.pl__a{display:block; width:83px; height:83px; pointer-events:none}
@media (min-width:768px){ .pl__a{width:200px; height:200px} }

/* Подвал: луч и подпись под ним. Ширину задаёт сама подпись. */
.pl__foot{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(24vh + env(safe-area-inset-bottom,0px));
  width:max-content; text-align:center; letter-spacing:-.05em;
  pointer-events:none;
  /* Подвал показывается, когда шрифты доехали. Иначе строка сначала
     рисуется запасным шрифтом, потом Druk — ширина меняется, а вместе
     с ней и ширина луча, который к ней привязан. Один видимый скачок.
     Прятать до готовности дешевле, чем подгонять: подгонка — это замер,
     а замеров в этом прелоадере нет ни одного. */
  opacity:0; transition:opacity .2s linear;
}
.pl__foot.is-ready{opacity:1}
@media (min-width:768px){ .pl__foot{bottom:27vh} }

.pl__bar{
  display:block; width:100%; height:10px; margin:0 0 14px; border-radius:5px;
  transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,rgba(150,118,255,0),#9676ff 40%,#c9b8ff);
  box-shadow:0 0 12px 2px rgba(150,118,255,.55);
}
/* Тайминг задан кадрами анимации, JS не участвует: половина сразу,
   дальше 30, 15 и 5 процентов равными долями показа. */
.pl:not([hidden]) .pl__bar{ animation:pl-bar var(--pl-dur,2s) linear forwards }
@keyframes pl-bar{
  0%   {transform:scaleX(.50)}
  33.3%{transform:scaleX(.80)}
  66.6%{transform:scaleX(.95)}
  100% {transform:scaleX(1)}
}

.pl__brand{
  font-family:"Druk Wide Cyr","Inter",sans-serif; font-weight:700;
  text-transform:lowercase; color:#0A0A0A;
  position:relative; top:-.03em;
}