/* ============================================================
 * 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: 220ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* --ease-out-premium */
}

::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), ensures continuity */
::view-transition-old(header),
::view-transition-new(header) {
  animation: none;
  mix-blend-mode: normal;
}

/* Sidebar slide-in from left on page load */
::view-transition-old(sidebar) {
  animation: fz-slide-out-left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-new(sidebar) {
  animation: fz-slide-in-left 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Main content cross-fade for app navigation */
::view-transition-old(main-content) {
  animation: fz-fade-out 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-new(main-content) {
  animation: fz-fade-in 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page title morph (H1 avec view-transition-name="page-title") */
::view-transition-old(page-title) {
  animation: fz-fade-out 160ms ease-out;
}
::view-transition-new(page-title) {
  animation: fz-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Keyframes ------------------------------------------------- */
@keyframes fz-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  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(-14px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

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

/* ---- Turbo Drive navigation progress bar — glow accent --------- */
/* Override du style basique dans bundle.css */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, white 30%) 100%);
  box-shadow: 0 0 10px var(--accent-40, rgba(255,123,84,0.4)),
              0 0 4px var(--accent-20, rgba(255,123,84,0.2));
  opacity: 1 !important;
}

/* ---- 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),
  ::view-transition-old(page-title),
  ::view-transition-new(page-title) {
    animation: none !important;
  }
}