/* ==========================================================================
   HRZ OPS — motion.css (01/11/2026, UX2)
   Tokens únicos de duração/easing + padrões do shell. Só transform/opacity.
   Carregado ANTES do calm.css (que segue por último e zera movimento no
   prefers-reduced-motion). Este arquivo também respeita reduced-motion sozinho,
   para o caso data-calm="off".
   ========================================================================== */
:root {
  --dur-1: 120ms;       /* micro: hover, press, cor */
  --dur-2: 180ms;       /* entrada de elemento, toast, popover */
  --dur-3: 240ms;       /* troca de rota, painel, drawer */
  --dur-exit-2: 120ms;  /* saída ~65% da entrada */
  --dur-exit-3: 160ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);  /* entrada */
  --ease-in:  cubic-bezier(.4, 0, 1, 1);    /* saída */
  --ease-std: cubic-bezier(.4, 0, .2, 1);   /* troca de estado */
  --stagger: 40ms;
  --rise: 6px;
}

@keyframes hrz-in   { from { opacity: 0; transform: translateY(var(--rise)); } }
@keyframes hrz-out  { to   { opacity: 0; } }
@keyframes hrz-fade { from { opacity: 0; } }

/* 1. Troca de rota — View Transition nativa (router.js chama startViewTransition).
   Só o <main> anima; topbar e sidebar ficam parados (root sem crossfade). */
.main-content { view-transition-name: hrz-main; }
/* topbar e sidebar ganham grupo próprio para continuarem pintadas ACIMA do <main>
   durante a transição (o snapshot do main antigo pode estar rolado sob a topbar) */
.topbar  { view-transition-name: hrz-topbar; }
.sidebar { view-transition-name: hrz-sidebar; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(hrz-topbar), ::view-transition-new(hrz-topbar),
::view-transition-old(hrz-sidebar), ::view-transition-new(hrz-sidebar) { animation: none; }
/* sem morph de posição/tamanho: a página antiga pode estar rolada, o morph viraria um "deslize" */
::view-transition-group(hrz-topbar), ::view-transition-group(hrz-sidebar), ::view-transition-group(hrz-main) { animation: none; }
::view-transition-old(hrz-main) { animation: hrz-out var(--dur-exit-3) var(--ease-in) both; }
::view-transition-new(hrz-main) { animation: hrz-in  var(--dur-3) var(--ease-out) both; }

/* 2. Fallback sem View Transition (router põe data-entering por ~300ms) */
.main-content[data-entering] > * { animation: hrz-in var(--dur-3) var(--ease-out) both; }

/* 3. Cards escalonados (opt-in: classe no container, --i no filho) */
.hrz-stagger > * {
  animation: hrz-in var(--dur-2) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}

/* 4. Skeleton -> conteúdo (opt-in) */
.hrz-fade-in { animation: hrz-fade var(--dur-2) var(--ease-out) both; }

/* 5. Carregamento de rota: opacidade com transição, sem "pisca".
   Mantém a transição de margin-left do layout (colapso da sidebar). */
.main-content { transition: opacity var(--dur-2) var(--ease-std), margin-left var(--dur-3) var(--ease-std); }
.main-content.loading { opacity: .72; }

/* 6. Toast (HRZ.toast): entrada e saída distintas */
#toast-container > div { animation: hrz-toast-in var(--dur-2) var(--ease-out) both; }
#toast-container > div.is-leaving { animation: hrz-toast-out var(--dur-exit-2) var(--ease-in) both; }
@keyframes hrz-toast-in  { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes hrz-toast-out { to   { opacity: 0; transform: translateY(4px); } }

/* 7. Press tátil nos controles do shell */
.topbar-icon-btn:active, .sidebar-toggle-btn:active, .theme-toggle:active, .sidebar .nav-item:active {
  transform: scale(.97);
}

/* 8. Fim do `transition: all` no shell (layout.css) — propriedades explícitas */
.topbar { transition: background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std); }
.sidebar-toggle-btn, .topbar-icon-btn, .theme-toggle, .sidebar .nav-item {
  transition: background-color var(--dur-1) var(--ease-std), color var(--dur-1) var(--ease-std),
              border-color var(--dur-1) var(--ease-std), transform var(--dur-1) var(--ease-std);
}
/* sidebar: largura (colapso desktop) + transform (abrir/fechar no mobile) */
.sidebar { transition: width var(--dur-3) var(--ease-std), transform var(--dur-3) var(--ease-out); }

/* Contadores: sem pulo de largura quando o número muda */
.nav-counter, .notification-badge { font-variant-numeric: tabular-nums; }

/* ── Acessibilidade do shell ── */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 700;
  padding: 8px 12px; border-radius: 8px;
  background: var(--surface-raised, var(--bg-elevated, #1f232b));
  color: var(--text-1, var(--text-primary, #e6e8ec));
  text-decoration: none; font-weight: 600;
  transition: top var(--dur-1) var(--ease-std);
}
.skip-link:focus { top: 8px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* foco programático do router no título/main não desenha anel ao clicar com mouse */
.main-content:focus:not(:focus-visible),
.main-content [tabindex="-1"]:focus:not(:focus-visible),
.main-content [data-route-focus]:focus,
/* calm.css (carrega depois) desenha anel em [tabindex]:focus-visible; título focado pelo router não é controle */
:root:not([data-calm="off"]) [data-route-focus][data-route-focus]:focus-visible { outline: none !important; }

/* ── Command palette (Cmd/Ctrl+K) ── */
.hrz-cmdk {
  width: min(560px, calc(100vw - 32px)); max-height: min(480px, 70vh);
  margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--line, var(--border-default, #2a2f38)); border-radius: 14px;
  background: var(--surface-raised, var(--bg-elevated, #1f232b));
  color: var(--text-1, var(--text-primary, #e6e8ec));
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.hrz-cmdk[open] { display: flex; flex-direction: column; animation: hrz-in var(--dur-2) var(--ease-out) both; }
.hrz-cmdk::backdrop { background: var(--scrim, rgba(8, 10, 13, .62)); }
.hrz-cmdk__input {
  width: 100%; min-height: 48px; padding: 0 16px; flex: none;
  border: 0; border-bottom: 1px solid var(--line, var(--border-default, #2a2f38));
  background: transparent; color: inherit; font: inherit; font-size: 15px;
}
.hrz-cmdk__input:focus { outline: none; }
.hrz-cmdk__list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; }
.hrz-cmdk__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 8px; cursor: pointer;
}
.hrz-cmdk__opt[aria-selected="true"] { background: var(--accent-bg, rgba(99, 102, 241, .15)); }
.hrz-cmdk__opt small { color: var(--text-3, var(--text-secondary, #959ca8)); font-size: 12px; }
.hrz-cmdk__empty { padding: 14px 12px; color: var(--text-3, var(--text-secondary, #959ca8)); }
.hrz-cmdk__hint {
  flex: none; padding: 8px 16px; font-size: 12px;
  border-top: 1px solid var(--line, var(--border-default, #2a2f38));
  color: var(--text-3, var(--text-secondary, #959ca8));
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(hrz-main), ::view-transition-new(hrz-main) { animation: none; }
  .main-content[data-entering] > *, .hrz-stagger > *, .hrz-fade-in,
  #toast-container > div, #toast-container > div.is-leaving, .hrz-cmdk[open] { animation: none; }
  .topbar-icon-btn:active, .sidebar-toggle-btn:active, .theme-toggle:active, .sidebar .nav-item:active { transform: none; }
}