/* ============================================================
   ЭКРАН ЗАГРУЗКИ — ОДИН НА ТРИ СТРАНИЦЫ

   Путь заказа разложен по трём страницам, и переход между ними — это
   полная перезагрузка. Карта и редактор поднимаются не мгновенно:
   конструктор собирает растр города, редактор поднимает пачку карточек
   из базы. Всё это время человек смотрел на пустое место или, хуже, на
   шапку без содержимого — и не понимал, нажалось ли вообще.

   Штора закрывает ожидание с обеих сторон: на уходящей странице её
   показывает клик по внутренней ссылке, на приходящей — она уже стоит
   первым кадром и уходит, когда страница готова.

   Стили лежат отдельным файлом, а не в разметке страниц: редактор
   (editor.html) намеренно не подключает base.css, поэтому общий файл
   тут единственный способ не разводить три копии.
   ============================================================ */

#boot {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: #1A1C20; color: #EDEAE3;
    transition: opacity .42s ease, visibility .42s;
}
#boot[hidden] { display: none; }
#boot.is-out { opacity: 0; visibility: hidden; }

/* Пока штора висит, страница под ней не прокручивается: докрутить
   плёнку до середины и выйти из-под шторы на середину сцены — худшее,
   что может случиться с первым впечатлением. */
html.boot-on, html.boot-on body { overflow: hidden; }

.boot-in { display: flex; flex-direction: column; align-items: center; gap: 26px; }

.boot-cap {
    margin: 0; font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .85;
}
/* Точки загораются по очереди — это и есть счёт времени: три шага по
   полсекунды, потом заново. */
.boot-cap i { font-style: normal; opacity: .25; animation: bootDot 1.5s steps(1, end) infinite; }
.boot-cap i:nth-child(2) { animation-delay: .5s; }
.boot-cap i:nth-child(3) { animation-delay: 1s; }
@keyframes bootDot { 0%, 33% { opacity: 1 } 34%, 100% { opacity: .25 } }

/* ЗНАК — ТОТ ЖЕ, ЧТО В ШАПКЕ, И ЗАКРАШЕННЫЙ.

   На шторе стояла крышка тубуса (#boot-lid), нарисованная волосяными
   контурами. Вещь красивая, но на экране загрузки человек ищет глазами
   знакомое — логотип, — а не предмет, которого он ещё не видел.

   Знак собран из переменных: --logo-fill заливает основания пинов,
   --logo-hole — их головки, --logo-line — обводку. В шапке головки
   залиты цветом бумаги, чтобы читаться прорезями; здесь тем же приёмом
   берём цвет шторы. Основания закрашены светлым — как в шапке. */
.boot-mark {
    width: 116px; height: 116px;
    /* БЕЗ ЗАЛИВКИ: ЗНАК СТОИТ ЧЕРТЕЖОМ.

       Залитые основания пинов на тёмном поле сливались в плотную
       звезду — светлое пятно, которое на крупном размере читается
       кляксой, а не знаком. Контур оставляет рисунок разборчивым:
       видно и лучи, и головки. Головки при этом залиты цветом шторы —
       так они остаются прорезями там, где фигуры накладываются. */
    --logo-fill: none;
    --logo-hole: #1A1C20;
    --logo-line: #EDEAE3;
    /* Центральная точка тоже без заливки — как и всё остальное. В
       шапке она оранжевая, единственное цветное пятно знака; здесь
       залитая точка осталась бы единственным пятном на чертеже. */
    --logo-dot: none;
    /* ТОНЬШЕ, ЧЕМ В ШАПКЕ.

       Обводка знака — 5.41 в системе координат самого рисунка. В шапке
       на 26 пикселях она даёт плотный значок, каким он и задуман. На
       шторке знак в четыре с лишним раза крупнее, и та же обводка
       обрастает каждую фигуру заметным полем: светлая звезда на тёмном
       поле выглядит налитой. Тоньше — и видно, что это тот же знак, а
       не клякса. */
    --logo-stroke: 2;
    animation: bootSpin 2.6s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
    .boot-mark, .boot-cap i { animation: none; }
    .boot-cap i { opacity: 1; }
}