/* ============================================================
 * View Transitions API — Phase 10 Sprint 5 (2026-05-09)
 *
 * Active les transitions natives entre pages Turbo (Chrome 111+,
 * Safari 18+, Firefox derrière flag). Donne un feel "app native"
 * comme iOS / Android lors des navigations.
 *
 * L'app a déjà des `view-transition-name` posés dans le layout sur :
 *   - header (layouts/application.html.erb:360)
 *   - sidebar (layouts/application.html.erb:371)
 *   - main-content (layouts/application.html.erb:381)
 *
 * Ce fichier complète avec les pseudo-elements ::view-transition-* et
 * les keyframes pour donner du polish.
 *
 * Browsers sans support : tout reste fonctionnel (fallback : pas de
 * transition, navigation Turbo classique).
 * ============================================================ */

/* ---- Default fade transitions ---------------------------------- */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: fz-fade-out;
}

::view-transition-new(root) {
  animation-name: fz-fade-in;
}

/* ---- Named regions get tailored transitions -------------------- */
/* Header stays put (no transition), but ensures continuity */
::view-transition-old(header),
::view-transition-new(header) {
  animation: none;
  mix-blend-mode: normal;
}

/* Sidebar slide-in from left on page load (mobile drawer-style) */
::view-transition-old(sidebar) {
  animation: fz-slide-out-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-new(sidebar) {
  animation: fz-slide-in-left 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Main content cross-fade for app navigation */
::view-transition-old(main-content) {
  animation: fz-fade-out 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-new(main-content) {
  animation: fz-fade-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Keyframes ------------------------------------------------- */
@keyframes fz-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fz-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-4px); }
}

@keyframes fz-slide-in-left {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes fz-slide-out-left {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-12px); opacity: 0; }
}

/* ---- Disable on reduced-motion preference --------------------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(sidebar),
  ::view-transition-new(sidebar),
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation: none !important;
  }
}