/* ============================================================
   LUPIN — animaciones (mueven las partes nombradas del rig)
   Se activan poniendo una clase anim-<accion> en el <svg.lupin>.
   La velocidad se controla con --spd (1 = normal).
   ============================================================ */

.lupin{ overflow:visible; --spd:1; }
.lupin g{ transform-box:fill-box; transform-origin:50% 50%; }

/* pivotes específicos */
.lupin .lp-tail{ transform-origin:30% 80%; }
.lupin .lp-armL{ transform-origin:60% 12%; }
.lupin .lp-armR{ transform-origin:40% 12%; }
.lupin .lp-head{ transform-origin:50% 92%; }
.lupin .lp-legs{ transform-origin:50% 20%; }

/* ---------- QUIETO / IDLE ---------- */
.anim-idle           { animation:lp-breathe calc(2.6s*var(--spd)) ease-in-out infinite; }
.anim-idle .lp-tail  { animation:lp-tailsway calc(3.4s*var(--spd)) ease-in-out infinite; }
.anim-idle .lp-head  { animation:lp-headbob  calc(2.6s*var(--spd)) ease-in-out infinite; }
@keyframes lp-breathe{ 0%,100%{transform:scaleY(1) scaleX(1)} 50%{transform:scaleY(1.03) scaleX(.99)} }
@keyframes lp-tailsway{ 0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(9deg)} }
@keyframes lp-headbob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }

/* ---------- CAMINAR ---------- */
.anim-walk           { animation:lp-walkbob calc(.5s*var(--spd)) ease-in-out infinite; }
.anim-walk .lp-armL  { animation:lp-swingA  calc(1s*var(--spd)) ease-in-out infinite; }
.anim-walk .lp-armR  { animation:lp-swingB  calc(1s*var(--spd)) ease-in-out infinite; }
.anim-walk .lp-legs  { animation:lp-legwag  calc(.5s*var(--spd)) ease-in-out infinite; }
.anim-walk .lp-tail  { animation:lp-tailsway calc(.9s*var(--spd)) ease-in-out infinite; }
.anim-walk .lp-head  { animation:lp-headbob  calc(.5s*var(--spd)) ease-in-out infinite; }
@keyframes lp-walkbob{ 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-7px) rotate(1.5deg)} }
@keyframes lp-swingA{ 0%,100%{transform:rotate(16deg)} 50%{transform:rotate(-16deg)} }
@keyframes lp-swingB{ 0%,100%{transform:rotate(-16deg)} 50%{transform:rotate(16deg)} }
@keyframes lp-legwag{ 0%,100%{transform:scaleX(1.04) translateX(2px)} 50%{transform:scaleX(.96) translateX(-2px)} }

/* ---------- SALTAR ---------- */
.anim-jump           { animation:lp-jump calc(1.1s*var(--spd)) cubic-bezier(.3,.7,.4,1) infinite; }
.anim-jump .lp-legs  { animation:lp-tuck calc(1.1s*var(--spd)) ease-in-out infinite; }
.anim-jump .lp-armL  { animation:lp-armup calc(1.1s*var(--spd)) ease-in-out infinite; }
.anim-jump .lp-armR  { animation:lp-armup calc(1.1s*var(--spd)) ease-in-out infinite; }
@keyframes lp-jump{
  0%{transform:translateY(0) scaleY(1)}
  14%{transform:translateY(6px) scaleY(.86) scaleX(1.08)}
  40%{transform:translateY(-70px) scaleY(1.08) scaleX(.95)}
  62%{transform:translateY(-70px) scaleY(1.04)}
  84%{transform:translateY(6px) scaleY(.88) scaleX(1.06)}
  100%{transform:translateY(0) scaleY(1)}
}
@keyframes lp-tuck{ 0%,84%,100%{transform:translateY(0)} 45%{transform:translateY(-14px) scaleY(.8)} }
@keyframes lp-armup{ 0%,100%{transform:rotate(0)} 45%{transform:rotate(-32deg)} }

