/* =============================================================================
   Portal Comercial Lumarj — animações
   -----------------------------------------------------------------------------
   Movimento curto e suave, sempre de baixo para cima ou de fora para dentro,
   para os elementos chegarem com calma. Nada pisca, nada fica em loop além dos
   slides da tela de entrada.

   Quem ativou "reduzir movimento" no sistema operacional não vê nenhuma destas
   animações — e na impressão (PDF) elas também são desligadas.
   ========================================================================== */

@keyframes subir      { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes descer     { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes aparecer   { from { opacity: 0; } to { opacity: 1; } }
@keyframes crescer    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes arco-abre  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes traco      { from { transform: scaleX(0); } to { transform: scaleX(1); } }

:root { --anima-ease: cubic-bezier(.2, .7, .2, 1); }

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

  /* ---------------------------------------------------------------------
     Tela de entrada
     ------------------------------------------------------------------ */
  .entrada__arco { transform-origin: 0 0; animation: arco-abre 1.1s var(--anima-ease) both; }
  .entrada__marca { animation: descer .8s .25s var(--anima-ease) both; }
  .entrada__assinatura { animation: subir .9s .45s var(--anima-ease) both; }
  .entrada__assinatura::before { transform-origin: left; animation: traco .7s .9s var(--anima-ease) both; }

  .entrada__caixa > form:not([hidden]) > *,
  .entrada__caixa > div:not([hidden]) > *,
  .entrada__marca-celular {
    animation: subir .6s var(--anima-ease) both;
  }
  .entrada__caixa > *:not([hidden]) > *:nth-child(1) { animation-delay: .30s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(2) { animation-delay: .38s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(3) { animation-delay: .46s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(4) { animation-delay: .54s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(5) { animation-delay: .62s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(6) { animation-delay: .70s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(7) { animation-delay: .78s; }
  .entrada__caixa > *:not([hidden]) > *:nth-child(n+8) { animation-delay: .86s; }

  /* erro de senha: um tremor curto, para o olho ir até a mensagem */
  @keyframes tremer {
    0%, 100% { transform: none; }
    20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
  }
  .aviso--erro:not([hidden]) { animation: tremer .42s ease both; }

  /* ---------------------------------------------------------------------
     Dentro do sistema
     ------------------------------------------------------------------ */
  .topo-portal { animation: descer .5s var(--anima-ease) both; }

  .capa-portal .sobretitulo,
  .capa-portal .titulo,
  .capa-portal p,
  .capa-portal__acoes { animation: subir .7s var(--anima-ease) both; }
  .capa-portal .titulo { animation-delay: .08s; }
  .capa-portal p { animation-delay: .16s; }
  .capa-portal__acoes { animation-delay: .24s; }
  .capa-portal::after { transform-origin: 100% 100%; animation: arco-abre 1.2s .1s var(--anima-ease) both; }

  /* cartões e linhas das listas chegam em sequência */
  .cartoes > *,
  .lista-propostas > * { animation: subir .55s var(--anima-ease) both; }
  .cartoes > *:nth-child(1), .lista-propostas > *:nth-child(1) { animation-delay: .05s; }
  .cartoes > *:nth-child(2), .lista-propostas > *:nth-child(2) { animation-delay: .11s; }
  .cartoes > *:nth-child(3), .lista-propostas > *:nth-child(3) { animation-delay: .17s; }
  .cartoes > *:nth-child(4), .lista-propostas > *:nth-child(4) { animation-delay: .23s; }
  .cartoes > *:nth-child(5), .lista-propostas > *:nth-child(5) { animation-delay: .29s; }
  .cartoes > *:nth-child(n+6), .lista-propostas > *:nth-child(n+6) { animation-delay: .35s; }

  .cartao__icone { transition: transform .3s var(--anima-ease), background .3s; }
  a.cartao:hover .cartao__icone { transform: rotate(-6deg) scale(1.08); background: var(--rosa); }

  /* editor: os passos entram em fila e o conteúdo abre com suavidade */
  .editor__lado > .passo { animation: subir .5s var(--anima-ease) both; }
  .editor__lado > .passo:nth-child(1) { animation-delay: .04s; }
  .editor__lado > .passo:nth-child(2) { animation-delay: .08s; }
  .editor__lado > .passo:nth-child(3) { animation-delay: .12s; }
  .editor__lado > .passo:nth-child(4) { animation-delay: .16s; }
  .editor__lado > .passo:nth-child(5) { animation-delay: .20s; }
  .editor__lado > .passo:nth-child(6) { animation-delay: .24s; }
  .editor__lado > .passo:nth-child(7) { animation-delay: .28s; }
  .editor__lado > .passo:nth-child(8) { animation-delay: .32s; }
  .passo[open] > .passo__corpo { animation: subir .35s var(--anima-ease) both; }

  .escolha, .logo-item, .foto-item { transition: border-color .18s, background .18s, transform .2s var(--anima-ease), box-shadow .2s; }
  .escolha:hover, .logo-item:hover { transform: translateY(-1px); }

  /* a prévia entra uma vez, ao abrir — não a cada tecla digitada */
  .editor__previa { animation: aparecer .6s .2s ease both; }

  /* caixas de diálogo */
  dialog[open] { animation: crescer .28s var(--anima-ease) both; }
  dialog[open]::backdrop { animation: aparecer .28s ease both; }

  /* recado flutuante já tem transição própria; botões ganham um toque */
  .botao:active:not(:disabled) { transform: translateY(0) scale(.98); }

  /* ---------------------------------------------------------------------
     Link do cliente: cada página sobe quando entra na tela
     (a classe .revelar é posta pelo script da página pública)
     ------------------------------------------------------------------ */
  .visor .pp.revelar { opacity: 0; transform: translateY(26px) scale(var(--zoom, 1)); }
  .visor .pp.revelada {
    opacity: 1; transform: scale(var(--zoom, 1));
    transition: opacity .7s ease, transform .8s var(--anima-ease);
  }
  .barra-cliente { animation: subir .6s .6s var(--anima-ease) both; }
}

/* No PDF nada pode ficar escondido esperando animação. */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .visor .pp.revelar { opacity: 1 !important; transform: none !important; }
}