/* ==========================================================================
   MOVIMENTO — o inventário completo do §5 de docs/site-referencia-decisoes.md.
   As 10 animações da referência, todas, na nossa paleta.
   Cada bloco diz qual é, o valor medido na referência, e ONDE ela vive aqui.
   ========================================================================== */

/* --- 1. fadeInUpBlur · 1s cubic-bezier(0.2,0.8,0.2,1) · blur 10px→0
       vive em: nav, pílula, h1, lead, botões, selos e cartão do hero (cascata 75→700ms) --- */
@keyframes entrarComBlur {
  from { opacity: 0; transform: translateY(20px); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* --- 2. animationIn · 0.8s ease-out 0.1s · blur 8px→0 · IntersectionObserver
       vive em: toda seção abaixo da dobra (threshold 0.2, rootMargin -10%, uma vez) --- */
@keyframes entrarNoScroll {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* --- 3. spin · 60s linear infinite (+ reverse na contra-rotação)
       vive em: a órbita — WhatsApp, Agenda, CRM, Vendedor, Orçamento, Follow-up
       girando em volta da marca. O ícone contra-gira para nunca ficar de cabeça pra baixo. --- */
@keyframes girar        { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes girarAoContrario { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* --- 4. flow · 1s linear infinite · stroke-dashoffset 24→0
       vive em: o conector tracejado que liga a escolha do funil ao diagnóstico --- */
@keyframes fluir { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* --- 5. ping · halo que expande e some
       vive em: ponto de status "ao vivo", linha em destaque da tabela, centro da órbita --- */
@keyframes pingar {
  75%, 100% { transform: scale(2.1); opacity: 0; }
}

/* --- 6. pulse · respiração do ponto
       vive em: pílula "ao vivo" da barra do painel --- */
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* --- 7 a 10. os quatro padrões de hover, com as durações medidas --- */
/*  7. transition-colors   — 150ms (padrão)  → links, itens de nav, linhas de tabela
    8. transition-all      — 300ms           → botões, cartões, chips de ícone
    9. transition-transform—                  → qualquer peça que se move no hover
   10. hover:scale-110     — 300ms           → ícones da órbita e chips circulares      */
.tr-cor       { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.tr-tudo      { transition: all var(--dur-hover) var(--curva-entrada); }
.tr-transform { transition: transform var(--dur-hover) var(--curva-entrada); }
.hv-escala:hover     { transform: scale(1.10); }
.hv-escala-leve:hover{ transform: scale(1.02); }

/* --- 11. (nossa, não da referência) a conversa se montando bolha por bolha,
       na cadência real medida entre as mensagens --- */
@keyframes balaoEntrando {
  from { opacity: 0; transform: translateY(14px) scale(0.97); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0); }
}
@keyframes digitando {
  0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}

/* ==========================================================================
   APLICAÇÃO
   ========================================================================== */

.entra { animation: entrarComBlur var(--dur-entrada) var(--curva-entrada) both; }
.d-75  { animation-delay: 75ms; }
.d-100 { animation-delay: 100ms; }
.d-150 { animation-delay: 150ms; }
.d-200 { animation-delay: 200ms; }
.d-300 { animation-delay: 300ms; }
.d-500 { animation-delay: 500ms; }
.d-700 { animation-delay: 700ms; }

/* SO quem foi armado por js/entrada.js (data-espera = estava abaixo da dobra ao
   carregar) começa escondido e entra ao chegar. A versão anterior escondia TODO
   .no-scroll e esperava uma classe .visivel que nenhum script adicionava: 21
   blocos invisíveis para o visitante, com todos os gates verdes porque cada
   ferramenta de captura adicionava .visivel na mão antes da foto.
   Sem data-espera (sem JS, script falhou, já estava na tela) o bloco é visível. */
.js .no-scroll[data-espera] { animation: entrarNoScroll var(--dur-scroll) ease-out 0.1s both; animation-play-state: paused; }
.js .no-scroll[data-espera].visivel { animation-play-state: running; }

/* ponto de status com halo — o ping da referência */
.status {
  position: relative;
  display: inline-flex;
  width: 8px; height: 8px;
  flex: none;
}
/* HONESTIDADE: o halo NÃO pulsa por decoração. Ele pulsa só enquanto a conversa
   está de fato se remontando na tela — aí existe algo acontecendo agora. Parado,
   é um ponto estático. Pulsar ao lado de número congelado afirma tempo real sem
   escrever a palavra, e isso é mentira igual. */
.status::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--acento-claro);
  opacity: 0.3;
}
.conversa[data-tocando="1"] .status::before {
  opacity: 0.75;
  animation: pingar 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.status::after {
  content: "";
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--acento);
}
.status--verde::before { background: var(--sage); }
.status--verde::after  { background: var(--green-2); }

/* ponto que respira — o pulse. Vive na pílula do acesso antecipado, onde
   comunica um fato de agora que é verdade: a lista está aberta neste momento. */
.ponto-vivo {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento);
  flex: none;
  animation: pulsar 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .entra, .js .no-scroll { animation: none !important; opacity: 1; filter: none; transform: none; }
  .status::before, .ponto-vivo, .orbita__anel-giro, .orbita__item, .orbita__chip,
  .orbita__centro::before, .conector__ativo, .digitando span { animation: none !important; }
  .status::before { opacity: 0.4; }
  .hv-escala:hover, .hv-escala-leve:hover { transform: none; }
}