/* Agência de Negócios — movimento da direção "Conversa Franca" (v1.3)
   A régua é uma só: nada nesta marca aparece ou some de repente.
   Elemento que surge seco é erro, não escolha de estilo.
   Carregue depois de tokens.css e antes de componentes.css. */

:root {
  /* ---- Duração ----------------------------------------------------------
     Teto duro de 500ms. Nada de interface passa de meio segundo. Peça de
     vídeo e capa animada vivem fora desta régua (600–900ms) e nunca
     emprestam suas durações para a interface. */
  --dur-toque:     120ms; /* hover, foco, pressionado, marcação de checkbox */
  --dur-curta:     180ms; /* badge, chip, tooltip, ícone de estado */
  --dur-media:     260ms; /* card, passo, bloco de dado, dropdown */
  --dur-painel:    340ms; /* acordeão, modal, folha inferior */
  --dur-revelacao: 420ms; /* bloco entrando ao rolar a página */
  --dur-teto:      500ms;

  /* Toda saída é a entrada × 0,7, arredondada. Quem sai já não interessa;
     quem entra precisa ser acompanhado. */
  --dur-saida-fator:  .7;
  --dur-toque-saida:   90ms;
  --dur-curta-saida:  120ms;
  --dur-media-saida:  180ms;
  --dur-painel-saida: 240ms;

  /* ---- Curvas -----------------------------------------------------------
     Entrada desacelera e é mais longa: o elemento chega e assenta.
     Saída acelera e é mais curta: o elemento se retira.
     Nenhuma curva passa de 1 no eixo de saída: sem mola, sem quique. */
  --mov-entrada:  cubic-bezier(.16, .84, .44, 1);
  --mov-saida:    cubic-bezier(.45, 0, .9, .35);
  --mov-toque:    cubic-bezier(.3, 0, .6, 1);
  --mov-percurso: cubic-bezier(.4, .1, .2, 1);

  /* ---- Origem e distância ----------------------------------------------
     Nada nasce do nada nem do centro da tela. O que abre, abre a partir do
     elemento que acionou. */
  --origem-fala:  0 100%; /* o canto inferior esquerdo reto fica parado */
  --origem-fluxo: 0 0;
  --desloc-curto:   6px;
  --desloc-medio:  10px;
  --desloc-painel: 16px;
  --escala-entrada: .96;  /* piso absoluto .92: abaixo lê como zoom */

  /* ---- Sequência e espera ----------------------------------------------- */
  --mov-escada:     60ms;
  --mov-escada-max: 5;    /* do sexto elemento em diante, compartilha o 5º */
  --espera-rotulo:    500ms; /* botão vira "Enviando…" */
  --espera-esqueleto: 800ms;
  --espera-pulso:    1200ms;
  --espera-frase:    4000ms;

  /* ---- Marca (v1.3) -----------------------------------------------------
     Três usos, três réguas. Tudo derivado dos tokens acima; nenhum valor
     novo além da vinheta, que é a única peça fora da régua da interface. */
  /* 1 · entrada da primeira tela: balão cresce do canto reto, wordmark entra
     em seguida só com opacidade. Balão de 40 a 300 ms, wordmark de 160 a 340:
     tudo assentado em 340 ms, abaixo do teto. É o primeiro participante da
     escada da página. */
  --dur-marca-balao:      var(--dur-media);      /* 260 */
  --dur-marca-wordmark:   var(--dur-curta);      /* 180 */
  --marca-espera-wordmark: var(--dur-toque);     /* 120: o balão já está quase assentado */
  --marca-atraso:          40ms;                 /* a marca é o degrau 40 da entrada da página (movimento.md) */
  /* 2 · transição entre páginas: a marca fica; o conteúdo cruza. */
  --dur-transicao:        var(--dur-media);      /* 260 quem entra */
  --dur-transicao-saida:  var(--dur-media-saida);/* 180 quem sai */
  --desloc-transicao:     var(--desloc-curto);   /* 6 px */
  /* 3 · vinheta de vídeo: a única que pode passar de 500 ms. */
  --dur-vinheta:          800ms;
  --dur-vinheta-saida:    560ms;                 /* 800 × 0,7 */
  --dur-vinheta-reduzida: 240ms;                 /* movimento reduzido em vídeo: dobro do toque, nunca 0 */
  --escala-vinheta:       .92;                   /* o piso absoluto, só aqui */
}

