/* survival-feel.css — Supervivencia DGT con «toque de juego» (29-sep-2026).
 * Los momentos (arranque, pregunta, acierto, fallo, nivel, fin) los marca
 * games/survival/feel.js con clases; aquí solo cómo se mueven. Vocabulario y
 * reglas en css/juego-feel.css: solo opacity y translate/scale/rotate sueltas,
 * que se suman a lo que el juego ya tenga (nunca pisan su `transform`).
 * No cambia dibujos ni tiempos: todo lo que se lee está quieto antes de que
 * el reloj de la pregunta arranque (RITMO.entrada, 600 ms).
 */

/* ═════════ ARRANQUE: el marcador se monta pieza a pieza ═════════ */
#game.sv-arranca .vp-arena-bg { animation: vpDrift 26s ease-in-out infinite alternate, svAcerca .8s cubic-bezier(.2,.8,.2,1) both; }
@keyframes svAcerca { from { scale: 1.2; } to { scale: 1; } }
#game.sv-arranca .rec { animation: jfDeDer .5s cubic-bezier(.2,.9,.3,1.2) .3s both; }
#game.sv-arranca .counter { animation: jfCae .5s cubic-bezier(.2,.9,.3,1) .05s both; }
#game.sv-arranca .tbar { transform-origin: left center; animation: svBarra .5s cubic-bezier(.2,.9,.3,1) .42s both; }
#game.sv-arranca .tnum { animation: jfPop .4s cubic-bezier(.3,1.5,.5,1) .42s both; }
@keyframes svBarra { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }

/* ═════════ CADA PREGUNTA: la foto cae, el enunciado golpea, las respuestas
   entran de los lados (se cortan en el borde del bloque: parece que llegan) ═════════ */
html[data-vp-game="survival"] #game .qimg.vp-enter { animation: svFoto .46s cubic-bezier(.2,.9,.25,1.1) both; }
@keyframes svFoto {
  0%   { opacity: 0; scale: 1.16; rotate: -1.5deg; }
  65%  { opacity: 1; scale: .985; rotate: .3deg; }
  100% { opacity: 1; scale: 1; rotate: 0deg; }
}
html[data-vp-game="survival"] #game .enun.vp-enter { animation: svEnun .4s cubic-bezier(.3,1.4,.5,1) .08s both !important; }
@keyframes svEnun { 0% { opacity: 0; scale: .72; } 65% { opacity: 1; scale: 1.04; } 100% { opacity: 1; scale: 1; } }
html[data-vp-game="survival"] #game .opt.vp-enter { animation: svOptIzq .36s cubic-bezier(.2,.9,.3,1.15) both; }
html[data-vp-game="survival"] #game .opt.vp-enter:nth-child(even) { animation-name: svOptDer; }
html[data-vp-game="survival"] #game .opt.vp-enter:nth-child(1) { animation-delay: .12s !important; }
html[data-vp-game="survival"] #game .opt.vp-enter:nth-child(2) { animation-delay: .17s !important; }
html[data-vp-game="survival"] #game .opt.vp-enter:nth-child(3) { animation-delay: .22s !important; }
html[data-vp-game="survival"] #game .opt.vp-enter:nth-child(4) { animation-delay: .27s !important; }
@keyframes svOptIzq { 0% { opacity: 0; translate: -60% 0; } 70% { opacity: 1; translate: 3% 0; } 100% { opacity: 1; translate: 0 0; } }
@keyframes svOptDer { 0% { opacity: 0; translate: 60% 0; }  70% { opacity: 1; translate: -3% 0; } 100% { opacity: 1; translate: 0 0; } }

/* ═════════ ACIERTO ═════════ */
/* la buena da un golpe verde (también cuando se revela tras un fallo) */
html[data-vp-game="survival"] #game .opt.correct,
html[data-vp-game="survival"] #game .opt.vp-enter.correct { animation: svSi .42s cubic-bezier(.3,1.5,.5,1) both !important; }
@keyframes svSi { 0% { scale: 1; } 30% { scale: .96; } 62% { scale: 1.045; } 100% { scale: 1; } }
/* «¡CORRECTO!» / «¡RACHA xN!» se estampa */
html[data-vp-game="survival"] #game .fb.show.ok { animation: svEstampa .42s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes svEstampa { 0% { opacity: 0; scale: 2.1; } 60% { opacity: 1; scale: .92; } 100% { opacity: 1; scale: 1; } }

/* ═════════ FALLO ═════════ */
html[data-vp-game="survival"] #game .opt.wrong,
html[data-vp-game="survival"] #game .opt.vp-enter.wrong { animation: jfNo .46s cubic-bezier(.3,.7,.3,1) both !important; }
/* la corrección de Santi entra con un pequeño golpe (escala desde menos de 1:
   no cambia lo que mide encajaFallo) */
