/* ПЕРЕХОДЫ МЕЖДУ СТРАНИЦАМИ · общий для всего сайта
   ═════════════════════════════════════════════════════════════════════
   Раньше это жило внутри motion.css. Но motion.css подключён не везде:
   дашборд Kwork обходился без него, и переход хаб → дашборд обрывался
   белым кадром, хотя обратно вроде бы работал. Опция navigation:auto
   должна стоять на ОБЕИХ страницах перехода — на одной её мало.
   Поэтому переходы теперь отдельный файл и подключены везде. */

@view-transition { navigation: auto; }

/* Марка и шапка перетекают между страницами.
   ИМЯ ОБЯЗАНО БЫТЬ УНИКАЛЬНЫМ на странице: при дубле переход ломается
   целиком, а каждый помеченный элемент ещё и получает свой слой. */
[data-vt="mark"] { view-transition-name: xsl-mark }
[data-vt="bar"]  { view-transition-name: xsl-bar }

::view-transition-group(xsl-mark),
::view-transition-group(xsl-bar){ animation-duration:.42s;
  animation-timing-function:cubic-bezier(.23,1,.32,1) }

/* Содержимое: уходящее гаснет быстрее, приходящее въезжает снизу.
   Асимметрия намеренная: уходить надо сразу, приходить с достоинством. */
::view-transition-old(root){
  animation:xsl-out .20s cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){
  animation:xsl-in .40s cubic-bezier(.23,1,.32,1) both }
@keyframes xsl-out{ to{ opacity:0; transform:translateY(-8px) } }
@keyframes xsl-in { from{ opacity:0; transform:translateY(14px) } }