/* Movimiento de la pantalla de pregunta.
   Solo transform y opacity; nada se mueve con «reducir movimiento».
   Las clases is-entering / is-fresh-result las pone study-motion.js una sola vez
   por pregunta, así que volver a pintar la tarjeta (favorito, valoración…) no repite nada. */

/* Fuera la franja de colores animada: la tarjeta ya se distingue sola. */
#testCard::before { content: none; display: none; animation: none; }

/* Pulsar una opción se nota bajo el dedo. */
#testCard .space-y-3 > div[onclick]:active {
  transform: scale(.985);
  transition-duration: .08s;
}
#testCard .space-y-3 > div[onclick]:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

/* Pregunta nueva: el enunciado y las opciones suben en cascada corta. */
#testCard.is-entering h2,
#testCard.is-entering .space-y-3 > div {
  animation: bfQIn .34s cubic-bezier(.2,.8,.2,1) both;
}
#testCard.is-entering .space-y-3 > div:nth-child(1) { animation-delay: .04s; }
#testCard.is-entering .space-y-3 > div:nth-child(2) { animation-delay: .08s; }
#testCard.is-entering .space-y-3 > div:nth-child(3) { animation-delay: .12s; }
#testCard.is-entering .space-y-3 > div:nth-child(4) { animation-delay: .16s; }
#testCard.is-entering .space-y-3 > div:nth-child(n+5) { animation-delay: .2s; }
@keyframes bfQIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Respuesta recién corregida: nada se desplaza. Solo los iconos de acierto o fallo
   aparecen con un pequeño impulso, en su sitio. */
#testCard.is-fresh-result .space-y-3 > .border-emerald-500 > div:first-child,
#testCard.is-fresh-result .space-y-3 > .border-rose-500 > div:first-child,
#testCard.is-fresh-result .answer-feedback [role="status"] > div:first-child {
  animation: bfIconPop .4s cubic-bezier(.3,1.5,.5,1) both;
}
@keyframes bfIconPop {
  0%   { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* La barra de avance se desliza en vez de saltar. */
#testProgressBar { transition: width .45s cubic-bezier(.2,.8,.2,1); }

@media (prefers-reduced-motion: reduce) {
  #testCard.is-entering *,
  #testCard.is-fresh-result * { animation: none !important; }
  #testCard .space-y-3 > div[onclick]:active { transform: none; }
  #testProgressBar { transition: none; }
}