/* ═══════════════════════════════════════════════════════════════════
   APEX v2 — Page Transitions
   Sistema de transições entre ecrãs orquestrado pelo router.

   Categorias:
     · enter → animação do ecrã que ENTRA
     · exit  → animação do ecrã que SAI
     · hierarchical (descer no fluxo): slide-up + fade + scale
     · backward (subir no fluxo): slide-down + fade + scale
     · lateral (entre views do mesmo nível): cross-fade horizontal subtil

   Performance:
     · Apenas transform + opacity (GPU-accelerated, evita layout/paint)
     · will-change aplicado durante a transição, removido depois
     · prefers-reduced-motion → durações ~1ms

   Easing:
     · Curvas Material 3 / iOS — naturais, com aceleração assimétrica
═══════════════════════════════════════════════════════════════════ */

:root {
  /* Easing curves — modernas e naturais */
  --ease-emphasized:        cubic-bezier(0.2, 0, 0, 1);        /* iOS-like, exit→enter standard */
  --ease-emphasized-decel:  cubic-bezier(0, 0, 0.2, 1);        /* enter only — desacelera ao chegar */
  --ease-emphasized-accel:  cubic-bezier(0.3, 0, 0.8, 0.15);   /* exit only — acelera ao sair */
  --ease-spring:            cubic-bezier(0.34, 1.56, 0.64, 1); /* leve overshoot, micro-bounce */

  /* Durações */
  --t-fast:      180ms;
  --t-normal:    280ms;
  --t-slow:      420ms;
  --t-exit:      200ms;   /* exit é sempre mais rápido que enter (princípio Material) */
  --t-enter:     320ms;
}

/* ── Container do app durante transições ──────────────────────────── */

.is-transitioning {
  pointer-events: none;       /* evitar cliques durante animação */
  will-change: transform, opacity;
}

/* Em transição: o conteúdo antigo e o novo nunca coexistem (single innerHTML),
   por isso usamos animações sequenciais (out → swap → in). */

/* ── Hierarchical: portal → modo (descer no fluxo) ───────────────── */

@keyframes apex-exit-up {
  from { opacity: 1; transform: translate3d(0, 0, 0)     scale(1);    }
  to   { opacity: 0; transform: translate3d(0, -8px, 0)  scale(0.985); }
}

@keyframes apex-enter-up {
  from { opacity: 0; transform: translate3d(0, 14px, 0)  scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)     scale(1);     }
}

/* ── Backward: modo → portal (subir, voltar atrás) ───────────────── */

@keyframes apex-exit-down {
  from { opacity: 1; transform: translate3d(0, 0, 0)     scale(1);     }
  to   { opacity: 0; transform: translate3d(0, 8px, 0)   scale(0.985); }
}

@keyframes apex-enter-down {
  from { opacity: 0; transform: translate3d(0, -14px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0)     scale(1);     }
}

/* ── Lateral: entre views ao mesmo nível (settings → perfil) ─────── */

@keyframes apex-exit-left {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(-18px, 0, 0); }
}

