/**
 * BURSTY Theme — View Transitions CSS
 *
 * Базовый кросс-документный переход (Chrome 111+, Edge, Safari 18+, Firefox 125+).
 * Вся логика анимации — нативная: браузер сам делает снапшоты старой и новой
 * страниц и морфит их через pseudo-element'ы ::view-transition-*.
 *
 * ВАЖНО: @view-transition { navigation: auto } должен быть ДО @media rules,
 * иначе правило игнорируется. Поэтому файл подключается отдельным стилем
 * в <head> до остальных тематических CSS (см. functions.php).
 */

/* Разрешаем браузеру автоматически запускать view transition
   на всех cross-document навигациях этого документа. */
@view-transition {
    navigation: auto;
}

/* ── Настройка анимации ─────────────────────────────────────────────── */

/* Старая страница: остаётся на месте, слегка затухает и уходит назад
   (scale-down создаёт эффект «глубины», без резкого fade-to-white). */
::view-transition-old(root) {
    animation: bursty-vt-out 0.3s cubic-bezier(0.45, 0, 0.55, 1) both;
    /* Затемняем именно old-слой: new слой под ним ещё не готов,
       поэтому белого мигания нет. */
    mix-blend-mode: normal;
}

/* Новая страница: проявляется из небольшого масштаба. */
::view-transition-new(root) {
    animation: bursty-vt-in 0.35s cubic-bezier(0.45, 0, 0.55, 1) both;
}

/* Групповой слой (общие элементы вне root) — не трогаем: по умолчанию
   old/new перекрываются, что даёт чистый crossfade двух full-page снапшотов. */

@keyframes bursty-vt-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.985);
    }
}

@keyframes bursty-vt-in {
    from {
        opacity: 0;
        transform: scale(1.015);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Общие элементы: hero-шапка «остается» на месте при переходах ───── */
/* Если у сайта есть сквозной хедер с классом .site-header и он помечен
   name'ом — браузер морфит его вместо двойного fade. Добавляем name только
   когда JS подтвердил поддержку (html.vt-animatable), чтобы на fallback
   ничего не менялось. */
html.vt-animatable .site-header,
html.vt-animatable .navbar-brand img {
    view-transition-name: bursty-shared-header;
}

::view-transition-group(bursty-shared-header) {
    animation-duration: 0.35s;
    z-index: 10;
}

/* ── Защита от прыжка скролла ───────────────────────────────────────── */
/* Класс contain-intrinsic-size навешивает page-transition.js при событии
   oncontentvisibilityautostatechange; сам стиль content-visibility задаём
   для длинных списков/секций, чтобы новая страница мгновенно имела
   правильную высоту скроллбара. */
.vt-animatable #primary {
    content-visibility: auto;
    contain-intrinsic-size: auto 2000px;
}

/* ── Prefers-reduced-motion: уважаем настройку пользователя ─────────── */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.01s;
    }
    ::view-transition-group(bursty-shared-header) {
        animation-duration: 0.01s;
    }
}