/* Плавный переход между страницами — общий инструмент для всех страниц.
 *
 * Зачем. Переход «галерея → шаблон → назад» был обрывом кадра: страница
 * пропадала, на мгновение показывалось белое полотно встроенного браузера
 * (своё, не наше — никакой CSS НОВОЙ страницы его не закрашивает, он виден
 * ровно в тот промежуток, когда старой страницы уже нет, а новая ещё не
 * отрисована), и только потом появлялась следующая.
 *
 * Лечится это не цветом, а тем, чтобы промежутка не было вовсе:
 * межстраничные View Transitions оставляют на экране снимок УХОДЯЩЕЙ
 * страницы, пока новая не готова рисоваться, и сводят их анимацией. Пустого
 * кадра между ними не существует физически.
 *
 * Направление задаёт /static/tk-nav.js (типы tk-fwd / tk-back), чтобы «вглубь»
 * и «назад» ощущались по-разному: вход приезжает справа, возврат уходит
 * вправо, как в родных приложениях телефона.
 *
 * Браузеры постарше (межстраничные переходы — Chrome 126+ / Safari 18.2+)
 * просто не знают этих правил и ведут себя как раньше; им достаётся мягкий
 * уход страницы в собственный цвет (.tk-leaving, вешает тот же скрипт) —
 * он ничего не задерживает: растворение идёт ПОКА грузится следующая.
 *
 * No user-facing text here on purpose — engine, shared byte-for-byte with
 * the translated sister repos (see TEMPLATE_PLAYBOOK.md).
 */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .26s;
  animation-timing-function: cubic-bezier(.22, .8, .3, 1);
  animation-fill-mode: both;
}

/* Вглубь: новая страница приезжает справа, старая чуть уходит влево. */
html:active-view-transition-type(tk-fwd)::view-transition-old(root) { animation-name: tkPageOutLeft; }
html:active-view-transition-type(tk-fwd)::view-transition-new(root) { animation-name: tkPageInRight; }

/* Назад: ровно то же самое в обратную сторону. */
html:active-view-transition-type(tk-back)::view-transition-old(root) { animation-name: tkPageOutRight; }
html:active-view-transition-type(tk-back)::view-transition-new(root) { animation-name: tkPageInLeft; }

/* Сдвиг маленький (7%): за краем снимка видно фон полотна, и чем длиннее
   ход, тем заметнее эта полоса. */
@keyframes tkPageOutLeft  { from { opacity: 1; transform: none; }               to { opacity: 0; transform: translateX(-7%); } }
@keyframes tkPageInRight  { from { opacity: 0; transform: translateX(7%); }     to { opacity: 1; transform: none; } }
@keyframes tkPageOutRight { from { opacity: 1; transform: none; }               to { opacity: 0; transform: translateX(7%); } }
@keyframes tkPageInLeft   { from { opacity: 0; transform: translateX(-7%); }    to { opacity: 1; transform: none; } }

/* Запасной вариант для браузеров без межстраничных переходов: уходящая
   страница растворяется в СВОЁМ фоне (background-color: inherit — то есть
   цвет полотна этой самой страницы, у каждого шаблона он свой). */
html.tk-leaving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background-color: inherit;
  pointer-events: none;
  opacity: 0;
  animation: tkPageVeil .3s ease forwards;
}
@keyframes tkPageVeil { from { opacity: 0; } to { opacity: 1; } }

/* «Поменьше движения» — остаётся только проявление, без съезда вбок. */
@media (prefers-reduced-motion: reduce) {
  html:active-view-transition-type(tk-fwd)::view-transition-old(root),
  html:active-view-transition-type(tk-back)::view-transition-old(root) { animation-name: tkPageFadeOut; }
  html:active-view-transition-type(tk-fwd)::view-transition-new(root),
  html:active-view-transition-type(tk-back)::view-transition-new(root) { animation-name: tkPageFadeIn; }
  html.tk-leaving::after { animation: none; }
}
@keyframes tkPageFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes tkPageFadeIn  { from { opacity: 0; } to { opacity: 1; } }