/* El Tesoro de las Tablas — v0.3.1
   Movimiento. Casi todo es feedback: solo el decorado se mueve por decorar, y
   se mueve despacio a propósito para no competir con la pregunta.
   Al final del archivo se anula entero para quien pida menos movimiento.

   Desde la v0.3.1 nada va a `steps()`: aquello imitaba los fotogramas de una
   consola de 8 bits, y el juego ya no es de 8 bits. Todo va suavizado. */

@keyframes entrar {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes latir {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes temblar {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-0.4rem); }
  40%      { transform: translateX(0.4rem); }
  60%      { transform: translateX(-0.25rem); }
  80%      { transform: translateX(0.25rem); }
}

@keyframes volar {
  from { opacity: 1; transform: translate(-50%, 0) scale(0.9); }
  to   { opacity: 0; transform: translate(-50%, -7rem) scale(1.25); }
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes botar {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.12); }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes brincar {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-0.6rem); }
  100% { transform: translateY(0); }
}

/* El personaje flota: es lo que hace que parezca vivo estando quieto. */
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-0.35rem); }
}

@keyframes brotar-estrella {
  0%   { opacity: 0; transform: scale(0.2) rotate(-90deg); }
  70%  { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes destellar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* El SVG de la ola lleva el perfil dibujado dos veces, así que correrlo la
   mitad de su ancho lo devuelve al punto de partida sin que se note el corte. */
@keyframes oleaje {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes deriva {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1.25rem); }
}

/* Aplicación ------------------------------------------------------------- */

/* Cambio de pantalla. */
.pantalla:not(.oculta) {
  animation: entrar var(--medio) ease-out;
}

/* Cada pregunta nueva entra sola, sin arrastrar toda la pantalla. */
.operacion.nueva {
  animation: entrar var(--medio) ease-out;
}

.respuesta.correcta {
  animation: latir var(--lento) ease-out;
}

/* El fallo sacude la operación, no la pantalla entera: es un aviso, no un
   castigo. */
.operacion.fallada {
  animation: temblar 400ms ease;
}

.volador {
  animation: volar 900ms ease-out forwards;
}

/* Racha: la píldora pega un salto justo al alcanzar un hito. */
.hud-racha.hito {
  animation: destellar 500ms ease-in-out 2;
}

/* Cofre. */
.capa-cofre:not(.oculta) {
  animation: aparecer var(--medio) ease-out;
}

.capa-cofre:not(.oculta) .cofre {
  animation: botar 450ms ease-out;
}

.cofre.abierto {
  animation: brincar 300ms ease-out;
}

.cofre.abierto + .cofre-premio,
.capa-cofre .cofre.abierto ~ .cofre-premio {
  animation: latir var(--lento) ease-out;
}

/* El personaje flota siempre, ande o no: en el mapa esperando y al pie de la
   partida entre paso y paso. */
.personaje .dibujo {
  animation: flotar 2s ease-in-out infinite;
}

.senda .personaje.animo .dibujo {
  animation: animo 700ms ease-out;
}

/* Cuando le tocan, el compañero pega un brinco. Va sobre el dibujo y no sobre
   el nodo, que en el mapa lleva su propio `transform` para centrarse sobre la
   isla y se lo comería. */
.personaje.salto .dibujo {
  animation: salto 500ms ease-out;
}

/* Y celebra el cofre mientras la tapa está abierta. */
.capa-cofre .personaje.celebrando .dibujo {
  animation: salto 600ms ease-out infinite;
}

/* El bocadillo aparece por la clase `oculta`; esto solo lo acompaña. Los que
   van colocados en píxeles ya llevan su propio `transform`, así que se anima
   la caja interior de los demás y a estos solo la opacidad. */
.bocadillo.hablando {
  animation: hablar var(--rapido) ease-out;
}

.zona-mapa .bocadillo.hablando,
.senda .bocadillo.hablando {
  animation-name: aparecer;
}

/* El compañero se anima al fallar: se encoge un momento y se recompone. No
   retrocede ni pierde el paso —fallar nunca resta—, solo reacciona. */
@keyframes animo {
  0% { transform: scale(1); }
  35% { transform: scale(0.86) translateY(0.15rem); }
  70% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* El brinco del toque: sube, se estira un poco al caer y se queda como estaba. */
@keyframes salto {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-0.5rem) scale(1.06); }
  65% { transform: translateY(0) scale(0.96); }
  100% { transform: translateY(0) scale(1); }
}

/* El bocadillo brota desde el personaje que habla. */
@keyframes hablar {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Ayuda. */
.capa-ayuda:not(.oculta) {
  animation: aparecer var(--medio) ease-out;
}

.capa-ayuda:not(.oculta) .panel-ayuda {
  animation: entrar var(--medio) ease-out;
}

/* Estrellas del final, una detrás de otra. */
.estrellas-grandes .estrella.ganada {
  animation: brotar-estrella var(--lento) ease-out backwards;
}

.estrellas-grandes .estrella.ganada:nth-child(1) { animation-delay: 200ms; }
.estrellas-grandes .estrella.ganada:nth-child(2) { animation-delay: 600ms; }
.estrellas-grandes .estrella.ganada:nth-child(3) { animation-delay: 1000ms; }

/* Decorado: lento y lineal, para que se note que hay mar pero no distraiga. */
.ola-1 { animation: oleaje 8s linear infinite; }
.ola-2 { animation: oleaje 14s linear infinite; }

.nube-1 { animation: deriva 12s ease-in-out infinite; }
.nube-2 { animation: deriva 16s ease-in-out infinite 2s; }

/* Menos movimiento ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}