/* =====================================================================
   BLUHUB · MOVIMENTO E MICROINTERAÇÕES
   Só tokens de tokens.css (--dur-*, --curva-*, --mov-*, --sombra-hover).
   Só opacity e transform. Nada bloqueia clique (pointer-events intactos).
   "Reduzir movimento": os tokens zeram deslocamento/escala e duração.
   Hover só em aparelhos com mouse; no toque fica só a "pressão".
   ===================================================================== */

/* ---------- Entradas ---------- */
@keyframes mov-entrar { from { opacity: 0; transform: translateY(var(--mov-desloc)); } to { opacity: 1; transform: none; } }
@keyframes mov-surgir { from { opacity: 0; } to { opacity: 1; } }
@keyframes mov-sair { to { opacity: 0; transform: scale(var(--mov-escala-press)); } }
@keyframes mov-modal { from { opacity: 0; transform: scale(var(--mov-escala-modal)) translateY(calc(var(--mov-desloc) / 2)); } to { opacity: 1; transform: none; } }
@keyframes mov-modal-sair { to { opacity: 0; transform: scale(var(--mov-escala-modal)); } }
@keyframes mov-fundo { from { opacity: 0; } to { opacity: 1; } }
@keyframes mov-aviso { from { opacity: 0; transform: translate(-50%, calc(var(--mov-desloc) * 1.6)); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mov-aviso-sair { to { opacity: 0; transform: translate(-50%, calc(var(--mov-desloc) * 1.6)); } }
@keyframes mov-pulsar { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Título da tela e blocos em sequência (o JS põe --i em cada bloco: 0, 1, 2…) */
.mov-titulo { animation: mov-entrar var(--dur-entrada) var(--curva-entrada) both; }
.mov-entrar { animation: mov-entrar var(--dur-entrada) var(--curva-entrada) both; animation-delay: calc(min(var(--i, 0), 8) * var(--mov-stagger)); }
/* Itens de lista: entram/saem mais rápido */
.mov-item-novo { animation: mov-entrar var(--dur-padrao) var(--curva-saida) both; }
.mov-item-sai { animation: mov-sair var(--dur-padrao) var(--curva-saida) both; }
/* Telas de trabalho rápido (PDV, comandas): nenhuma animação de entrada */
.mov-sem-entrada .mov-entrar, .mov-sem-entrada .mov-titulo, .mov-sem-entrada .mov-item-novo { animation: none; }

/* Modal (dialog.modal): abre com fade + leve escala; .fechando = saída */
.modal[open] { animation: mov-modal var(--dur-padrao) var(--curva-entrada); }
.modal[open]::backdrop { animation: mov-fundo var(--dur-padrao) var(--curva-saida); }
.modal.fechando { animation: mov-modal-sair var(--dur-rapida) var(--curva-saida) forwards; }
.modal.fechando::backdrop { animation: mov-fundo var(--dur-rapida) var(--curva-saida) reverse forwards; }

/* Aviso (toast): desliza de baixo e some suave */
.aviso:not([hidden]) { animation: mov-aviso var(--dur-padrao) var(--curva-entrada); }
.aviso.saindo { animation: mov-aviso-sair var(--dur-padrao) var(--curva-saida) forwards; }

/* Esqueleto de carregamento */
.esqueleto { display: grid; gap: var(--esp-3); }
.esqueleto .osso { border-radius: var(--raio-md); background: var(--trilho); animation: mov-pulsar 1.2s ease-in-out infinite; }
.esqueleto .osso.linha { height: 14px; }
.esqueleto .osso.linha.curta { width: 45%; }
.esqueleto .osso.bloco { height: 72px; border-radius: var(--raio-lg); }
.esqueleto .osso.cartao { height: 132px; border-radius: var(--raio-lg); }
@media (prefers-reduced-motion: reduce) { .esqueleto .osso { animation: none; opacity: .8; } }

/* ---------- Pressão (toque e mouse) ---------- */
.btn, .btn-icone, button.card, a.card, .item, .segmentado button {
  transition: transform var(--dur-rapida) var(--curva-saida), box-shadow var(--dur-rapida) var(--curva-saida),
              background-color var(--dur-rapida) var(--curva-saida), border-color var(--dur-rapida) var(--curva-saida), filter var(--dur-rapida) var(--curva-saida);
}
.btn:active, .btn-icone:active { transform: scale(var(--mov-escala-press)); }
button.card:active, a.card:active { transform: scale(.99); }

/* ---------- Foco pelo teclado: mesmo destaque, contorno na cor da empresa ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cor-primaria); outline-offset: 2px;
}
.btn:focus-visible { box-shadow: 0 0 0 4px var(--cor-100); }
button.card:focus-visible, a.card:focus-visible { transform: translateY(var(--mov-elevar)); box-shadow: var(--sombra-hover); }
.menu a:focus-visible { background: var(--item-ativo); }
.menu a:focus-visible .ic { transform: translateX(3px); }

/* ---------- Hover: só com mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  button.card:hover, a.card:hover, .card.clicavel:hover, .prod-card:hover {
    transform: translateY(var(--mov-elevar)); box-shadow: var(--sombra-hover);
  }
  .btn-primario:hover { filter: brightness(1.07) saturate(1.05); transform: scale(var(--mov-escala-hover)); }
  .btn-primario:active { transform: scale(var(--mov-escala-press)); }
  .btn-contorno:hover { transform: scale(var(--mov-escala-hover)); }
  .btn-contorno:active { transform: scale(var(--mov-escala-press)); }
  .btn-texto:hover { background: var(--cor-50); }
  .btn-icone:hover { color: var(--cor-marca-texto); transform: scale(1.06); }
  .itens .item:hover { background: var(--cor-50); }
  .tabela tbody tr { transition: background-color var(--dur-rapida) var(--curva-saida); }
  .tabela tbody tr:hover { background: var(--cor-50); }
  .menu a { transition: background-color var(--dur-padrao) var(--curva-saida), color var(--dur-rapida) var(--curva-saida); }
  .menu a .ic { transition: transform var(--dur-padrao) var(--curva-entrada); }
  .menu a:hover { background: var(--cor-50); }
  .menu a:hover .ic { transform: translateX(3px); }
  /* ícones de ação (editar, ajustar, WhatsApp) */
  .acoes .btn-texto svg, .acoes a svg, .linha-botoes .btn-texto svg { transition: transform var(--dur-rapida) var(--curva-saida); }
  .acoes .btn-texto:hover svg, .acoes a:hover svg, .linha-botoes .btn-texto:hover svg { transform: scale(1.12); }
  /* links de texto: sublinhado crescendo da esquerda para a direita */
  .link-mov, .conteudo p a:not(.btn), .tabela td a:not(.btn) {
    text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size var(--dur-padrao) var(--curva-saida);
  }
  .link-mov:hover, .conteudo p a:not(.btn):hover, .tabela td a:not(.btn):hover { background-size: 100% 1.5px; }
  /* fotos e miniaturas: zoom dentro da moldura */
  .foto-moldura, .miniatura, .pp-foto { overflow: hidden; }
  .foto-moldura img, .miniatura img, .pp-foto img { transition: transform var(--dur-entrada) var(--curva-entrada); }
  .foto-moldura:hover img, .miniatura:hover img, .pp-foto:hover img, .prod-card:hover img { transform: scale(var(--mov-zoom-foto)); }
}

/* ---------- Páginas públicas (mais expressivas) ---------- */
.pp-revelar { opacity: 0; transform: translateY(calc(var(--mov-desloc) * 1.6)); transition: opacity var(--dur-entrada) var(--curva-entrada), transform var(--dur-entrada) var(--curva-entrada); transition-delay: calc(min(var(--i, 0), 8) * var(--mov-stagger)); }
.pp-revelar.visivel { opacity: 1; transform: none; }
.pp-etapa { animation: mov-entrar var(--dur-padrao) var(--curva-entrada) both; }
@media (hover: hover) and (pointer: fine) {
  .pp-produto, .pp-portfolio-item { transition: transform var(--dur-padrao) var(--curva-saida), box-shadow var(--dur-padrao) var(--curva-saida); }
  .pp-produto:hover, .pp-portfolio-item:hover { transform: translateY(calc(var(--mov-elevar) * 2)); box-shadow: var(--sombra-hover); }
  .pp-produto img, .pp-portfolio-item img { transition: transform var(--dur-entrada) var(--curva-entrada); }
  .pp-produto:hover img, .pp-portfolio-item:hover img { transform: scale(var(--mov-zoom-foto)); }
}
/* contador da sacola "pulando" quando muda */
@keyframes mov-pulo { 40% { transform: scale(1.25); } 100% { transform: none; } }
.mov-pulo { animation: mov-pulo var(--dur-padrao) var(--curva-saida); }
@media (prefers-reduced-motion: reduce) {
  .pp-revelar { opacity: 1; transform: none; transition: none; }
}