/* =============================================================================
   animations.css — biblioteca central de utilitários de animação.
   Camada transversal (carregada após components.css).

   Objetivo: deixar a interface viva, suave e profissional usando SOMENTE
   transform/opacity (performático). Toda animação roda em GPU, respeita o
   "prefers-reduced-motion" e usa os tokens de easing/duração de base.css.

   Reaproveita @keyframes já existentes (fade-in, pop-in, spin, shimmer) de
   components.css em vez de duplicá-los.
   ========================================================================== */

/* ---- @keyframes de entrada (transform + opacity) ------------------------- */
@keyframes anim-in    { from { opacity: 0; transform: translateY(10px); }  to { opacity: 1; transform: none; } }
@keyframes anim-fade  { from { opacity: 0; }                                to { opacity: 1; } }
@keyframes anim-rise  { from { opacity: 0; transform: translateY(14px); }  to { opacity: 1; transform: none; } }
@keyframes anim-drop  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes anim-zoom  { from { opacity: 0; transform: scale(.95); }        to { opacity: 1; transform: none; } }
@keyframes anim-slide-r { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes anim-slide-l { from { opacity: 0; transform: translateX(16px); }  to { opacity: 1; transform: none; } }
@keyframes anim-pop   { from { opacity: 0; transform: scale(.8); }         to { opacity: 1; transform: none; } }

/* ---- Classes de entrada (rodam uma vez, mantêm estado final) ------------- */
.anim-in,
.anim-fade,
.anim-rise,
.anim-drop,
.anim-zoom,
.anim-slide-r,
.anim-slide-l,
.anim-pop {
  animation-duration: var(--dur-slow);
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-delay: calc(var(--i, 0) * 55ms);
}
.anim-in      { animation-name: anim-in; }
.anim-fade    { animation-name: anim-fade; }
.anim-rise    { animation-name: anim-rise; }
.anim-drop    { animation-name: anim-drop; }
.anim-zoom    { animation-name: anim-zoom; }
.anim-slide-r { animation-name: anim-slide-r; }
.anim-slide-l { animation-name: anim-slide-l; }
.anim-pop     { animation-name: anim-pop; animation-timing-function: var(--ease-spring); }

/* ---- Stagger: atrasa filhos automaticamente (1..12) ---------------------- */
.stagger > *:nth-child(1)  { animation-delay: calc(0  * 55ms); }
.stagger > *:nth-child(2)  { animation-delay: calc(1  * 55ms); }
.stagger > *:nth-child(3)  { animation-delay: calc(2  * 55ms); }
.stagger > *:nth-child(4)  { animation-delay: calc(3  * 55ms); }
.stagger > *:nth-child(5)  { animation-delay: calc(4  * 55ms); }
.stagger > *:nth-child(6)  { animation-delay: calc(5  * 55ms); }
.stagger > *:nth-child(7)  { animation-delay: calc(6  * 55ms); }
.stagger > *:nth-child(8)  { animation-delay: calc(7  * 55ms); }
.stagger > *:nth-child(9)  { animation-delay: calc(8  * 55ms); }
.stagger > *:nth-child(10) { animation-delay: calc(9  * 55ms); }
.stagger > *:nth-child(11) { animation-delay: calc(10 * 55ms); }
.stagger > *:nth-child(12) { animation-delay: calc(11 * 55ms); }
/* Qualquer elemento com --i inline também é atrasado (já coberto acima nas
   classes .anim-*, mas garantimos para .reveal e usos avulsos). */
[style*="--i"] { animation-delay: calc(var(--i, 0) * 55ms); }

/* ---- Hover / interação --------------------------------------------------- */
.hover-lift { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.hover-grow { transition: transform var(--dur) var(--ease-out); }
.hover-grow:hover { transform: scale(1.03); }

.hover-glow { transition: box-shadow var(--dur) var(--ease-out); }
.hover-glow:hover { box-shadow: 0 0 0 .2rem rgba(16, 185, 129, .28); }

.press { transition: transform var(--dur-fast) var(--ease-out); }
.press:active { transform: scale(.97); }

.clickable {
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.clickable:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.clickable:active { transform: scale(.97); }

/* ---- Atenção ------------------------------------------------------------- */
@keyframes anim-pulse  { 0%, 100% { transform: scale(1);    opacity: 1; }
                          50%      { transform: scale(1.04); opacity: .85; } }
@keyframes anim-bounce { 0%, 100% { transform: translateY(0); }
                          50%      { transform: translateY(-4px); } }
@keyframes anim-shake  { 10%, 90% { transform: translateX(-1px); }
                          20%, 80% { transform: translateX(2px); }
                          30%, 50%, 70% { transform: translateX(-4px); }
                          40%, 60% { transform: translateX(4px); } }
@keyframes anim-flash  { from { background-color: rgba(16, 185, 129, .16); }
                          to   { background-color: transparent; } }

.anim-pulse  { animation: anim-pulse 1.8s var(--ease-out) infinite; }
.anim-bounce { animation: anim-bounce 1.4s var(--ease-out) infinite; }
.anim-shake  { animation: anim-shake .4s var(--ease-out) 1; }
.anim-flash  { animation: anim-flash 1.1s var(--ease-out) 1; }

/* ---- Loading / saída ----------------------------------------------------- */
@keyframes anim-progress { 0%   { transform: translateX(-100%) scaleX(.4); }
                           50%  { transform: translateX(0%)    scaleX(.6); }
                           100% { transform: translateX(100%)  scaleX(.4); } }
.anim-progress {
  position: relative;
  overflow: hidden;
  height: 3px;
  background: var(--c-border);
  border-radius: var(--radius-pill);
}
.anim-progress::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--c-accent);
  border-radius: inherit;
  transform-origin: left center;
  animation: anim-progress 1.1s var(--ease-out) infinite;
}

/* Saída genérica (usada por ui.js via animateOut). */
@keyframes anim-out     { from { opacity: 1; transform: none; }            to { opacity: 0; transform: scale(.96); } }
@keyframes toast-out    { from { opacity: 1; transform: none; }            to { opacity: 0; transform: translateX(20px) scale(.98); } }
@keyframes modal-out    { from { opacity: 1; transform: none; }            to { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes overlay-out  { from { opacity: 1; }                             to { opacity: 0; } }

.anim-out    { animation: anim-out var(--dur) var(--ease-out) both; }
.toast--out  { animation: toast-out var(--dur) var(--ease-out) both; }
.modal--out  { animation: modal-out var(--dur) var(--ease-out) both; }
.overlay--out { animation: overlay-out var(--dur) var(--ease-out) both; }

/* ---- Scroll reveal (IntersectionObserver em ui.js adiciona .is-visible) -- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---- Acessibilidade: respeita "reduzir movimento" ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .anim-in, .anim-fade, .anim-rise, .anim-drop, .anim-zoom,
  .anim-slide-r, .anim-slide-l, .anim-pop,
  .anim-pulse, .anim-bounce, .anim-shake, .anim-flash, .anim-progress,
  .anim-out, .toast--out, .modal--out, .overlay--out,
  .stagger > * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
  }
  .anim-progress::before {
    animation: none !important;
  }
  .reveal {
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    opacity: 1;
    transform: none;
  }
  .hover-lift, .hover-grow, .hover-glow, .press, .clickable {
    transition-duration: .001ms !important;
  }
  .hover-lift:hover, .hover-grow:hover, .clickable:hover,
  .press:active, .clickable:active {
    transform: none !important;
  }
}