/* ==========================================================================
   ANIMAÇÕES (KEYFRAMES E CLASSES UTILITÁRIAS)
   Plataforma Imuno-hematologia Einstein
   ========================================================================== */

/* 1. Animação do cabeçalho a descer suavemente ao carregar a página */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Animação das perguntas a aparecerem com um leve efeito de "salto" (zoom) */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 3. Animação das caixas de feedback e gabarito a deslizarem para baixo */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. Animação de tremor intenso (Usada quando o aluno erra no Modo Morte Súbita) */
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* 5. Animação genérica de entrada suave (Usada na transição de etapas dos Casos Clínicos) */
@keyframes enterTransition {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 6. Animação de carregamento (Spinner) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   CLASSES UTILITÁRIAS PARA APLICAÇÃO DIRETA NO HTML
   ========================================================================== */

.fade-in-down {
  animation: fadeInDown 0.8s ease-out;
}

.question-anim {
  animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slide-down {
  animation: slideDown 0.4s ease-out;
}

.shake-anim {
  animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

.anim-enter {
  animation: enterTransition 0.5s ease-out forwards;
}

.spin-anim {
  animation: spin 1s linear infinite;
}