/* =====================================================================
   Movimento e microinterações (docs/motion-design.md)
   Poucos padrões, reaproveitados no site todo. Só transform e opacity.
   O surgimento é ligado pelo movimento.js (atributo data-mov); sem JS, tudo aparece pronto.
   ===================================================================== */
:root {
  --mov-rapido: 160ms; --mov-medio: 240ms; --mov-lento: 640ms;
  --mov-saida: cubic-bezier(.16, 1, .3, 1); --mov-padrao: cubic-bezier(.4, 0, .2, 1);
  --mov-dist: 16px; --mov-cascata: 70ms;
}
@media (max-width: 760px) { :root { --mov-dist: 10px; --mov-cascata: 50ms; --mov-lento: 520ms; } }

@keyframes mov-desce { from { opacity: 0; transform: translateY(-6px); } }
@keyframes mov-sobe { from { opacity: 0; transform: translateY(6px); } }
@keyframes mov-fade { from { opacity: 0; } }
@keyframes mov-amplia { from { opacity: 0; transform: scale(.97); } }

/* 1. Surgimento ao rolar: sobe (padrão), tela (mockups) e itens em cascata (--i) */
[data-mov] { opacity: 0; transform: translateY(var(--mov-dist)); transition: opacity var(--mov-lento) var(--mov-saida), transform var(--mov-lento) var(--mov-saida); transition-delay: calc(var(--i, 0) * var(--mov-cascata)); }
[data-mov="tela"] { transform: translateY(calc(var(--mov-dist) * 1.5)) scale(.97); transform-origin: 50% 100%; }
[data-mov].mov-visto { opacity: 1; transform: none; }

/* 2. Cabeçalho: fundo firme ao rolar, recolhe ao descer e volta ao subir */
.topo { transition: transform var(--mov-medio) var(--mov-padrao), background-color var(--mov-medio), border-color var(--mov-medio); }
.topo.rolou { background: rgba(255, 255, 255, .97); }
.topo.topo--oculto { transform: translateY(-101%); }

/* 3. Menus: o painel desce, as colunas e itens chegam em cascata */
.mega:not([hidden]) { animation: mov-desce var(--mov-medio) var(--mov-saida); }
.mega:not([hidden]) .mega__col, .menu-movel:not([hidden]) .container > * { animation: mov-sobe 320ms var(--mov-saida) both; animation-delay: calc(var(--i, 0) * 35ms); }
.menu-movel:not([hidden]) { animation: mov-desce var(--mov-medio) var(--mov-saida); }
.mega__col li a, .menu-movel a { transition: background-color var(--mov-rapido), color var(--mov-rapido); }
.menu-movel__grupo[open] > a { animation: mov-sobe var(--mov-medio) var(--mov-saida) both; }

/* 4. Botões: escurece e sobe 1 px; ao clicar, encolhe de leve */
.btn, .topo__cta { transition: background-color var(--mov-rapido), border-color var(--mov-rapido), color var(--mov-rapido), box-shadow var(--mov-medio) var(--mov-padrao), transform var(--mov-rapido) var(--mov-padrao); }
.btn:active, .topo__cta:active { transform: scale(.98); transition-duration: 80ms; }
.btn:focus-visible { outline: 3px solid rgba(1, 98, 204, .35); outline-offset: 2px; }
.whats-flutuante { transition: transform var(--mov-medio) var(--mov-saida); }
.link-seta .ic, .area__link .ic, .relacionado > .ic:last-child, .h4-ver { transition: transform var(--mov-medio) var(--mov-saida); }

/* 5. Cartões clicáveis: borda azul, sobem 2 px, sombra curta (só onde há mouse) */
.destaque, .solucao, .relacionado, .area, .uso, .cliente, .h4-area a { transition: border-color var(--mov-medio), box-shadow var(--mov-medio) var(--mov-padrao), transform var(--mov-medio) var(--mov-saida), background-color var(--mov-medio); }
.moldura__tela img, .destaque__imagem .moldura { transition: transform 480ms var(--mov-saida); }

@media (hover: hover) {
  .btn--primario:hover, .topo__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(1, 98, 204, .6); }
  .btn--secundario:hover, .btn--claro:hover { transform: translateY(-1px); }
  .whats-flutuante:hover { transform: scale(1.06); }
  .destaque:hover, .solucao:hover, .relacionado:hover, .area:hover, .uso:hover, .cliente:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -20px rgba(10, 34, 64, .35); border-color: var(--azul); }
  .destaque:hover .destaque__imagem .moldura { transform: translateY(-3px); }
  .moldura:hover .moldura__tela img { transform: scale(1.012); }
  .link-seta:hover .ic, .relacionado:hover > .ic:last-child, .area:hover .area__link .ic { transform: translateX(3px); }
  .h4-area a:hover .h4-ver { transform: translateX(3px); }
}

/* 6. Estados de componentes: abas, FAQ, ampliação de print, formulários */
.galeria__painel:not([hidden]) { animation: mov-sobe 360ms var(--mov-saida); }
.galeria__aba { transition: background-color var(--mov-medio), color var(--mov-medio), box-shadow var(--mov-medio); }
.faq__lista summary::after { transition: transform var(--mov-medio) var(--mov-saida), background-color var(--mov-medio); }
.faq__lista summary:hover::after { background: var(--azul-50, #EAF2FC); }
.faq__lista details[open] > :not(summary) { animation: mov-sobe 320ms var(--mov-saida); }
.lightbox[open] { animation: mov-amplia var(--mov-medio) var(--mov-saida); }
.lightbox[open]::backdrop { animation: mov-fade var(--mov-medio) ease-out; }
.campo input, .campo select, .campo textarea { transition: border-color var(--mov-rapido), box-shadow var(--mov-medio); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(1, 98, 204, .14); outline: none; }

/* 7. Números: largura estável durante a contagem */
.numeros dt, .h4-num b { font-variant-numeric: tabular-nums; }

/* 8. Parallax do topo: só o movimento.js mexe, e só em telas largas com mouse */
[data-paralaxe] { will-change: transform; }

/* Movimento reduzido: tudo pronto, sem deslocamentos; transições de cor continuam */
@media (prefers-reduced-motion: reduce) {
  [data-mov] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mega:not([hidden]), .mega:not([hidden]) .mega__col, .menu-movel:not([hidden]), .menu-movel:not([hidden]) .container > *, .menu-movel__grupo[open] > a,
  .galeria__painel:not([hidden]), .faq__lista details[open] > :not(summary), .lightbox[open], .lightbox[open]::backdrop { animation: none; }
  .topo.topo--oculto { transform: none; }
  .btn:active, .topo__cta:active { transform: none; }
  [data-paralaxe] { transform: none !important; will-change: auto; }
}