/* ВИДИМОСТЬ ТАББАРА. Классы на <html> ставит keyboard_tabbar.js — здесь
   только их оформление. Причин две и они независимы: клавиатура
   (`impito-keyboard-open`) и маршрут инструмента (`impito-tabbar-away`).

   НЕ `display: none` ни в одной из них: таббар живёт в fixed-слое, места в
   потоке не занимает, зато boot_body.js меряет геометрию вкладок и ползунка
   через offsetWidth/offsetHeight. У `display: none` все замеры нулевые, и
   ползунок после возврата встал бы не на свою вкладку. `visibility: hidden`
   бокс сохраняет, замеры остаются настоящими, но узел уходит и из дерева
   доступности, и из фокуса — спрятанный таббар нажать нечем.

   Нижнее плавное размытие — самостоятельный слой страницы; видимость
   таббара и клавиатуры им не управляет. */

/* ── КЛАВИАТУРА: мгновенно, без движения ──────────────────────────────────
   Переход тут не нужен и вреден: он добавил бы кадры полупрозрачной пилюли
   при переводе фокуса между двумя полями. */
html.impito-keyboard-open .impito-tabbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── МАРШРУТ ИНСТРУМЕНТА: уезжает вниз за кромку ──────────────────────────
   Двигаем ОТДЕЛЬНЫМ свойством `translate`, а не `transform`. Панель пишет
   себе inline transform каждый кадр (`translateX(-50%)` плюс желе захвата и
   отскока из boot_body.js), и делить одно свойство с ней нельзя. Браузер
   складывает `translate` ПЕРЕД `transform`, поэтому уход вниз считается в
   координатах экрана и жест ничего не теряет.

   Сдвиг — собственная высота панели плюс её просвет над кромкой (bottom:
   4px + safe-bottom) и запас под тени. Проценты считаются от самой панели,
   поэтому более высокий таббар уезжает ровно так же. */
:root {
  --impito-tabbar-away-shift: calc(100% + 16px + var(--ui-safe-bottom, 0px));
  --impito-tabbar-away-out: 260ms;
  --impito-tabbar-away-in: 300ms;
}

/* Возврат. Сокращённая запись перебивает весь список переходов элемента,
   поэтому переход `transform` повторён ЗДЕСЬ такой же, как в
   settings_webapp.css. Их совпадение проверяет tests/test_tabbar_route.mjs —
   разъехаться молча они не могут. */
.impito-tabbar {
  transition:
    transform 0.08s var(--ui-ease),
    translate var(--impito-tabbar-away-in) var(--ui-ease-out),
    visibility 0s;
}

/* Уход. `visibility` откладывается на всю длительность съезда: без задержки
   панель исчезала бы в первом же кадре и никакого движения вниз видно бы не
   было. Тапы отключаются сразу — на уезжающую панель нажимать нечего. */
html.impito-tabbar-away .impito-tabbar {
  translate: 0 var(--impito-tabbar-away-shift);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.08s var(--ui-ease),
    translate var(--impito-tabbar-away-out) cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear var(--impito-tabbar-away-out);
}

/* ── ПОЛЗУНОК ─────────────────────────────────────────────────────────────
   Ему нужны свои правила: готовый таббар ставит себе
   `.is-ready .impito-tabbar__thumb { visibility: visible }`, и это
   ПЕРЕОПРЕДЕЛЯЕТ унаследованный от панели `hidden` — иначе узел остался бы
   в дереве доступности под невидимой панелью. Бокс в обоих случаях
   сохраняется, замеры boot_body.js остаются живыми. */

/* Клавиатура: тем же кадром, что и панель. */
html.impito-keyboard-open .impito-tabbar .impito-tabbar__thumb {
  visibility: hidden;
}

/* Маршрут: ползунок уезжает ВМЕСТЕ с панелью и гаснет ровно тогда же, когда
   она. Без задержки он исчезал на 42-й миллисекунде 260-миллисекундного
   съезда (замер в браузере, 16.09.2026) — вниз уезжала пустая пилюля.

   Сокращённая запись заодно снимает переезд самого ползунка, и это нужно:
   уходя в инструмент, подсветка перескакивает на «главную» (своей вкладки у
   инструментов нет), и с переходом ползунок ехал бы через всю панель прямо
   на съезде. Мгновенный перескок в первом кадре не виден, зато на возврате
   он уже стоит под своей вкладкой — ехать нечему. */
html.impito-tabbar-away .impito-tabbar .impito-tabbar__thumb {
  visibility: hidden;
  transition: visibility 0s linear var(--impito-tabbar-away-out);
}

/* «Уменьшить движение»: панель меняет состояние мгновенно, без съезда — и
   значит без отложенной видимости, в том числе у ползунка. Переход самой
   панели (захват жеста) остаётся, он и в общем листе не отключён. */
@media (prefers-reduced-motion: reduce) {
  .impito-tabbar,
  html.impito-tabbar-away .impito-tabbar {
    transition: transform 0.08s var(--ui-ease);
  }
  html.impito-tabbar-away .impito-tabbar .impito-tabbar__thumb {
    transition: none;
  }
}