/* ============================================================
   Плавные переходы: между страницами, табами и раскрывающимися блоками
   ------------------------------------------------------------
   ПОЯВЛЕНИЕ СТРАНИЦЫ — чистая CSS-анимация: работает даже если JavaScript
   не загрузился, и не может «спрятать» содержимое (если анимации отключены
   браузером, страница просто видна сразу).

   ЗАТУХАНИЕ ПРИ УХОДЕ — класс .is-leaving, его ставит
   static/js/page-fade.js перед переходом по ссылке или отправкой формы.
   Без JS переход происходит как обычно, без затухания.

   ПЛАВНАЯ СМЕНА СТРАНИЦ (View Transitions, добавлено 10.10.2026)
   В современных браузерах (Chrome 126+) переход между страницами умеет
   анимировать сам браузер: он снимает «до» и «после» и делает кроссфейд.
   Это заметно приятнее нашего затухания, потому что НЕ требует ждать
   перед уходом — навигация начинается сразу.
   Включается одной строкой `@view-transition { navigation: auto; }`.
   Где браузер не поддерживает — работает прежнее затухание, ничего
   не ломается (прогрессивное улучшение).

   Настройка «уменьшить движение» уважается везде: анимации отключаются.
   ============================================================ */

@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes page-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Лёгкий «подъём» содержимого при появлении страницы: заметнее, чем
   просто проявление, и не утомляет, потому что сдвиг маленький (6 px). */
@keyframes page-rise-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* Появление страницы */
body {
    animation: page-fade-in .22s ease-out both;
}

/* Уход со страницы: мягко гасим и блокируем повторные клики */
body.is-leaving {
    animation: page-fade-out .16s ease-in both;
    pointer-events: none;
}

/* ---------- Плавная смена ТАБОВ ----------
   Табы в карточках — это ссылки (?tab=...), то есть смена вкладки
   перезагружает страницу. Раньше содержимое вкладки «выскакивало»
   мгновенно. Теперь панель вкладки появляется с лёгким подъёмом,
   поэтому переключение читается как плавный переход, а не как рывок.

   Класс ставит разметка (templates/.../card.html) — см. `data-tab-panel`. */
[data-tab-panel] {
    animation: page-rise-in .2s ease-out both;
}

/* ---------- Плавное раскрытие блоков <details> ----------
   «Фильтры» и «Что можно добавить» раскрываются мгновенно. Содержимое
   открытого блока появляется с лёгким подъёмом.

   Почему так, а не анимацией высоты: у <details> содержимое получает
   display:none, и анимация высоты требует знать её заранее (max-height
   «на глаз» даёт рывок в конце). Анимация появления при открытии работает
   во всех браузерах и не требует вычислений.

   Класс `data-anim` ставит разметка (templates/dashboard.html). */
details[data-anim][open] > *:not(summary) {
    animation: page-rise-in .18s ease-out both;
}

/* ---------- View Transitions: плавный переход между страницами ----------
   `navigation: auto` включает кроссфейд для обычной навигации
   (мы используем именно её — переход по ссылке или отправка формы).
   Браузеры, которые правила не знают, просто его игнорируют. */
@view-transition {
    navigation: auto;
}

/* Длительность и характер перехода. Коротко (180 мс): анимация не должна
   задерживать работу — сотрудник открывает десятки страниц за день. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
    animation-timing-function: ease-out;
}

/* ---------- КОГДА БРАУЗЕРНЫЙ ПЕРЕХОД ЕСТЬ, НАШ НЕ НУЖЕН ----------
   Класс `has-view-transitions` ставит скрипт в <head> (base.html) —
   и только там, где переходы между страницами ДЕЙСТВИТЕЛЬНО работают.
   Смотри пояснение в base.html: проверка по `view-transition-name`
   ошибочно срабатывала в Firefox, из-за чего там не было анимации вовсе. */
html.has-view-transitions body {
    /* Появление отдаём браузеру: его кроссфейд лучше нашего, потому что
       не задерживает навигацию. */
    animation: none;
}

html.has-view-transitions body.is-leaving {
    /* Гашение при уходе тоже не нужно: браузер снимает «до» и «после»
       сам, а если погасить страницу заранее, он снимет уже пустой экран,
       и переход пойдёт «в пустоту». */
    animation: none;
    pointer-events: none;
}

/* Уважение системной настройки «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    body,
    body.is-leaving,
    .modal-enter,
    .js-multi-panel,
    [data-tab-panel],
    details[data-anim][open] > *:not(summary) {
        animation: none !important;
    }

    /* Переходы между страницами тоже выключаем: при этой настройке
       кроссфейд целой страницы — самое неприятное из движений. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }
}

/* Внутренние блоки, которые появляются поверх (модалки, панели фильтров),
   не должны «выпрыгивать» раньше страницы — сглаживаем их появление */
.modal-enter,
.js-multi-panel {
    animation: page-fade-in .12s ease-out both;
}

/* Уважение системной настройки «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    body,
    body.is-leaving,
    .modal-enter,
    .js-multi-panel {
        animation: none !important;
    }
}