/* ===== Індикатори переходу між сторінками =====
 *
 * Спільний файл для обох шаблонів (bakery і default) — показують вони те саме,
 * а бренд-колір і так приїжджає змінною з index.php.
 *
 * Сайт багатосторінковий: клік по категорії = повний запит до сервера. HTML
 * прилітає швидко (TTFB ~160 ms), але поки браузер дотягне решту файлів, на
 * екрані ще стоїть стара сторінка — і це читається так, ніби клік не спрацював.
 *
 * Тут три незалежні шматки, які закривають цю паузу. Вони нічого не знають один
 * про одного, тому будь-який можна прибрати окремо:
 *
 *   1. .nav-progress    — смужка прогресу вгорі екрана
 *   2. .nav-pending     — притухання елемента, по якому клікнули
 *   3. @view-transition — плавний перехід замість білого блимання
 */

/* ---------- 1. Смужка прогресу ---------- */

.nav-progress {
    position: fixed;
    /* У браузері інсет нульовий. У standalone-режимі (apple-mobile-web-app-capable)
       без нього смужка сховалась би під статус-баром. */
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    height: 3px;
    /* Вище за все, що є в обох темах: search-overlay і bottom-nav у bakery — 1000,
       sticky-шапка в default — 100, модалки bootstrap — 1050. */
    z-index: 2000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.nav-progress.is-active {
    opacity: 1;
    /* Ледь помітна доріжка під смужкою. Бренд-колір магазину задає власник, і
       якщо він світлий — сама смужка на світлому фоні майже не читається.
       Доріжка дає контур незалежно від кольору. Нейтральний чорний з низькою
       альфою читається і на бежевому фоні bakery, і на білому в default. */
    background: rgba(0, 0, 0, 0.08);
}

.nav-progress__bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--primary-color, #332F2A);
    box-shadow: 0 0 8px var(--primary-color, #332F2A);
    border-radius: 0 2px 2px 0;
}

.nav-progress.is-active .nav-progress__bar {
    animation: nav-progress-advance 8s cubic-bezier(0.15, 0.75, 0.3, 1) forwards;
}

/* Швидко до половини — щоб клік одразу відгукнувся, — далі свідомо повзе і
   ніколи не доходить до 100%: сторінка зміниться раніше. Смужка, яка доповзла
   до кінця і стоїть, виглядає як зависання, тобто гірше за її відсутність. */
@keyframes nav-progress-advance {
    0% {
        width: 0;
    }
    10% {
        width: 30%;
    }
    30% {
        width: 55%;
    }
    60% {
        width: 75%;
    }
    100% {
        width: 93%;
    }
}

/* ---------- 2. Відгук на клік ---------- */

/* Показує не просто «щось вантажиться», а куди саме юзер зараз їде. */
.nav-pending {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

/* Тільки для десктопа — на тачскріні курсора немає, це правило там ні на що
   не впливає. */
html.is-navigating,
html.is-navigating a {
    cursor: progress;
}

/* ---------- 3. Плавний перехід між сторінками ---------- */

/* Браузер сам робить перехід між старим і новим документом. Обидві сторінки
   рендеряться з цього ж шаблону, тому правило присутнє з обох боків — інакше
   перехід не вмикається взагалі.
   Chrome і Safari 18+ — нативно, решта браузерів просто не побачить анімації. */
@view-transition {
    navigation: auto;
}

/* Дефолтний кросфейд браузера довший, ніж хочеться: на швидкому переході він
   сам починає читатись як гальмо. Вкорочуємо. */
::view-transition-old(root) {
    animation: nav-page-out 0.1s ease both;
}

::view-transition-new(root) {
    animation: nav-page-in 0.16s ease both;
}

@keyframes nav-page-out {
    to {
        opacity: 0;
    }
}

@keyframes nav-page-in {
    from {
        opacity: 0;
    }
}

/* Смужку лишаємо — її рух це інформація, а не прикраса. А от перехід сторінок
   прибираємо: це саме той рух, від якого людям з вестибулярними розладами зле.
   Окремим блоком, щоб браузер, який не розуміє @view-transition всередині
   @media, зіпсував тільки це правило, а не весь файл. */
@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}