/*
 * Переходи між сторінками — щоб зміна екрана не виглядала як
 * перезавантаження.
 *
 * НАВІЩО. Сайт лишається звичайним, серверно-рендереним: клік по посиланню
 * веде до справжньої навігації. Але браузер за замовчуванням показує це
 * різко — стара сторінка зникає, нова зʼявляється ривком, і кожен перехід
 * між складчинами читається як «усе завантажується наново».
 *
 * @view-transition navigation: auto просить браузер зробити перехід
 * плавним самотужки: він знімає стару сторінку, показує нову і зводить одну
 * в іншу. Жодного JS, жодного перехоплення посилань — хто вміє (Chrome,
 * Edge, Safari 18+), той показує мʼяко, хто не вміє (Firefox), поводиться
 * рівно як досі.
 *
 * ЧОМУ ОКРЕМИЙ ФАЙЛ, а не рядок в app.css. Це не оформлення сторінки, а
 * поведінка переходів між ними — разом зі своїм поясненням і винятком для
 * тих, кому рух шкодить. Знайти його тут простіше, ніж серед двох тисяч
 * рядків кольорів і відступів.
 */

@view-transition {
  navigation: auto;
}

/* Рух — не всім послуга: для «зменшити рух» у системі анімацію переходу
   вимикаємо зовсім (нульова тривалість), і сторінки міняються миттєво, як
   було до цього файлу. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 0s;
  }
}

/* Стандартне зведення трохи повільніше, ніж треба такому переходу: людина
   вже знає, куди йде, і чекати на показ не має. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}