@keyframes apex-enter-right {
  from { opacity: 0; transform: translate3d(18px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes apex-exit-right {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to   { opacity: 0; transform: translate3d(18px, 0, 0); }
}

@keyframes apex-enter-left {
  from { opacity: 0; transform: translate3d(-18px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Cross-fade neutro (default) ──────────────────────────────────── */

@keyframes apex-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes apex-fade-in {
  from { opacity: 0; transform: translate3d(0, 4px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* ── Modal-like: para login/onboarding/upgrade ───────────────────── */

@keyframes apex-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.96); }
}

@keyframes apex-zoom-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Classes utilitárias aplicadas pelo orquestrador ──────────────── */

.apex-exit-up    { animation: apex-exit-up    var(--t-exit) var(--ease-emphasized-accel) forwards; }
.apex-enter-up   { animation: apex-enter-up   var(--t-enter) var(--ease-emphasized-decel) both; }

.apex-exit-down  { animation: apex-exit-down  var(--t-exit) var(--ease-emphasized-accel) forwards; }
.apex-enter-down { animation: apex-enter-down var(--t-enter) var(--ease-emphasized-decel) both; }

.apex-exit-left  { animation: apex-exit-left  var(--t-exit) var(--ease-emphasized-accel) forwards; }
.apex-enter-right{ animation: apex-enter-right var(--t-enter) var(--ease-emphasized-decel) both; }

.apex-exit-right { animation: apex-exit-right var(--t-exit) var(--ease-emphasized-accel) forwards; }
.apex-enter-left { animation: apex-enter-left  var(--t-enter) var(--ease-emphasized-decel) both; }

.apex-fade-out   { animation: apex-fade-out   var(--t-exit)  linear forwards; }
.apex-fade-in    { animation: apex-fade-in    var(--t-enter) var(--ease-emphasized-decel) both; }

.apex-zoom-out   { animation: apex-zoom-out   var(--t-exit)  var(--ease-emphasized-accel) forwards; }
.apex-zoom-in    { animation: apex-zoom-in    var(--t-enter) var(--ease-emphasized-decel) both; }

/* ── View Transitions API (Chrome 111+, Edge 111+, Safari 18+) ──── */
/* Quando suportado, o router usa document.startViewTransition() e
   o browser tira snapshot do antes/depois. Estas regras controlam
   as pseudo-classes que o browser cria automaticamente.            */

::view-transition-old(root) {
  animation: apex-exit-up var(--t-exit) var(--ease-emphasized-accel) forwards;
}
::view-transition-new(root) {
  animation: apex-enter-up var(--t-enter) var(--ease-emphasized-decel) both;
}

/* Tags por direcção — definidas dinamicamente via view-transition-name */
html[data-transition="up"]    ::view-transition-old(root) { animation-name: apex-exit-up; }
html[data-transition="up"]    ::view-transition-new(root) { animation-name: apex-enter-up; }

html[data-transition="down"]  ::view-transition-old(root) { animation-name: apex-exit-down; }
html[data-transition="down"]  ::view-transition-new(root) { animation-name: apex-enter-down; }

html[data-transition="left"]  ::view-transition-old(root) { animation-name: apex-exit-left; }
html[data-transition="left"]  ::view-transition-new(root) { animation-name: apex-enter-right; }

html[data-transition="right"] ::view-transition-old(root) { animation-name: apex-exit-right; }
html[data-transition="right"] ::view-transition-new(root) { animation-name: apex-enter-left; }

html[data-transition="fade"]  ::view-transition-old(root) { animation-name: apex-fade-out; }
html[data-transition="fade"]  ::view-transition-new(root) { animation-name: apex-fade-in; }

html[data-transition="zoom"]  ::view-transition-old(root) { animation-name: apex-zoom-out; }
html[data-transition="zoom"]  ::view-transition-new(root) { animation-name: apex-zoom-in; }

/* ── Stagger interno: micro-animação dos elementos ao montar ──────
   Aplicada pelo router após transição entrar, faz com que cards, botões
   e secções principais "aterrem" em cascata subtil.
══════════════════════════════════════════════════════════════════ */

@keyframes apex-stagger-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.apex-stagger > * {
  animation: apex-stagger-in 380ms var(--ease-emphasized-decel) both;
}
.apex-stagger > *:nth-child(1) { animation-delay:   0ms; }
.apex-stagger > *:nth-child(2) { animation-delay:  40ms; }
.apex-stagger > *:nth-child(3) { animation-delay:  80ms; }
.apex-stagger > *:nth-child(4) { animation-delay: 120ms; }
.apex-stagger > *:nth-child(5) { animation-delay: 160ms; }
.apex-stagger > *:nth-child(6) { animation-delay: 200ms; }
.apex-stagger > *:nth-child(7) { animation-delay: 240ms; }
.apex-stagger > *:nth-child(n+8) { animation-delay: 280ms; }

/* ── Reduced motion (acessibilidade) ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:   1ms;
    --t-normal: 1ms;
    --t-slow:   1ms;
    --t-exit:   1ms;
    --t-enter:  1ms;
  }
  .apex-stagger > * {
    animation: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
  }
}