/* ---- Marca · 1 · entrada da primeira tela ---------------------------------
   Marca inline (SVG) com dois grupos: .an-marca__balao e .an-marca__wordmark.
   A classe .an-marca--entrando é posta pelo JS uma vez por sessão; sem ela a
   marca está simplesmente lá. O SVG já ocupa o lugar desde o primeiro frame:
   nada abaixo espera, nada é coberto. */
.an-marca__balao    { transform-box: fill-box; transform-origin: var(--origem-fala); }
.an-marca--entrando .an-marca__balao {
  animation: an-marca-balao var(--dur-marca-balao) var(--mov-entrada) var(--marca-atraso) both;
}
.an-marca--entrando .an-marca__wordmark {
  animation: an-marca-wordmark var(--dur-marca-wordmark) var(--mov-entrada) calc(var(--marca-atraso) + var(--marca-espera-wordmark)) both;
}
@keyframes an-marca-balao    { from { opacity: 0; transform: scale(var(--escala-entrada)); } to { opacity: 1; transform: none; } }
@keyframes an-marca-wordmark { from { opacity: 0; } to { opacity: 1; } }
/* Os irmãos da marca na primeira tela seguem a tabela de movimento.md:
   estrutura 0, marca 40, título 100, apoio 160, botão 220. */
.an-escada-pagina > :nth-child(1) { --mov-atraso: 100ms; }
.an-escada-pagina > :nth-child(2) { --mov-atraso: 160ms; }
.an-escada-pagina > :nth-child(3) { --mov-atraso: 220ms; }
.an-escada-pagina > :nth-child(n+4) { --mov-atraso: 280ms; }

/* ---- Marca · 2 · transição entre páginas ------------------------------------
   View Transitions. Entre documentos, a regra @view-transition liga sozinha
   onde o navegador suporta; onde não suporta, a navegação é a de sempre, sem
   animação e sem quebra. Dentro de um só documento, anMovimento.transicao().
   A marca do cabeçalho recebe view-transition-name e fica ancorada; o resto
   cruza: o antigo sobe 6 px e some em 180, o novo chega de 6 px abaixo em
   260. Os dois acontecem ao mesmo tempo, então nenhuma página some antes de
   a outra aparecer. */
@view-transition { navigation: auto; }
.an-marca-ancorada    { view-transition-name: an-marca; }
.an-conteudo-transicao { view-transition-name: an-conteudo; } /* o <main> do site */
/* Fundo, grade e cabeçalho já chegam pintados: a raiz não anima. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(an-marca), ::view-transition-new(an-marca) { animation: none; } /* a marca não cruza: fica */
::view-transition-old(an-conteudo) { animation: an-transicao-saida var(--dur-transicao-saida) var(--mov-saida) both; }
::view-transition-new(an-conteudo) { animation: an-transicao-entrada var(--dur-transicao) var(--mov-entrada) both; }
::view-transition-image-pair(an-conteudo) { isolation: auto; } /* os dois se sobrepõem de verdade, sem mistura de blend */
@keyframes an-transicao-saida   { to   { opacity: 0; transform: translateY(calc(var(--desloc-transicao) * -1)); } }
@keyframes an-transicao-entrada { from { opacity: 0; transform: translateY(var(--desloc-transicao)); } }

/* ---- Marca · 3 · vinheta de vídeo --------------------------------------------
   Abre e fecha vídeo. O balão cresce do canto reto a partir do piso .92 em
   560 ms; o wordmark entra em 480 ms com opacidade e 10 px da esquerda,
   começando aos 320, quando o balão já tem forma. Total 800. A saída é o
   inverso resumido em 560: wordmark some primeiro, balão encolhe depois.
   Nunca em interface. */
