/**
 * page-transitions.css — cross-document View Transitions
 * =========================================================================
 * Subtelny fade + translateY(6px), 200 ms ease-out, przy każdej nawigacji
 * w obrębie serwisu. Wyłącznie CSS — patrz presentation/page-transitions.php.
 *
 * BEZPIECZEŃSTWO — dlaczego @keyframes są tu OK, a w scroll-reveal NIE:
 * ::view-transition-old/new to pseudo-elementy = zrzuty ekranu generowane
 * i niszczone przez przeglądarkę. Nie da się nimi trwale ukryć prawdziwego
 * DOM-u. W scroll-reveal animujemy realne elementy → tam tylko transitions.
 *
 * Przeglądarka bez wsparcia: cały blok jest ignorowany → zwykła nawigacja.
 *
 * @since 8.3.0 (2026-07-17)
 */

@media (prefers-reduced-motion: no-preference) {

    /* Włącznik przejść dla nawigacji same-origin.
       Zgodnie ze specyfikacją CSS View Transitions 2 @view-transition jest
       dozwolone wewnątrz conditional group rules (@media/@supports) —
       dzięki temu użytkownik z reduced-motion nie dostaje ich w ogóle. */
    @view-transition {
        navigation: auto;
    }

    /* ── Root: stara strona wychodzi, nowa wchodzi ──────────────────
       mix-blend-mode:normal — nadpisujemy domyślny UA `plus-lighter`.
       plus-lighter jest zestrojony pod czysty cross-fade; przy własnym
       transformie daje jasne "duchy" tam, gdzie zrzuty na siebie nachodzą. */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        mix-blend-mode: normal;
    }

    ::view-transition-old(root) {
        animation: hbt8-vt-leave 200ms ease-out both;
    }

    ::view-transition-new(root) {
        animation: hbt8-vt-enter 200ms ease-out both;
    }

    @keyframes hbt8-vt-leave {
        from {
            opacity: 1;
            transform: translateY(0);
        }
        to {
            opacity: 0;
            transform: translateY(-6px);
        }
    }

    @keyframes hbt8-vt-enter {
        from {
            opacity: 0;
            transform: translateY(6px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* ── Elementy trwałe: nie mrugają między stronami ───────────────
       Nazwany element jest wyjmowany ze snapshotu roota i animowany
       osobno. Ponieważ nagłówek i pasek promo są identyczne na obu
       stronach, przeglądarka po prostu zostawia je w miejscu — zero
       fade'u, zero przeskoku.

       Bez tego pasek promo (nad nagłówkiem) jechałby razem z rootem,
       a nagłówek stałby — czyli dokładnie ten glitch, który mieliśmy
       usunąć. Dlatego nazwane są OBA, mimo że w zadaniu był tylko nagłówek.

       Nazwy MUSZĄ być unikalne w dokumencie — .site-header (header.php L214)
       i .promo-bar (header.php L188) występują dokładnie raz. */
    .promo-bar {
        view-transition-name: hbt-promo-bar;
    }

    .site-header {
        view-transition-name: hbt-header;
    }
}

/* ── Twardy bezpiecznik dla reduced-motion ─────────────────────────
   Gdyby jakikolwiek silnik potraktował @view-transition wewnątrz @media
   inaczej niż mówi spec i włączył przejścia mimo preferencji — tu je
   zabijamy. Zerowa animacja = przejście kończy się natychmiast. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        mix-blend-mode: normal;
    }
}