/* ═══════════ Фирменный lockup ═══════════

   Полный lockup стоит там, где он работает постоянной подписью продукта:
   в колонке меню. На экране сборки и на экране входа знака рядом со словом
   нет — там дятел присутствует живым, стоит на горизонте и улетает или
   дышит idle-анимацией, и плоская копия забирала бы внимание у него.

   Светлая бумага показывает цельный нарисованный lockup 635 × 290. Тёмная
   собирает его заново из двух прозрачных кропов того же рисунка: знака и
   вырезанного слова, которому можно дать светлый цвет. Меняется только то,
   какая из картинок показана, — одной парой переменных; всё остальное
   (положение, контур, цвет слова) от темы не зависит.

   Положение кропов считается из сетки исходника, а не подбирается в
   пикселях: знак вырезан из точки (0, 0), слово — из (220, 70), чернила
   слова лежат от (233, 110) до (614, 218). Размер задаётся одной величиной
   --lockup-w, остальное пересчитывается само. */
.lockup{
  --lockup-w:112px;
  --lockup-px:calc(var(--lockup-w) / 635);    /* пиксель исходного рисунка */
  --lockup-word:calc(233 * var(--lockup-px)); /* где начинаются чернила слова */
  --lockup-whole:block;                       /* цельный рисунок */
  --lockup-parts:none;                        /* знак и слово по отдельности */
}
.brand-logo-frame{
  position:relative;display:block;
  width:var(--lockup-w);height:calc(290 * var(--lockup-px));
  overflow:hidden;flex-shrink:0;
}
.brand-lockup-image{
  display:var(--lockup-whole);width:var(--lockup-w);height:auto;max-width:none;
}
.brand-mark-image,.brand-wordmark-image{
  display:var(--lockup-parts);position:absolute;max-width:none;height:auto;
}
.brand-mark-image{left:0;top:0;width:calc(220 * var(--lockup-px))}
.brand-wordmark-image{
  left:calc(220 * var(--lockup-px));top:calc(70 * var(--lockup-px));
  width:calc(425 * var(--lockup-px));
}
/* Невидимая цель совпадает с буквенной частью картинки. На неё садится
   слово загрузочного экрана — не в центр всего lockup вместе с птицей. */
.brand-word-target{
  position:absolute;left:var(--lockup-word);top:calc(110 * var(--lockup-px));
  width:calc(381 * var(--lockup-px));height:calc(108 * var(--lockup-px));
}

/* ── Тёмная бумага ─────────────────────────────────────────────
   Тема меняет только то, какая из картинок показана: положение, контур и
   цвет слова от неё не зависят. */
html[data-ui-theme="dark"] .lockup{--lockup-whole:none;--lockup-parts:block}

/* Слово вырезано прозрачным, поэтому ему достаточно обратить цвет:
   второго нарисованного wordmark для тёмной темы нет. */
.brand-wordmark-image{filter:brightness(0) invert(1);opacity:.94}

/* Знак не перекрашивается: чёрный корпус и терракотовый хохолок остаются
   собой в обеих темах. Но чёрный силуэт на тёмной бумаге сливается с ней
   (у корпуса к --paper 1.37:1), и первыми пропадают клюв и нижний край
   головы. Поэтому по силуэту идёт контур из той же светлой бумаги, на
   которой знак нарисован, как у высеченной наклейки. Контур жёсткий, а не
   размытый: размытие даёт ореол вместо края и слепляет зубцы хохолка.
   Четыре тени без радиуса накладываются одна на другую и дают ровное
   кольцо по всему контуру.

   Толщина растёт вместе со знаком: на входе и экране сборки lockup втрое
   крупнее меню, и волосяной край там читался бы грязью, а не контуром. */
.brand-mark-image{
  --mark-edge:calc(3.4 * var(--lockup-px));
  --mark-edge-ink:rgba(235,234,230,.95);
  filter:
    drop-shadow(var(--mark-edge) 0 0 var(--mark-edge-ink))
    drop-shadow(calc(var(--mark-edge) * -1) 0 0 var(--mark-edge-ink))
    drop-shadow(0 var(--mark-edge) 0 var(--mark-edge-ink))
    drop-shadow(0 calc(var(--mark-edge) * -1) 0 var(--mark-edge-ink));
}