/* Medayork: el arriero animado (dibujo en mp/art/arriero.js).
   Reposo: respira, parpadea, se le mece el poncho y saluda de vez en cuando.
   Reacciones: poner en .fig la clase celebra | rie | llora | asusta (unos 2 s; lo hace MDY_UX.react en mp/ux.js).
   Los saltos no pasan de ~120 unidades hacia arriba (.center corta lo que se sale).
   Las caras de reacción no se mueven, así que se ven también con prefers-reduced-motion. */
.arr *{transform-box:view-box}
.arr .arr-todo{transform-origin:342px 1258px}
.arr .arr-cuerpo{transform-origin:342px 840px}
.arr .arr-brazo{transform-origin:136px 676px}
.arr .arr-poncho{transform-origin:446px 494px}
.arr .arr-sombrero{transform-origin:342px 232px}
.arr .arr-ojos{transform-origin:342px 328px}
.arr .arr-ojo, .arr .arr-ja text{transform-box:fill-box; transform-origin:center}
.arr .arr-cejas{transform-origin:342px 296px}
.arr .arr-boca, .arr .arr-boca-abierta, .arr .arr-boca-triste, .arr .arr-boca-o, .arr .arr-ojos,
.arr .arr-ojos-risa, .arr .arr-cejas, .arr .arr-cejas-tristes, .arr .arr-lagrima, .arr .arr-susto, .arr .arr-ja{transition:opacity .15s}

/* ---- caras (sin movimiento) ---- */
.fig:is(.celebra,.rie,.llora,.asusta) .arr-boca{opacity:0}
.fig:is(.celebra,.rie) .arr-boca-abierta{opacity:1}
.fig.llora .arr-boca-triste{opacity:1}
.fig.asusta .arr-boca-o{opacity:1}
.fig:is(.rie,.celebra) .arr-ojos{opacity:0}
.fig:is(.rie,.celebra) .arr-ojos-risa{opacity:1}
.fig.llora .arr-cejas{opacity:0}
.fig.llora .arr-cejas-tristes{opacity:1}
.fig.llora .arr-lagrima{opacity:1}
.fig.asusta .arr-susto{opacity:1}
.fig.rie .arr-ja{opacity:1}

@media (prefers-reduced-motion: no-preference){
  /* ---- reposo ---- */
  .arr .arr-cuerpo{animation:arr-respira 3.6s ease-in-out infinite}
  .arr .arr-ojos{animation:arr-parpadea 4.7s linear infinite}
  .arr .arr-poncho{animation:arr-mece 3.3s ease-in-out infinite}
  .arr .arr-brazo{animation:arr-saluda 7s ease-in-out 1.5s infinite}

  /* ---- celebra: salta y levanta el sombrero ---- */
  .fig.celebra .arr-todo{animation:arr-salta .55s cubic-bezier(.3,.7,.4,1) 3}
  .fig.celebra .arr-sombrero{animation:arr-sombrerazo 1.65s ease-in-out}
  .fig.celebra .arr-brazo{animation:arr-saluda-rapido .42s ease-in-out 4}
  /* ---- rie: se sacude de la risa ---- */
  .fig.rie .arr-todo{animation:arr-sacude .24s ease-in-out 8}
  .fig.rie .arr-cuerpo{animation:arr-carcajada .24s ease-in-out 8}
  .fig.rie .arr-ja text{animation:arr-ja .6s ease-out 3}
  .fig.rie .arr-ja text + text{animation-delay:.3s}
  /* ---- llora: se encoge y le salen lágrimas ---- */
  .fig.llora .arr-todo{animation:arr-encoge .6s ease-out forwards}
  .fig.llora .arr-lagrima{animation:arr-lagrima .9s ease-in infinite}
  .fig.llora .arr-sombrero{animation:arr-cabizbajo .6s ease-out forwards}
  .fig.llora .arr-brazo{animation:arr-seca 1.8s ease-in-out forwards}
  /* ---- asusta: brinca del susto ---- */
  .fig.asusta .arr-todo{animation:arr-brinca .5s cubic-bezier(.2,.8,.4,1), arr-tiembla .07s linear .5s 12}
  .fig.asusta .arr-sombrero{animation:arr-vuela-sombrero .8s ease-out}
  .fig.asusta .arr-ojos{animation:none}
  .fig.asusta .arr-ojo{transform:scale(1.4)}
  .fig.asusta .arr-cejas{transform:translateY(-14px)}
  .fig.asusta .arr-susto{animation:arr-titila .25s linear infinite}
}

@keyframes arr-respira{50%{transform:scale(1.008,1.014)}}
@keyframes arr-parpadea{0%,93%,100%{transform:none} 96%{transform:scaleY(.08)}}
@keyframes arr-mece{0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(2.2deg)}}
@keyframes arr-saluda{0%,60%,96%,100%{transform:none} 66%{transform:rotate(-15deg)} 73%{transform:rotate(11deg)} 80%{transform:rotate(-15deg)} 87%{transform:rotate(11deg)}}
@keyframes arr-saluda-rapido{0%,100%{transform:rotate(-16deg)} 50%{transform:rotate(14deg)}}
@keyframes arr-salta{0%,100%{transform:none} 15%{transform:scale(1.04,.95)} 50%{transform:translateY(-55px) scale(.98,1.03)} 88%{transform:scale(1.03,.97)}}
@keyframes arr-sombrerazo{0%,100%{transform:none} 30%,70%{transform:translate(-26px,-66px) rotate(-18deg)}}
@keyframes arr-sacude{0%,100%{transform:rotate(0)} 25%{transform:rotate(-2.4deg)} 75%{transform:rotate(2.4deg)}}
@keyframes arr-carcajada{50%{transform:scale(1.02,.975)}}
@keyframes arr-ja{0%{transform:scale(.4) translateY(30px); opacity:0} 30%{transform:scale(1.15); opacity:1} 100%{transform:scale(1) translateY(-20px); opacity:.2}}
@keyframes arr-encoge{to{transform:scale(1.03,.9)}}
@keyframes arr-lagrima{0%{transform:translateY(0); opacity:1} 80%{opacity:1} 100%{transform:translateY(70px); opacity:0}}
@keyframes arr-cabizbajo{to{transform:translateY(14px) rotate(4deg)}}
@keyframes arr-seca{0%{transform:none} 25%,55%,100%{transform:rotate(30deg)} 40%,70%{transform:rotate(25deg)}}
@keyframes arr-brinca{0%,100%{transform:none} 35%{transform:translateY(-62px) rotate(-3deg)} 70%{transform:translateY(0) scale(1.04,.95)}}
@keyframes arr-tiembla{0%,100%{transform:translateX(0)} 50%{transform:translateX(-7px)}}
@keyframes arr-vuela-sombrero{0%,100%{transform:none} 30%{transform:translateY(-60px) rotate(12deg)} 60%{transform:translateY(-24px) rotate(-6deg)}}
@keyframes arr-titila{50%{opacity:.35}}