/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*                  SISTEMA RIBMAR - CONTROLE DE CAIXA & CRM                          */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*  O QUE ESTE ARQUIVO FAZ:                                                           */
/*  Cuida de todas as MICRO-INTERACOES e animacoes fluidas a 60 FPS da aplicacao!      */
/*  Entrada suave das telas, efeito de pulso nos botoes de salvamento, feedback       */
/*  tatil nos toques de celular e transicoes suaves de Dark/Light mode.               */
/*                                                                                    */
/*  VARIAVEIS E CLASSES DE ANIMACAO:                                                  */
/*  * '@keyframes fadeIn': Revelacao suave das telas ao navegar.                      */
/*  * '@keyframes slideInDown': Descida natural dos avisos (toasts).                  */
/*  * '@keyframes pulseSlow': Efeito de alerta suave no icone de sincronizacao offline */
/*  * '.fade-in': Classe utilitaria para animar elementos que entram na tela.          */
/*                                                                                    */
/*  LOGICA USADA E EXPLICACAO PASSO A PASSO:                                          */
/*  1. Todas as animacoes utilizam exclusivamente 'transform' e 'opacity', que sao    */
/*     processadas diretamente pela GPU (placa de video) do celular sem gastar        */
/*     a CPU principal nem a memoria RAM do aparelho.                                 */
/*  2. O 'prefers-reduced-motion' do CSS respeita usuarios que preferem navegacao     */
/*     sem animacoes para poupar bateria e evitar tontura visual.                     */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.95);
  }
}

.fade-in {
  animation: fadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sync-badge.syncing .sync-dot {
  animation: pulseGlow 1.2s infinite ease-in-out;
}

/* Reducao de movimento para quem tem sensibilidade ou quer economizar bateria */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}