/* Reto flash · lo que se mueve en los momentos del reto (R-201): las asomadas del bigotudo y de las tres bolitas, la barra de
   avance que crece con un saltito, lo que se toca que salta, la respuesta mal que se sacude y la insignia que aparece. Con
   «reducir movimiento», base.css apaga todas las animaciones y las asomadas ni se crean (js/asomadas.js). */

/* la capa de las asomadas: encima de la página y del confeti, debajo de la hoja de «Tu pedido» y de la intro. Deja pasar
   los toques: si una bolita queda encima de un botón, el toque llega al botón */
#asomadas{position:fixed;inset:0;z-index:8;pointer-events:none}
/* la cajita pegada al borde: esconde la parte de la figura que queda detrás del borde */
.asomada{position:fixed;overflow:hidden}
.asomada .quien{display:flex;gap:6px;width:100%;height:100%;animation:asoma var(--dura) ease-in-out both}
.asomada svg{display:block;width:100%;height:100%;overflow:visible}
.asomada .figura{display:block;width:100%;height:100%}
.asomada .bolita{flex:1;min-width:0;height:100%;transform-origin:50% 100%}
/* entra con un rebotito, se queda y sale por donde entró */
@keyframes asoma{0%{transform:translateX(var(--desde))}20%{transform:translateX(calc(var(--hasta) * .4))}27%,80%{transform:translateX(var(--hasta))}100%{transform:translateX(var(--desde))}}

/* el guiño: el ojo derecho del bigotudo se cierra y se abre, y el bigotudo se inclina un poquito */
.asomada-guino .figura{transform-origin:50% 100%;animation:inclina .6s ease-in-out .35s both}
.asomada .ojo-der{transform-box:fill-box;transform-origin:50% 50%}
.asomada-guino .ojo-der{animation:guino .24s ease-in-out .5s both}
@keyframes guino{50%{transform:scaleY(.1)}}
@keyframes inclina{50%{transform:rotate(-8deg)}}
/* el sombrero: quieto en el guiño; se lo levanta una sola vez, en el «chán» de la celebración */
.asomada .sombrero{animation:none}
.asomada-sombrero .sombrero{animation:levanta .9s ease-in-out .1s both}
@keyframes levanta{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-16px) rotate(-14deg)}75%{transform:translateY(0) rotate(0)}}
/* el saludo: cada bolita se inclina a un lado y al otro, dos veces, una detrás de otra */
.asomada-saludo .bolita{animation:saluda .6s ease-in-out .35s 2}
.asomada-saludo .bolita:nth-child(2){animation-delay:.47s}
.asomada-saludo .bolita:nth-child(3){animation-delay:.59s}
/* la despedida: saludan una vez y bajan una por una */
.asomada-despedida .bolita{animation:saluda .6s ease-in-out .35s 1,baja .3s ease-in 1s forwards}
.asomada-despedida .bolita:nth-child(2){animation-delay:.47s,1.1s}
.asomada-despedida .bolita:nth-child(3){animation-delay:.59s,1.2s}
@keyframes saluda{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes baja{to{transform:translateY(120%)}}

/* la barra de avance: cuando sube, crece desde donde estaba con un saltito, y «n de 10» late una vez */
.riel.sube>i{transform-origin:0 50%;animation:crece .4s ease-out both}
@keyframes crece{0%{transform:scaleX(var(--desde,0))}80%{transform:scaleX(1.04)}100%{transform:none}}
.riel.sube+.puesto{animation:late .4s ease-out .2s both}
@keyframes late{50%{transform:scale(1.18);color:var(--morado)}}
/* al llegar a 10 de 10, un brillo blanco cruza la barra una vez */
.riel.lleno>i{position:relative;overflow:hidden}
.riel.lleno>i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);transform:translateX(-100%);animation:brilla .6s ease-in-out .4s both}
@keyframes brilla{to{transform:translateX(100%)}}

/* lo que se toca (una opción, un uso, una estrella) da un saltito */
.salta{animation:salta .2s ease-out}
@keyframes salta{0%{transform:scale(.96)}55%{transform:scale(1.03)}100%{transform:none}}
.estrella.salta{animation:none}
.estrella.salta .i{animation:salta-estrella .2s ease-out}
@keyframes salta-estrella{50%{transform:scale(1.2)}}
/* la respuesta mal se mueve de lado a lado */
.opcion.mal{animation:sacude .24s ease-in-out}
@keyframes sacude{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* la insignia aparece con un zoom chiquito */
.lienzo.aparece{animation:aparece .3s ease-out}
@keyframes aparece{from{transform:scale(.96);opacity:.4}}