/* ZEFRA design system — movimento.
   Regra: animação explica uma mudança de estado; nunca decora. Tudo respeita prefers-reduced-motion. */

@keyframes z-spin { to { transform: rotate(360deg); } }
@keyframes z-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes z-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes z-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes z-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes z-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes z-toast-out { to { opacity: 0; transform: translateX(16px); } }

/* entrada de página e de listas */
.page, .portal-shell, .auth-card { animation: z-rise var(--dur-base) var(--ease-out) both; }
[data-stagger] > * { animation: z-rise var(--dur-base) var(--ease-out) both; }
[data-stagger] > *:nth-child(1) { animation-delay: 0ms; }
[data-stagger] > *:nth-child(2) { animation-delay: 45ms; }
[data-stagger] > *:nth-child(3) { animation-delay: 90ms; }
[data-stagger] > *:nth-child(4) { animation-delay: 135ms; }
[data-stagger] > *:nth-child(5) { animation-delay: 180ms; }
[data-stagger] > *:nth-child(n + 6) { animation-delay: 220ms; }

/* sobreposições */
dialog.modal[open] { animation: z-pop var(--dur-base) var(--ease-out); }
dialog.modal[open]::backdrop { animation: z-fade var(--dur-base) var(--ease-out); }
.dropdown[data-open="true"] .menu { animation: z-pop var(--dur-fast) var(--ease-out); }
.toast { animation: z-toast-in var(--dur-base) var(--ease-spring) both; }
.toast[data-saindo] { animation: z-toast-out var(--dur-fast) var(--ease-in-out) forwards; }

/* marca: entrada (uma vez) e carregamento (em laço). Os três planos vêm de fora e se encaixam. */
@keyframes zm-top { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zm-base { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes zm-body { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes zm-pulse { 0%, 100% { opacity: 0.28; } 45% { opacity: 1; } }
.zefra-mark .zm-body, .zefra-mark .zm-top, .zefra-mark .zm-base { transform-box: fill-box; transform-origin: center; }
.zefra-mark--anim .zm-body { animation: zm-body var(--dur-slow) var(--ease-out) both; }
.zefra-mark--anim .zm-top { animation: zm-top var(--dur-slow) var(--ease-out) 120ms both; }
.zefra-mark--anim .zm-base { animation: zm-base var(--dur-slow) var(--ease-out) 240ms both; }
.zefra-mark--loading .zm-top { animation: zm-pulse 1.3s ease-in-out infinite; }
.zefra-mark--loading .zm-body { animation: zm-pulse 1.3s ease-in-out 0.18s infinite; }
.zefra-mark--loading .zm-base { animation: zm-pulse 1.3s ease-in-out 0.36s infinite; }

/* abertura do app (splash): use <div class="splash"> com a marca em .zefra-mark--loading */
.splash { position: fixed; inset: 0; display: grid; place-items: center; background: var(--side-bg); z-index: 100; }
.splash .zefra-mark { width: 4.5rem; --logo-main: var(--logo-main-dk); --logo-mid: var(--logo-mid-dk); --logo-acc: var(--logo-acc-dk); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .zefra-mark--loading .zm-top, .zefra-mark--loading .zm-body, .zefra-mark--loading .zm-base { opacity: 1; }
}