/* ui-core.css — WSPÓLNE, TECHNICZNE (Classic i Modern): płynna nawigacja MPA przez natywne
   View Transitions + stabilna powłoka + cienki pasek postępu + reduced-motion. Bez CDN, CSP-safe.
   NIE zmienia wyglądu ekranów — tylko sposób przejścia między nimi. Gdy brak wsparcia → natychmiast, bez błędu. */

/* Cross-document View Transitions dla nawigacji GET (opt-in obu dokumentów). Nieobsługiwane = ignorowane. */
@view-transition { navigation: auto; }

/* stabilny gutter scrollbara — bez skoku layoutu przy pojawieniu/zniknięciu paska (desktop; mobile overlay = bez efektu) */
html { scrollbar-gutter: stable; }

/* POWŁOKA STABILNA (utrzymana między dokumentami, bez fade/przeskoku) */
.top       { view-transition-name: bm-top; }        /* Classic: górna nawigacja */
.sidebar   { view-transition-name: bm-sidebar; }    /* Modern: sidebar */
.bottomnav { view-transition-name: bm-bottomnav; }  /* Modern: dolna nawigacja mobilna */
::view-transition-group(bm-top),
::view-transition-group(bm-sidebar),
::view-transition-group(bm-bottomnav) { animation-duration: 0.001s; }
::view-transition-old(bm-top),::view-transition-new(bm-top),
::view-transition-old(bm-sidebar),::view-transition-new(bm-sidebar),
::view-transition-old(bm-bottomnav),::view-transition-new(bm-bottomnav) { animation: none; }

/* TREŚĆ (root): stara wygasza się NA WIERZCHU (z-index:2) nieprzezroczystej nowej (z-index:1) →
   spod przejścia NIE prześwituje tło strony (żadnego „brązowego mignięcia"). Nowa zostaje
   nieprzezroczysta i tylko delikatnie wjeżdża (max 6 px). Bez skalowania, bez slide przez ekran. */
::view-transition-old(root) { z-index: 2; animation: bm-fade-out 120ms ease both; }
::view-transition-new(root) { z-index: 1; animation: bm-rise 180ms ease both; }
@keyframes bm-fade-out { to { opacity: 0; } }
@keyframes bm-rise { from { transform: translateY(6px); } to { transform: none; } }

/* FALLBACK dla przeglądarek BEZ cross-document View Transitions (np. iOS Safari/WebView) —
   tam nawigacja = twarde przeładowanie. `html.bm-in` (dodaje JS przy nawigacji wewn.) sprawia,
   że treść wchodzi płynnie zamiast „skakać". Powłoka (nav/sidebar) bez zmian. */
@media (prefers-reduced-motion: no-preference) {
  html.bm-in .wrap { animation: bm-rise-fade 220ms ease both; }
}
@keyframes bm-rise-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* prefers-reduced-motion → przejścia natychmiastowe (bez animacji), bez błędów */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  html.bm-in .wrap { animation: none !important; }
  .bm-navbar { display: none; }
}

/* cienki pasek postępu u góry (pokazywany dopiero po ~250 ms wolnej nawigacji; znika po pageshow) */
.bm-navbar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 99999;
  background: currentColor; opacity: .5; pointer-events: none;
  transition: width 6s cubic-bezier(.1,.7,.3,1), opacity .2s; }
.bm-navbar.go { width: 88%; }