/* ---------- ATACAR (patada/golpe lateral) ---------- */
.anim-attack          { animation:lp-attackbody calc(1.1s*var(--spd)) cubic-bezier(.5,0,.2,1) infinite; }
.anim-attack .lp-armR { animation:lp-punch calc(1.1s*var(--spd)) cubic-bezier(.5,0,.2,1) infinite; }
.anim-attack .lp-legs { animation:lp-kick  calc(1.1s*var(--spd)) cubic-bezier(.5,0,.2,1) infinite; }
.anim-attack .lp-tail { animation:lp-tailsnap calc(1.1s*var(--spd)) ease-in-out infinite; }
@keyframes lp-attackbody{
  0%{transform:translateX(0) rotate(0)}
  22%{transform:translateX(-10px) rotate(-7deg)}     /* wind up */
  38%{transform:translateX(16px) rotate(9deg)}        /* lunge */
  60%{transform:translateX(6px) rotate(4deg)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes lp-punch{
  0%,100%{transform:rotate(0)}
  22%{transform:rotate(40deg)}
  40%{transform:rotate(-70deg) translateX(10px)}
  62%{transform:rotate(-40deg)}
}
@keyframes lp-kick{
  0%,100%{transform:translateX(0) rotate(0)}
  38%{transform:translateX(22px) rotate(12deg)}
  60%{transform:translateX(8px)}
}
@keyframes lp-tailsnap{ 0%,100%{transform:rotate(0)} 38%{transform:rotate(-22deg)} }

/* ---------- DORMIR ---------- */
.anim-sleep          { animation:lp-sleepbreathe calc(3.8s*var(--spd)) ease-in-out infinite; transform-origin:50% 100%; }
.anim-sleep .lp-head { animation:lp-nod calc(3.8s*var(--spd)) ease-in-out infinite; }
@keyframes lp-sleepbreathe{ 0%,100%{transform:rotate(4deg) scaleY(1)} 50%{transform:rotate(4deg) scaleY(1.04)} }
@keyframes lp-nod{ 0%,100%{transform:rotate(-4deg) translateY(2px)} 50%{transform:rotate(-7deg) translateY(5px)} }

/* ---------- COMER ---------- */
.anim-eat           { animation:lp-eatbody calc(.9s*var(--spd)) ease-in-out infinite; }
.anim-eat .lp-head  { animation:lp-munch calc(.45s*var(--spd)) ease-in-out infinite; }
.anim-eat .lp-armL  { animation:lp-armfeedL calc(.9s*var(--spd)) ease-in-out infinite; }
.anim-eat .lp-armR  { animation:lp-armfeedR calc(.9s*var(--spd)) ease-in-out infinite; }
@keyframes lp-eatbody{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)} }
@keyframes lp-munch{ 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(4px) scaleY(.94)} }
@keyframes lp-armfeedL{ 0%,100%{transform:rotate(-46deg) translateY(-6px)} 50%{transform:rotate(-54deg) translateY(-2px)} }
@keyframes lp-armfeedR{ 0%,100%{transform:rotate(46deg) translateY(-6px)} 50%{transform:rotate(54deg) translateY(-2px)} }

/* ---------- LLORAR ---------- */
.anim-cry           { animation:lp-crybody calc(.6s*var(--spd)) ease-in-out infinite; }
.anim-cry .lp-head  { animation:lp-crynod calc(.9s*var(--spd)) ease-in-out infinite; }
@keyframes lp-crybody{ 0%,100%{transform:translateX(-2px) rotate(-1.5deg)} 50%{transform:translateX(2px) rotate(1.5deg)} }
@keyframes lp-crynod{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px) scale(1.02)} }

/* ---------- DAÑO / ASUSTADO ---------- */
.anim-hurt          { animation:lp-hurt calc(.55s*var(--spd)) ease-out infinite; }
@keyframes lp-hurt{
  0%{transform:translateX(0) rotate(0)}
  12%{transform:translateX(-12px) rotate(-9deg)}
  26%{transform:translateX(9px) rotate(7deg)}
  40%{transform:translateX(-5px) rotate(-3deg)}
  54%{transform:translateX(0) rotate(0)}
  100%{transform:translateX(0) rotate(0)}
}

@media (prefers-reduced-motion: reduce){
  .lupin, .lupin *{ animation:none !important; }
}