/* De a poco · Animaciones de los compañeros
   Se aplican por clases en el <svg>: .comp--{tipo} .etapa--{1-5} .expr--{expresion}
   Solo se animan transform y opacity (livianas para la batería). */

.comp { display: block; width: 100%; height: auto; overflow: visible; }
.comp .c-inclinar { transition: transform .5s ease; }
.comp .c-destellos, .comp .c-zz, .comp .c-notas, .comp .c-noche { display: none; }

/* ---------- Animales (Maga, Chicho, Barro) ---------- */
.comp .c-cuerpo { animation: c-respiro 3.2s ease-in-out infinite; }
.comp .c-ojo { transform-box: fill-box; transform-origin: center; animation: c-parpadeo 4.5s infinite; }

.comp.expr--contento .c-cuerpo { animation: c-saltito .45s ease-out 2, c-respiro 3.2s ease-in-out .9s infinite; }
.comp.expr--festejo .c-cuerpo { animation: c-salto .6s ease-out 3, c-respiro 3.2s ease-in-out 1.8s infinite; }
.comp.expr--festejo .c-destellos { display: inline; animation: c-titilar .7s ease-in-out infinite alternate; }
.comp.expr--tranquilo .c-inclinar { transform: rotate(-6deg); }
.comp.expr--tranquilo .c-cuerpo { animation-duration: 5.5s; }
.comp.expr--respirar .c-cuerpo { animation: c-inflar 10s ease-in-out infinite; } /* 4 s adentro, 6 s afuera */
.comp.expr--dormido .c-cuerpo { animation-duration: 5.5s; }
.comp.expr--dormido .c-zz { display: inline; animation: c-flotar 2s ease-in-out infinite; }
.comp.expr--sorpresa .c-cuerpo { animation: c-saltito .4s ease-out 1, c-respiro 3.2s ease-in-out .4s infinite; }

/* Maga: la bufanda aparece en la etapa 4 y flamea en la 5 */
.comp--maga .c-bufanda-cola { transform: rotate(-8deg); }
.comp--maga.etapa--5 .c-bufanda-cola { animation: c-viento 1.2s ease-in-out infinite; }
/* Chicho: pétalos de jacarandá */
.comp--chicho .c-petalo { animation: c-flotar 4s ease-in-out infinite; }
.comp--chicho .c-petalo:nth-child(2n) { animation-delay: -2s; }
/* Barro: canta en la etapa 5 */
.comp--barro .c-nota-fija { animation: c-flotar 1.6s ease-in-out infinite; }

/* ---------- Lenga + chingolo ---------- */
.comp--lenga .c-cuerpo { animation: none; }
.comp--lenga .c-copa { animation: c-mecer 4s ease-in-out infinite; }
.comp--lenga.expr--tranquilo .c-copa, .comp--lenga.expr--dormido .c-copa { animation: c-mecer-lento 7s ease-in-out infinite; }
.comp--lenga.expr--respirar .c-copa { animation: c-inflar 10s ease-in-out infinite; }
.comp--lenga.expr--sorpresa .c-copa { animation: c-tocar .8s ease-out 1; }
.comp--lenga.expr--dormido .c-noche { display: inline; }
.comp--lenga.expr--contento .c-notas, .comp--lenga.expr--festejo .c-notas { display: inline; }
.comp--lenga .c-notas text { animation: c-nota 1.6s ease-in-out infinite; }
.comp--lenga .c-notas text:nth-child(2) { animation-delay: -.8s; }

.comp--lenga .c-ch-cabeza { transform-box: fill-box; transform-origin: 30% 80%; animation: c-mirar 5s ease-in-out infinite; }
.comp--lenga .c-ch-cuerpo { transform-box: fill-box; transform-origin: 50% 100%; }
.comp--lenga .c-ch-ala { transform-box: fill-box; transform-origin: 50% 0; }
.comp--lenga .c-ch-vuelo { transform-origin: 0 0; }
.comp--lenga.expr--contento .c-ch-cuerpo { animation: c-canto .5s ease-in-out infinite alternate; }
.comp--lenga.expr--festejo .c-ch-vuelo { animation: c-volar 2.6s ease-in-out 1; }
.comp--lenga.expr--festejo .c-ch-ala { animation: c-aletear .12s linear infinite alternate; }
.comp--lenga.expr--tranquilo .c-ch-cuerpo { transform: scale(1.14, .88); }
.comp--lenga.expr--tranquilo .c-ch-cabeza, .comp--lenga.expr--dormido .c-ch-cabeza { animation: none; }
.comp--lenga.expr--respirar .c-ch-cuerpo { animation: c-inflar-ch 10s ease-in-out infinite; }
.comp--lenga.expr--dormido .c-ch-cabeza { transform: translate(-3px, 3px) rotate(-25deg); }
.comp--lenga.expr--dormido .c-ch-cuerpo { transform: scale(1.1, .92); }
.comp--lenga.expr--sorpresa .c-ch-vuelo { animation: c-saltito-ch .5s ease-out 1; }

/* ---------- Keyframes ---------- */
@keyframes c-respiro { 50% { transform: scale(1.03, .97); } }
@keyframes c-parpadeo { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(.1); } }
@keyframes c-saltito { 40% { transform: translateY(-8px); } }
@keyframes c-salto { 40% { transform: translateY(-24px) scale(.95, 1.05); } 70% { transform: translateY(0) scale(1.08, .92); } }
@keyframes c-inflar { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
@keyframes c-titilar { to { opacity: .3; } }
@keyframes c-flotar { 50% { transform: translateY(-6px); } }
@keyframes c-viento { 0%, 100% { transform: rotate(-55deg); } 50% { transform: rotate(-80deg); } }
@keyframes c-mecer { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes c-mecer-lento { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
@keyframes c-tocar { 30% { transform: rotate(-6deg); } 70% { transform: rotate(2deg); } }
@keyframes c-mirar { 0%, 78%, 100% { transform: rotate(0); } 84%, 92% { transform: rotate(-14deg); } }
@keyframes c-canto { to { transform: translateY(-1.5px); } }
@keyframes c-volar { 0% { transform: translate(0, 0); } 15% { transform: translate(-18px, -26px) scaleX(-1); } 45% { transform: translate(-58px, -42px) scaleX(-1); } 55% { transform: translate(-58px, -42px) scaleX(1); } 85% { transform: translate(-14px, -22px) scaleX(1); } 100% { transform: translate(0, 0); } }
@keyframes c-aletear { to { transform: scaleY(-.6); } }
@keyframes c-inflar-ch { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
@keyframes c-saltito-ch { 40% { transform: translateY(-9px); } }
@keyframes c-nota { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }

/* Respetar "reducir movimiento": sin animaciones, se mantienen las poses fijas */
@media (prefers-reduced-motion: reduce) {
  .comp *, .comp { animation: none !important; transition: none !important; }
}