/* ============================================================
   ANIMAÇÕES COMPARTILHADAS · CRM do Jordão
   ============================================================
   Cada keyframe abaixo é marcado como:

     /* NATIVO  */ /* — existe no produto real, na rota indicada.
     /* VITRINE */ /* — existe só no componente de marketing
                        (src/components/marketing/screens/*.tsx), que é
                        recriação de vitrine, não a tela logada.

   A distinção importa: na LP você decide, tela a tela, se mostra o
   movimento real do sistema ou o movimento de vitrine. Documentação
   completa (gatilho, duração, easing, sequência) em
   documentation/animation-specs.md.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   NATIVO · rota /mentor (Jordão IA)
   Origem: src/app/(app)/mentor/mentor.css
   ───────────────────────────────────────────────────────────── */

/* NATIVO · mentor.css:594 · cursor de streaming no fim do texto que a
   IA ainda está escrevendo. steps(1) = pisca duro, sem fade. */
@keyframes mt-caret {
  50% { opacity: 0; }
}

/* NATIVO · mentor.css:710 · indicador "digitando" de 3 pontos.
   Os pontos 2 e 3 recebem animation-delay de 0.15s e 0.3s. */
@keyframes mt-typing-anim {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* NATIVO · mentor.css:794 · entrada do card de tool (artifact) quando a
   IA propõe uma ação dentro da conversa. */
@keyframes mt-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* NATIVO · mentor.css:1150 · ponto vermelho pulsando durante gravação
   de áudio no card de WhatsApp. */
@keyframes mt-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* NATIVO · mentor.css:1187 · entrada do toast "Enviado. Desfazer",
   que fica visível por 6s acima do composer. */
@keyframes mt-undo-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* NATIVO · mentor.css:126 · overlay escuro do drawer de conversas
   (só abaixo de 1024px de largura). */
@keyframes mt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   VITRINE · componente ScreenJordaoIA
   Origem: src/components/marketing/screens/JordaoIA.tsx
   Loop único de 4.5s. As 7 faixas rA..rG revelam os parágrafos da
   resposta do Jordão em cascata, simulando a escrita da IA.
   ───────────────────────────────────────────────────────────── */

/* VITRINE · JordaoIA.tsx:5-11 · revelação em cascata dos blocos da
   resposta. Cada faixa entra 10 pontos percentuais depois da anterior
   e todas somem juntas em 99% pra fechar o loop sem salto. */
@keyframes jia-rA { 0%,12%{opacity:0;transform:translateY(0.7cqw)} 17%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes jia-rB { 0%,22%{opacity:0;transform:translateY(0.7cqw)} 27%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes jia-rC { 0%,32%{opacity:0;transform:translateY(0.7cqw)} 37%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes jia-rD { 0%,42%{opacity:0;transform:translateY(0.7cqw)} 47%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes jia-rE { 0%,54%{opacity:0;transform:translateY(0.7cqw)} 59%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes jia-rF { 0%,66%{opacity:0;transform:translateY(0.7cqw)} 71%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes jia-rG { 0%,76%{opacity:0;transform:translateY(0.7cqw)} 81%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }

/* VITRINE · JordaoIA.tsx:12 · os 3 pontos de "digitando" somem cedo no
   loop, quando a primeira linha da resposta aparece. */
@keyframes jia-typedots { 0%,8%{opacity:1} 20%,100%{opacity:0} }

/* VITRINE · JordaoIA.tsx:13 · cursor no fim do último parágrafo.
   Mesmo efeito do mt-caret nativo, com nome próprio da tela. */
@keyframes jia-caret { 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ─────────────────────────────────────────────────────────────
   NATIVO · rota /atividades (Rotina Comercial Diária)
   Origem: src/app/(app)/atividades/routine.css
   ───────────────────────────────────────────────────────────── */

/* NATIVO · routine.css:1218 · a próxima atividade entra deslizando da
   direita quando o vendedor conclui a anterior no Modo Foco. */
@keyframes rt-slide-in {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* NATIVO · routine.css:1254-1268 · comemoração ao concluir a rotina do
   dia. Três camadas: o véu escuro, o círculo verde que estoura, e o
   tique dentro dele. */
@keyframes rt-burst-bg {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rt-burst-pop {
  0%   { transform: scale(0.4);  opacity: 0; }
  40%  { transform: scale(1.08); opacity: 1; }
  70%  { transform: scale(1); }
  100% { transform: scale(0.92); opacity: 0; }
}
@keyframes rt-burst-tick {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* NATIVO · routine.css:1898 · spinner do botão "Reanalisar". */
@keyframes rt-spin {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────
   VITRINE · componente ScreenRotina
   Origem: src/components/marketing/screens/Rotina.tsx
   Loop de 4.5s, 12 keyframes, prefixo rot-.
   ───────────────────────────────────────────────────────────── */

/* VITRINE · Rotina.tsx:19-21 · os três primeiros segmentos da barra de
   meta acendem em amarelo em tempos diferentes, simulando o progresso
   do dia acontecendo. */
@keyframes rot-segA { 0%,18%{background:#E4E2DB} 24%,92%{background:#F5C518} 98%,100%{background:#E4E2DB} }
@keyframes rot-segB { 0%,30%{background:#E4E2DB} 36%,92%{background:#F5C518} 98%,100%{background:#E4E2DB} }
@keyframes rot-segC { 0%,42%{background:#E4E2DB} 48%,92%{background:#F5C518} 98%,100%{background:#E4E2DB} }

/* VITRINE · Rotina.tsx:22 · o anel da atividade 1 preenche de 82 para 33
   de stroke-dashoffset (de 2/6 para 4/6 do círculo). */
@keyframes rot-ringfill { 0%,20%{stroke-dashoffset:82} 56%,92%{stroke-dashoffset:33} 100%{stroke-dashoffset:82} }

/* VITRINE · Rotina.tsx:23 · a pílula "+1 conversa" entra na metade do
   loop, fica visível até 86% e sai. É o feedback de conclusão. */
@keyframes rot-toast { 0%,50%{opacity:0;transform:translateY(0.6cqw)} 58%,86%{opacity:1;transform:none} 94%,100%{opacity:0} }

/* VITRINE · Rotina.tsx:24 · o card ativo pulsa uma vez em amarelo logo
   depois do toast, chamando atenção pro botão de ação. */
@keyframes rot-btnpulse {
  0%,60%  { box-shadow: 0 0 0 0 rgba(245,197,24,0); }
  66%     { box-shadow: 0 0 2.6cqw .3cqw rgba(245,197,24,.5); }
  74%,92% { box-shadow: 0 0 1.2cqw 0 rgba(245,197,24,.2); }
  100%    { box-shadow: none; }
}

/* VITRINE · Rotina.tsx:25-28 · os 4 stat cards entram escalonados,
   um a cada 4% do loop. */
@keyframes rot-crd1 { 0%,2%{opacity:0;transform:translateY(0.8cqw)} 10%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes rot-crd2 { 0%,6%{opacity:0;transform:translateY(0.8cqw)} 14%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes rot-crd3 { 0%,10%{opacity:0;transform:translateY(0.8cqw)} 18%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes rot-crd4 { 0%,14%{opacity:0;transform:translateY(0.8cqw)} 22%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }

/* VITRINE · Rotina.tsx:29-32 · as 4 atividades entram depois dos stat
   cards, também escalonadas, com um leve scale de 0.96. */
@keyframes rot-act1 { 0%,16%{opacity:0;transform:translateY(1cqw) scale(.96)} 24%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes rot-act2 { 0%,22%{opacity:0;transform:translateY(1cqw) scale(.96)} 30%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes rot-act3 { 0%,28%{opacity:0;transform:translateY(1cqw) scale(.96)} 36%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes rot-act4 { 0%,34%{opacity:0;transform:translateY(1cqw) scale(.96)} 42%,94%{opacity:1;transform:none} 99%,100%{opacity:0} }

/* ─────────────────────────────────────────────────────────────
   NATIVO · rota /inbox (WhatsApp)
   Origem: src/app/(app)/inbox/whatsapp.css
   ───────────────────────────────────────────────────────────── */

/* NATIVO · whatsapp.css:56 · halo amarelo pulsando na bolha que a IA
   marcou como relevante (.wa-bubble.ai-highlight). */
@keyframes wa-ai-pulse {
  0%, 100% { box-shadow: 0 0 0 0.125cqw #FFD400, 0 0 0 0.25cqw rgba(255,212,0,.2); }
  50%      { box-shadow: 0 0 0 0.125cqw #FFD400, 0 0 0 0.375cqw rgba(255,212,0,.1); }
}

/* NATIVO · whatsapp.css:69 · bolinha verde de "online"/"ao vivo",
   com onda saindo. */
@keyframes wa-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50%      { box-shadow: 0 0 0 0.25cqw rgba(16,185,129,0); }
}

/* ─────────────────────────────────────────────────────────────
   UTILITÁRIOS DE DEMONSTRAÇÃO
   ───────────────────────────────────────────────────────────── */

/* Respeita quem pediu menos movimento no sistema operacional.
   O produto não declara essa regra · ela existe aqui porque a
   biblioteca roda solta no navegador, muitas vezes em loop infinito. */
@media (prefers-reduced-motion: reduce) {
  .demo-loop *,
  .demo-loop *::before,
  .demo-loop *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}