/* ─── GABE PAGE TRANSITIONS ─────────────────────────────────────────────────
 * Cross-document View Transitions (iOS 18.2+, Safari 18+, Chrome 126+).
 * Slide direcțional ca Facebook: fereastra nouă vine din partea spre care mergi.
 * Council = animație specială (scale + fade, "judecata se deschide").
 * Degradare grațioasă: pe browsere fără suport, navigare normală (fără flash
 * pentru că nu mai e nimic de animat — pagina apare instant).
 * ─────────────────────────────────────────────────────────────────────────── */

@view-transition {
  navigation: auto;
}

/* Durată + easing global */
::view-transition-group(root) {
  animation-duration: 0.34s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── DEFAULT: slide din dreapta (înainte / drill-in) ──────────────────────── */
@keyframes gabe-slide-from-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes gabe-slide-to-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-22%); opacity: 0.6; }
}

/* ─── BACK: slide din stânga ───────────────────────────────────────────────── */
@keyframes gabe-slide-from-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes gabe-slide-to-right {
  from { transform: translateX(0); }
  to   { transform: translateX(22%); opacity: 0.6; }
}

/* ─── COUNCIL: scale + fade dramatic ───────────────────────────────────────── */
@keyframes gabe-council-in {
  from { transform: scale(1.06); opacity: 0; filter: blur(6px); }
  to   { transform: scale(1);    opacity: 1; filter: blur(0); }
}
@keyframes gabe-council-out {
  from { transform: scale(1);    opacity: 1; }
  to   { transform: scale(0.96); opacity: 0; }
}

/* Forward (default) */
html[data-gabe-nav="forward"]::view-transition-old(root) { animation: gabe-slide-to-left 0.34s cubic-bezier(0.4,0,0.2,1) both; }
html[data-gabe-nav="forward"]::view-transition-new(root) { animation: gabe-slide-from-right 0.34s cubic-bezier(0.4,0,0.2,1) both; }

/* Back */
html[data-gabe-nav="back"]::view-transition-old(root) { animation: gabe-slide-to-right 0.34s cubic-bezier(0.4,0,0.2,1) both; }
html[data-gabe-nav="back"]::view-transition-new(root) { animation: gabe-slide-from-left 0.34s cubic-bezier(0.4,0,0.2,1) both; }

/* Council (special) */
html[data-gabe-nav="council"]::view-transition-old(root) { animation: gabe-council-out 0.4s ease both; }
html[data-gabe-nav="council"]::view-transition-new(root) { animation: gabe-council-in 0.5s cubic-bezier(0.2,0.8,0.2,1) both; }

/* ─── BARE PERSISTENTE — rămân pe loc, doar conținutul alunecă (ca Facebook) ──
 * Le scoatem din snapshot-ul "root" dându-le nume proprii. Vor fi "matched"
 * old→new, deci stau fixe pe poziție în timp ce conținutul face slide.
 * Barele au fundal solid (var(--bg)) → acoperă conținutul ce alunecă sub ele. */
.navbar     { view-transition-name: gabe-topbar; }
.bottom-nav { view-transition-name: gabe-bottombar; }

/* Crossfade scurt pe bare (schimbarea tab-ului activ), fără slide */
::view-transition-group(gabe-topbar),
::view-transition-group(gabe-bottombar) {
  animation-duration: 0.2s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(gabe-topbar),
  ::view-transition-group(gabe-bottombar) { animation: none !important; }
}