/* MOVIMENTO — comum aos quatro modelos.
   Princípios (02-design/25-MOVIMENTO.md):
     • o movimento explica uma relação (de onde veio, o que mudou), nunca decora;
     • curto (160–420 ms) e numa curva só;
     • só transform e opacity;
     • nada se move sem o visitante pedir (rolar, apontar, clicar) — exceto a transição de página;
     • com "reduzir movimento" ligado, tudo aparece pronto.

   O conteúdo só começa escondido se o JS assumiu (html.movimento): sem JS, nada some. */

:root {
  --curva: cubic-bezier(.22, .61, .36, 1);   /* saída suave, a mesma em tudo */
  --rapido: 160ms;
  --normal: 240ms;
  --lento: 420ms;
}

/* ── transição entre páginas (mesma aba, navegação normal) ── */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

@media (prefers-reduced-motion: no-preference) {

  ::view-transition-old(root) { animation: sai-pagina var(--normal) var(--curva) both; }
  ::view-transition-new(root) { animation: entra-pagina var(--lento) var(--curva) both; }
  @keyframes sai-pagina { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes entra-pagina { from { opacity: 0; transform: translateY(10px); } }

  /* o topo, o rodapé e o WhatsApp não piscam: continuam os mesmos entre páginas */
  .topo, .barra { view-transition-name: topo; }
  .whats { view-transition-name: whats; }
  .rodape { view-transition-name: rodape; }

  /* navegadores sem transição de página: a página entra com um leve fade */
  @supports not (view-transition-name: none) {
    main { animation: entra-pagina var(--lento) var(--curva) both; }
  }

  /* ── entrada ao rolar ── */
  .movimento [data-surge] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
    transition-delay: calc(var(--atraso, 0) * 60ms);
  }
  .movimento [data-surge].visivel { opacity: 1; transform: none; }

  /* ── micro-reações ── */
  .botao { transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva), transform var(--rapido) var(--curva), box-shadow var(--normal) var(--curva); }
  .botao:hover { transform: translateY(-1px); }
  .botao:active { transform: translateY(0) scale(.985); }

  a, summary, .aba, .chips a, .canal, .bloco, .atendimento, .formato, .painel, .cartao {
    transition: background-color var(--rapido) var(--curva), border-color var(--rapido) var(--curva),
                color var(--rapido) var(--curva), box-shadow var(--normal) var(--curva), transform var(--normal) var(--curva);
  }
  summary:active { transform: scale(.995); }

  /* o miolo das perguntas desce em vez de aparecer seco */
  details[open] > *:not(summary) { animation: abre-resposta var(--normal) var(--curva) both; }
  @keyframes abre-resposta { from { opacity: 0; transform: translateY(-6px); } }
}

/* com "reduzir movimento": nada se move, e nada fica escondido */
@media (prefers-reduced-motion: reduce) {
  .movimento [data-surge] { opacity: 1 !important; transform: none !important; }
}