/**
 * animations.css — Transições entre steps, fade-in, shake de erro.
 * Todas as animações e keyframes do projeto vivem aqui.
 * Implementado na Sprint 7.
 */

/* ─── Keyframes ─────────────────────────────────────────────────────────────── */

@keyframes slideInFromRight {
  from { transform: translateX(32px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes slideInFromLeft {
  from { transform: translateX(-32px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

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

@keyframes shake {
  0%, 100% { transform: translateX(0);  }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px);  }
}

@keyframes drawCheck {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0;  }
}

@keyframes popIn {
  0%   { transform: scale(0.6); opacity: 0; }
  70%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1; }
}

/* ─── Classes de entrada de step ─────────────────────────────────────────────── */

/* Avançar: novo step entra pela direita */
.animate-in-right {
  animation: slideInFromRight 280ms ease-out forwards;
}

/* Voltar: novo step entra pela esquerda */
.animate-in-left {
  animation: slideInFromLeft 280ms ease-out forwards;
}

/* ─── Shake no botão ao tentar avançar com erro ─────────────────────────────── */

.btn--shake {
  animation: shake 400ms ease-out;
}

/* ─── Tela de sucesso ────────────────────────────────────────────────────────── */

.success-screen {
  animation: fadeIn 450ms ease-out forwards;
}

.success-icon {
  animation: popIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Anima o checkmark SVG — funciona apenas se o path tiver stroke-dasharray="50" */
.success-icon svg path {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 500ms ease-out 300ms forwards;
}

/* ─── Transição da barra de progresso ────────────────────────────────────────── */
/* (definida aqui pois é uma animação, não um layout) */

.progress-bar__fill {
  transition: width 400ms ease;
}

/* ─── Reduzir movimento: respeita preferência do sistema ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .animate-in-right,
  .animate-in-left {
    animation: fadeIn 150ms ease forwards;
  }

  .btn--shake {
    animation: none;
  }

  .success-screen,
  .success-icon {
    animation: none;
  }

  .success-icon svg path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .progress-bar__fill {
    transition: width 150ms ease;
  }
}