html[data-vp-game="survival"] #game .fb.show.corr-on { transform-origin: 50% 0; animation: svCorr .38s cubic-bezier(.3,1.4,.5,1) .1s both; }
@keyframes svCorr { 0% { opacity: 0; scale: .9; } 70% { opacity: 1; scale: 1.01; } 100% { opacity: 1; scale: 1; } }

/* ═════════ SUBIDA DE NIVEL: el panel del pórtico se enciende de golpe ═════════ */
.wave.sv-on.show .sv-escena { animation: svAcerca .6s cubic-bezier(.2,.8,.2,1) both, jfTiembla .4s linear .62s both; }
.wave.sv-on.show .sv-rot.sv-rot-on { animation: jfCae .55s cubic-bezier(.2,.9,.3,1) .12s both; }
/* el panel: escala desde MENOS de 1 y sin desplazar nada de dentro — escena.js
   mide el texto para que quepa en el LED y un hijo agrandado lo engañaría */
.wave.sv-on.show .box { animation: svPanel .46s cubic-bezier(.3,1.5,.5,1) .3s both !important; }
@keyframes svPanel { 0% { opacity: 0; scale: .55; } 60% { opacity: 1; scale: 1.06; } 100% { opacity: 1; scale: 1; } }
.wave.sv-on.show .box .n { animation: svLed .34s linear .5s both; }
.wave.sv-on.show .box .lvl { animation: svLed .3s linear .66s both; }
.wave.sv-on.show .box .sub { animation: svLed .3s linear .76s both; }
/* el LED se enciende a parpadeos, como un panel de autovía */
@keyframes svLed { 0% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: .35; } 100% { opacity: 1; } }

/* los rótulos en 3D (NIVEL, RÉCORD) bajan por debajo de la fila de controles:
   arriba del todo quedaban tapados por el sonido y el «!» */
.wave.sv-on .sv-rot, .over.sv-on .sv-rot { top: calc(var(--ctl-fila, 56px) + 2px); }

/* ═════════ FIN DE PARTIDA Y RÉCORD ═════════ */
/* la escena se acerca y tiembla cuando cae el cartel */
.over.sv-on.show .sv-escena { animation: jfArte .7s cubic-bezier(.2,.8,.2,1) both, jfTiembla .42s linear .72s both; }
/* el rótulo RÉCORD cae desde arriba */
.over.sv-on.show .sv-rot.sv-rot-on { animation: jfCae .6s cubic-bezier(.2,.9,.3,1) .32s both; }
/* el cartel (la señal del arcén o la placa de latón) golpea con la cifra dentro */
.over.sv-on.show .sv-cartel { animation: svCartel .5s cubic-bezier(.3,1.4,.5,1) .18s both; }
@keyframes svCartel { 0% { opacity: 0; scale: 1.9; rotate: -5deg; } 60% { opacity: 1; scale: .93; rotate: 1deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }
.over.sv-on.show h2 { animation: jfSlam .5s cubic-bezier(.3,1.3,.5,1) .5s both; }
.over.sv-on.show .stat { animation: jfPop .42s cubic-bezier(.3,1.5,.5,1) both; }
.over.sv-on.show .stat:nth-child(1) { animation-delay: .62s; }
.over.sv-on.show .stat:nth-child(2) { animation-delay: .7s; }
.over.sv-on.show .stat:nth-child(3) { animation-delay: .78s; }
.over.sv-on.show .nm { animation: jfPop .5s cubic-bezier(.3,1.5,.5,1) .95s both, sp .9s 1.5s infinite; }
.over.sv-on.show .nr { animation: jfPop .5s cubic-bezier(.3,1.5,.5,1) .95s both; }
/* REINTENTAR sube en oro y se queda latiendo */
.over.sv-on.show .retry { animation: jfSube .5s cubic-bezier(.2,.9,.3,1.2) .9s both, jfLatido 1.6s ease-in-out 1.6s infinite; }
.over.sv-on.show .osec .obtn { animation: jfSube .42s cubic-bezier(.2,.9,.3,1.2) 1.05s both; }
.over.sv-on.show .osec .obtn + .obtn { animation-delay: 1.12s; }

/* el «¡CORRECTO!» también se va con la pregunta cuando pasa a la siguiente */
html[data-vp-game="survival"] #game .qwrap > .fb.ok.vp-leave { animation: vpLeave .23s cubic-bezier(.4,0,1,1) both !important; }

@media (prefers-reduced-motion: reduce) {
  #game.sv-arranca *, #game .qimg, #game .enun, #game .opt, #game .fb, .wave.sv-on .sv-escena, .wave.sv-on .sv-rot, .wave.sv-on .box, .wave.sv-on .box *,
  .over.sv-on .sv-escena, .over.sv-on .sv-rot, .over.sv-on .sv-cartel, .over.sv-on h2, .over.sv-on .stat,
  .over.sv-on .nm, .over.sv-on .nr, .over.sv-on .retry, .over.sv-on .obtn { animation: none !important; }
}