/* Переход между страницами.

   Файл подключается тегом link на каждой странице, а не добавляется
   скриптом. Это принципиально: браузер начинает анимацию перехода
   до того, как отработает любой JS, и правила, добавленные из скрипта,
   он попросту не успевает увидеть.

   ПОЧЕМУ БЕЗ СДВИГА ПО ВЕРТИКАЛИ. Сначала приходящая страница
   выезжала снизу (translateY 22px). На эти 22 пикселя сверху экрана
   не было ничего — сквозь щель светил фон html, а он у «Цен» и
   «Кейсов» чёрный. Вадим: «что за полоска сверху появилась».
   Поэтому обе страницы теперь только МАСШТАБИРУЮТСЯ, и обе — наружу:
   снимок всегда крупнее экрана, открыться нечему. Движение читается
   как пролёт вперёд, а щели не будет ни при каком фоне.

   Кривая та же, что во всех движениях сайта. */

@view-transition { navigation: auto }

::view-transition-old(root) {
  animation: stranica-uhodit .3s cubic-bezier(.5, 1, .89, 1) both;
}

::view-transition-new(root) {
  animation: stranica-prihodit .42s cubic-bezier(.5, 1, .89, 1) both;
}

@keyframes stranica-uhodit {
  to { opacity: 0; transform: scale(1.012) }
}

@keyframes stranica-prihodit {
  from { opacity: 0; transform: scale(1.016) }
}

/* Карта направления летит из главной в свой раздел как единый объект.
   Имя ей задаётся в разметке (view-transition-name), здесь только
   длительность — чтобы полёт шёл вровень с остальным. */
::view-transition-group(*) {
  animation-duration: .45s;
  animation-timing-function: cubic-bezier(.5, 1, .89, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none }
}