.an-vinheta--entrando .an-marca__balao {
  animation: an-vinheta-balao calc(var(--dur-vinheta) * .7) var(--mov-entrada) both;
}
.an-vinheta--entrando .an-marca__wordmark {
  animation: an-vinheta-wordmark calc(var(--dur-vinheta) * .6) var(--mov-entrada) calc(var(--dur-vinheta) * .4) both;
}
.an-vinheta--saindo .an-marca__wordmark {
  animation: an-vinheta-wordmark-saida calc(var(--dur-vinheta-saida) * .55) var(--mov-saida) both;
}
.an-vinheta--saindo .an-marca__balao {
  animation: an-vinheta-balao-saida calc(var(--dur-vinheta-saida) * .7) var(--mov-saida) calc(var(--dur-vinheta-saida) * .3) both;
}
@keyframes an-vinheta-balao          { from { opacity: 0; transform: scale(var(--escala-vinheta)); } to { opacity: 1; transform: none; } }
@keyframes an-vinheta-wordmark       { from { opacity: 0; transform: translateX(calc(var(--desloc-medio) * -1)); } to { opacity: 1; transform: none; } }
@keyframes an-vinheta-wordmark-saida { to { opacity: 0; } }
@keyframes an-vinheta-balao-saida    { to { opacity: 0; transform: scale(var(--escala-entrada)); } }

/* ---- Revelação ao rolar -------------------------------------------------
   Só esconde quando o JS assumiu (classe em <html>), para a página continuar
   legível sem script. Cada bloco entra quando 15% dele aparece, uma vez só. */
.js-movimento .an-revelar {
  opacity: 0;
  transform: translateY(var(--desloc-medio));
  transition: opacity var(--dur-revelacao) var(--mov-entrada) var(--mov-atraso, 0ms),
              transform var(--dur-revelacao) var(--mov-entrada) var(--mov-atraso, 0ms);
}
.js-movimento .an-revelar.an-visivel { opacity: 1; transform: none; }

/* Escada: no máximo cinco participantes, o sexto em diante compartilha o quinto. */
.an-escada > *  { --mov-atraso: calc(var(--mov-escada) * 5); }
.an-escada > :nth-child(1) { --mov-atraso: 0ms; }
.an-escada > :nth-child(2) { --mov-atraso: calc(var(--mov-escada) * 1); }
.an-escada > :nth-child(3) { --mov-atraso: calc(var(--mov-escada) * 2); }
.an-escada > :nth-child(4) { --mov-atraso: calc(var(--mov-escada) * 3); }
.an-escada > :nth-child(5) { --mov-atraso: calc(var(--mov-escada) * 4); }

/* Esqueleto de espera: mesmo raio, mesma altura, mesmas larguras do texto real. */
.an-esqueleto {
  background: var(--cor-borda-hairline);
  border-radius: var(--raio-sm);
  animation: an-pulso var(--espera-pulso) var(--mov-toque) infinite;
}
@keyframes an-pulso { 0%, 100% { opacity: .5 } 50% { opacity: .85 } }

/* ---- Movimento reduzido -------------------------------------------------
   Não é movimento zero: quem pediu menos movimento continua precisando
   entender o que aconteceu. Deslocamento e escala vão a zero, a opacidade
   permanece, curta. Proibido chegar a 0ms: corte seco é o erro que essa
   preferência não pediu. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --desloc-curto: 0px; --desloc-medio: 0px; --desloc-painel: 0px;
    --escala-entrada: 1; --mov-escada: 0ms;
  }
  *, *::before, *::after {
    animation-duration: var(--dur-toque) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--dur-toque) !important;
    transition-timing-function: var(--mov-toque) !important;
    scroll-behavior: auto !important;
  }
  .an-esqueleto { animation: none; opacity: .65; }
  /* Marca: escala e deslocamento a zero, sobra a opacidade. Entrada e
     transição ficam em 120 ms pela regra acima; a vinheta, por viver em
     vídeo, ganha 240. Nenhuma chega a 0. */
  :root { --escala-vinheta: 1; --desloc-transicao: 0px; }
  .an-vinheta--entrando .an-marca__balao, .an-vinheta--entrando .an-marca__wordmark,
  .an-vinheta--saindo .an-marca__balao, .an-vinheta--saindo .an-marca__wordmark {
    animation-duration: var(--dur-vinheta-reduzida) !important;
    animation-delay: 0ms !important;
  }
  ::view-transition-group(*) { animation-duration: var(--dur-toque) !important; }
}