/* ============================================================
   EQI Budget System — view-transitions.css
   B5 — Transição de Página Suave (View Transition API).
   Graceful degradation: browsers sem suporte ignoram estas regras.
   ============================================================ */

/* ============================================================
   VIEW TRANSITION ANIMATIONS
   Fade suave de 150ms no conteúdo raiz.
   Chrome 126+, Edge 126+ (same-origin navigation).
   ============================================================ */
@keyframes eqi-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Aplicar animações nos pseudo-elementos de view transition */
::view-transition-old(root) {
  animation: eqi-fade-out 0.15s ease forwards;
}

::view-transition-new(root) {
  animation: eqi-fade-in 0.15s ease forwards;
}

/* ============================================================
   SIDEBAR: não animar durante transição (persistente)
   ============================================================ */
#eqi-sidebar {
  view-transition-name: sidebar;
}

::view-transition-old(sidebar),
::view-transition-new(sidebar) {
  animation: none;
}

/* ============================================================
   HEADER: não animar durante transição (persistente)
   ============================================================ */
#eqi-global-header {
  view-transition-name: header;
}

::view-transition-old(header),
::view-transition-new(header) {
  animation: none;
}

/* ============================================================
   ACCESSIBILITY: respeitar preferência de redução de movimento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}