/* =====================================================================
   animations.css
   Keyframes + classes de animação usadas por JS e elementos do site
   ===================================================================== */


/* -------------------------------------------------------------
   1) Ticker horizontal (barra rolante de informações)
------------------------------------------------------------- */
@keyframes tickerMove {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ticker-animate {
  animation: tickerMove 18s linear infinite;
}



/* -------------------------------------------------------------
   2) Fade in / Fade out
------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fadeIn .35s ease forwards; }

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.fade-out { animation: fadeOut .35s ease forwards; }



/* -------------------------------------------------------------
   3) Slide up (usado nas notificações)
------------------------------------------------------------- */
@keyframes slideUp {
  0% {
    transform: translateY(14px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.slide-up { animation: slideUp .35s cubic-bezier(.25,.85,.25,1) forwards; }



/* -------------------------------------------------------------
   4) Pulse / Glow (usado no sinal verde do popup)
------------------------------------------------------------- */
@keyframes pulseGreen {
  0%   { box-shadow: 0 0 0px rgba(0,255,0,0.45); }
  50%  { box-shadow: 0 0 10px rgba(0,255,0,0.8); }
  100% { box-shadow: 0 0 0px rgba(0,255,0,0.45); }
}
.pulse-green { animation: pulseGreen 1.8s ease-in-out infinite; }



/* -------------------------------------------------------------
   5) Float leve (usado em alguns banners e imagens)
------------------------------------------------------------- */
@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
.float { animation: float 4.5s ease-in-out infinite; }



/* -------------------------------------------------------------
   6) Hover animation para cards
------------------------------------------------------------- */
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.10);
  transition: transform .22s ease, box-shadow .22s ease;
}



/* -------------------------------------------------------------
   7) Number grow (usado para contadores animados)
------------------------------------------------------------- */
@keyframes numberGrow {
  0%   { transform: scale(1); opacity: 0.6; }
  40%  { transform: scale(1.22); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.number-grow { animation: numberGrow .45s cubic-bezier(.2,.9,.25,1) forwards; }



/* -------------------------------------------------------------
   8) Progress bar smooth fill
------------------------------------------------------------- */
@keyframes progressFill {
  0%   { width: 0%; }
  100% { width: var(--progress-target, 100%); }
}
.progress-fill {
  animation: progressFill 1.4s cubic-bezier(.2,.9,.25,1) forwards;
}