/* ════════════════════════════════════════════════════════════════════
   Переход между страницами — cross-document View Transitions.
   ПЛАВНЫЙ вариант: только transform + opacity (композитор/GPU, без repaint,
   без filter, без clip-path, без steps) → гладко 60fps на любом железе,
   включая телефоны. Заметный «слайд + кросс-фейд» с лёгким зумом.
   Глитч-фильтры намеренно убраны: drop-shadow на полноэкранном снимке
   нельзя анимировать плавно (либо лаги, либо рывки steps).
   Без белой вспышки (тёмный --void). Нет поддержки → мгновенная навигация.
   ════════════════════════════════════════════════════════════════════ */

/* opt-in для навигации между документами одного origin */
@view-transition { navigation: auto; }

/* старая страница уезжает влево с лёгким уменьшением и угасает */
::view-transition-old(root){ animation: vt-out .34s cubic-bezier(.4,0,.2,1) both; }
/* новая приезжает справа, чуть «наезжая», и проявляется */
::view-transition-new(root){ animation: vt-in  .46s cubic-bezier(.16,1,.3,1) both; }

@keyframes vt-out{
  0%   { opacity:1; transform:none; }
  100% { opacity:0; transform:translateX(-6%) scale(.97); }
}
@keyframes vt-in{
  0%   { opacity:0; transform:translateX(7%) scale(1.02); }
  55%  { opacity:1; }
  100% { opacity:1; transform:none; }
}

/* reduced-motion — мгновенно, без анимации */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none; }
}