/* PAES Ultra · Ola 1 "Sensación" (app/animaciones.js) · dirección A · Pulido
   Movimiento breve con salida suave (--ease-out); el resorte (--ease-spring) solo en respuestas y celebraciones.
   El acento cálido (--accent-warm) aparece únicamente en logros, nivel, racha viva y podio. Sin colores fijos:
   todo sale de los tokens de estilos.css, así los dos temas quedan cubiertos. prefers-reduced-motion anula todas las
   animaciones desde estilos.css; html.anim-quieto (?quieto, capturas) las congela en un cuadro representativo. */

/* ---------- 1. Transición entre vistas (solo al navegar con ir(); no en cada pintar()) ---------- */
@keyframes vista-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vista-aparece { from { opacity: 0; } to { opacity: 1; } }
html.transicion #app > .vista { animation: vista-entra var(--dur-2) var(--ease-out) both; }
/* El ensayo lleva barra inferior y hoja fijas en el celular: sin desplazamiento, solo aparece */
html.transicion #app > .ensayo { animation: vista-aparece var(--dur-2) var(--ease-out) both; }

/* ---------- 2. Respuesta al marcar una alternativa ---------- */
@keyframes hunde-rebota { 0% { transform: scale(1); } 30% { transform: scale(.97); } 65% { transform: scale(1.02); } 100% { transform: scale(1); } }
.alternativa.recien { animation: hunde-rebota var(--dur-3) var(--ease-spring) both; }

/* ---------- 3. Resultados: los medidores por eje crecen desde cero, escalonados ---------- */
.medidor-riel i { transition: width var(--dur-3) var(--ease-out); }

/* ---------- 4. XP flotante ("+12 XP" que sube y se desvanece) ---------- */
@keyframes xp-sube { 0% { opacity: 0; transform: translateY(8px); } 18% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px); } }
.xp-flota {
  position: fixed; top: 62px; right: 18px; z-index: 94;
  padding: 6px 12px; border-radius: var(--pill);
  background: var(--ok-soft); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-sm); pointer-events: none; white-space: nowrap;
  animation: xp-sube 700ms var(--ease-out) both;
}

/* ---------- 5. Celebración de logro y de nivel ---------- */
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes tarjeta-entra { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes confeti-cae {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--deriva, 0px), 46vh, 0) rotate(var(--giro, 200deg)); }
}
.celebracion {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center; padding: 20px;
  background: var(--velo);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: velo-entra var(--dur-2) var(--ease-out) both;
  cursor: pointer;
}
.celebracion-tarjeta {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px;
  display: grid; justify-items: center; gap: 8px;
  padding: 30px 26px 24px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  animation: tarjeta-entra var(--dur-3) var(--ease-spring) both;
  cursor: default;
}
.celebracion-icono {
  display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 8px;
  border-radius: 50%; font-size: 40px; line-height: 1;
  background: var(--accent-warm-soft); color: var(--accent-warm-ink);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent-warm) 14%, transparent);
}
.celebracion--nivel .celebracion-icono {
  background: var(--accent-warm); color: var(--accent-warm-ink);
  font-family: var(--display); font-weight: 700; font-size: 36px; letter-spacing: -0.04em;
}
.celebracion-tarjeta h3 { font-size: 22px; letter-spacing: -0.02em; }
.celebracion-tarjeta p { color: var(--ink-2); font-size: 14.5px; max-width: 32ch; }
.celebracion-tarjeta .btn { margin-top: 10px; min-width: 140px; }
.celebracion-cola { font-size: 12px; color: var(--ink-3); }
.confeti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confeti i {
  position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px;
  background: var(--accent); opacity: 0;
  animation: confeti-cae 900ms var(--ease-out) both;
}
.confeti i:nth-child(4n+1) { background: var(--accent-warm); }
.confeti i:nth-child(4n+2) { background: var(--ok); width: 6px; height: 10px; }
.confeti i:nth-child(4n+3) { background: var(--warn); border-radius: 50%; width: 7px; height: 7px; }

/* ---------- 6. Llama de racha (portada): respira si la racha está viva; sin práctica hoy queda apagada ---------- */
@keyframes llama-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1) translateY(-1px); } }
.tile-racha.viva .tile-valor { color: var(--accent-warm); }
.tile-racha.viva .tile-icono {
  display: inline-block; transform-origin: 50% 90%;
  filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--accent-warm) 55%, transparent));
  animation: llama-respira 2.4s ease-in-out infinite;
}
.tile-racha.viva:not(.hoy) .tile-icono { animation: none; filter: grayscale(.7) opacity(.75); }

/* ---------- Congelado para capturas (?quieto): cada animación se detiene en un cuadro representativo ---------- */
html.anim-quieto #app > .vista, html.anim-quieto #app > .ensayo { animation: none; }
html.anim-quieto .alternativa.recien { animation-play-state: paused; animation-delay: -273ms; }
html.anim-quieto .xp-flota { animation-play-state: paused; animation-delay: -250ms; }
html.anim-quieto .celebracion, html.anim-quieto .celebracion-tarjeta { animation: none; }
html.anim-quieto .confeti i { animation-play-state: paused; animation-delay: -120ms !important; } /* recién lanzado: visible sobre la tarjeta */
html.anim-quieto .tile-racha.viva .tile-icono { animation: none; }
html.anim-quieto .medidor-riel i { transition: none; }