/* ETL_APP_FEEL_0907 — то, из-за чего сайт на телефоне не ощущался приложением.

   1. ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ.
      Обычная навигация показывает белую вспышку: старая страница исчезает,
      новая ещё не отрисована. В приложении такого нет — там экран сменяется
      одним движением. Кросс-документные переходы делают ровно это: браузер
      держит старый кадр, пока новый не готов, и мягко их смешивает.
      Браузеры без поддержки просто игнорируют правило и работают как раньше.

   2. ХЛЕБНЫЕ КРОШКИ НА ТЕЛЕФОНЕ.
      Список переносился на две строки, причём ссылки растянуты до 44 px —
      требование к цели касания, — а текущий пункт остался 23 px. Получались
      две строки разной высоты со сбитым отступом слева. Делаем одну строку,
      которую можно протянуть пальцем, прижатую к тому же полю, что и текст.
*/

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: cubic-bezier(.2, 0, 0, 1);
}

/* Просили меньше движения — переход мгновенный, но вспышки всё равно нет:
   браузер по-прежнему не показывает пустой кадр между страницами. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01s;
  }
}

@media (max-width: 760px) {
  html body#top .breadcrumb__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0 8px;
    min-height: 40px;
  }

  html body#top .breadcrumb__list::-webkit-scrollbar {
    display: none;
  }

  /* Полоски прокрутки нет, поэтому о том, что строка продолжается, говорит
     растворяющийся правый край — тот же приём, что у карточных лент. */
  html body#top .breadcrumb {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }

  html body#top .breadcrumb__item {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
  }

  /* Цель касания остаётся крупной, но высоту строки задаёт весь список,
     а не отдельная ссылка: иначе соседний текущий пункт не совпадает с ней
     по базовой линии. */
  html body#top .breadcrumb__item a.breadcrumb__link {
    min-height: 40px !important;
  }
}