/* ==========================================================================
   animales.css — animaciones de los 12 personajes (window.ANIMALES)
   Solo reglas bajo .animal / .an-* y keyframes an-*.
   El sitio puede desfasar cada personaje fijando la variable --d
   (p. ej. style="--d:-1.3s") en el <svg> o en cualquier ancestro.
   ========================================================================== */

.animal {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.animal .an-cuerpo,
.animal .an-parpado,
.animal .an-oreja-i,
.animal .an-oreja-d,
.animal .an-cola,
.animal .an-brazo,
.animal .an-extra {
  transform-box: fill-box;
}

/* --- Cuerpo: respiración / rebote suave ---------------------------------- */
.animal .an-cuerpo {
  transform-origin: 50% 100%;
  animation: an-respira 2.8s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}

/* --- Párpados: cerrados = scaleY(1); en reposo scaleY(0) ------------------ */
.animal .an-parpado {
  transform-origin: 50% 0%;
  transform: scaleY(0);
  animation: an-parpadeo 4.2s linear infinite;
  animation-delay: calc(var(--d, 0s) * 1.7);
}

/* --- Orejas (o alas / mechón en aves) ------------------------------------ */
.animal .an-oreja-i {
  transform-origin: 85% 100%;
  animation: an-oreja-i 5.2s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * 1.3);
}
.animal .an-oreja-d {
  transform-origin: 15% 100%;
  animation: an-oreja-d 5.2s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * 1.3 - 0.35s);
}

/* --- Cola ----------------------------------------------------------------- */
.animal .an-cola {
  transform-origin: 0% 100%;
  animation: an-cola 1.9s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * 0.8);
}

/* --- Brazo que saluda de vez en cuando ------------------------------------ */
.animal .an-brazo {
  transform-origin: 25% 10%;
  animation: an-saludo 7s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * 2.1 - 1s);
}

/* --- Detalle propio (pompón, bufanda, capa, mechón…) ---------------------- */
.animal .an-extra {
  transform-origin: 50% 0%;
  animation: an-extra 3.4s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) * 1.1);
}

/* --- Ayudas de origen (para que cada pieza gire desde su base) ------------ */
.animal .an-o-t  { transform-origin: 50% 0%; }
.animal .an-o-b  { transform-origin: 50% 100%; }
.animal .an-o-l  { transform-origin: 0% 50%; }
.animal .an-o-r  { transform-origin: 100% 50%; }
.animal .an-o-tl { transform-origin: 0% 0%; }
.animal .an-o-tr { transform-origin: 100% 0%; }
.animal .an-o-bl { transform-origin: 0% 100%; }
.animal .an-o-br { transform-origin: 100% 100%; }

/* --- Estado «elegido»: salto de celebración + saludo rápido --------------- */
.is-elegido .animal .an-cuerpo,
.animal.is-elegido .an-cuerpo {
  animation: an-salto 600ms cubic-bezier(.3, .7, .4, 1) 1,
             an-respira 2.8s ease-in-out 600ms infinite;
}
.is-elegido .animal .an-brazo,
.animal.is-elegido .an-brazo {
  animation: an-saludo-rapido 600ms ease-in-out 3;
}
.is-elegido .animal .an-cola,
.animal.is-elegido .an-cola {
  animation-duration: 0.6s;
}

/* --- Keyframes ------------------------------------------------------------ */
@keyframes an-respira {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-3px) scaleY(1.015); }
}

@keyframes an-parpadeo {
  0%, 91%   { transform: scaleY(0); }
  94%, 96%  { transform: scaleY(1); }
  99%, 100% { transform: scaleY(0); }
}

@keyframes an-oreja-i {
  0%, 78%, 100% { transform: rotate(0deg); }
  82%           { transform: rotate(-9deg); }
  86%           { transform: rotate(3deg); }
  90%           { transform: rotate(-6deg); }
  95%           { transform: rotate(0deg); }
}
@keyframes an-oreja-d {
  0%, 78%, 100% { transform: rotate(0deg); }
  82%           { transform: rotate(9deg); }
  86%           { transform: rotate(-3deg); }
  90%           { transform: rotate(6deg); }
  95%           { transform: rotate(0deg); }
}

@keyframes an-cola {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

@keyframes an-saludo {
  0%, 68%, 100% { transform: rotate(0deg); }
  74%           { transform: rotate(-118deg); }
  78%           { transform: rotate(-96deg); }
  82%           { transform: rotate(-122deg); }
  86%           { transform: rotate(-96deg); }
  90%           { transform: rotate(-118deg); }
  96%           { transform: rotate(0deg); }
}

@keyframes an-saludo-rapido {
  0%, 100% { transform: rotate(-96deg); }
  50%      { transform: rotate(-126deg); }
}

@keyframes an-extra {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}

@keyframes an-salto {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(2px) scale(1.06, 0.9); }
  45%  { transform: translateY(-22px) scale(0.96, 1.06); }
  70%  { transform: translateY(0) scale(1.05, 0.93); }
  85%  { transform: translateY(-4px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* --- Accesibilidad: sin movimiento ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .animal .an-cuerpo,
  .animal .an-parpado,
  .animal .an-oreja-i,
  .animal .an-oreja-d,
  .animal .an-cola,
  .animal .an-brazo,
  .animal .an-extra,
  .is-elegido .animal .an-cuerpo,
  .is-elegido .animal .an-brazo,
  .animal.is-elegido .an-cuerpo,
  .animal.is-elegido .an-brazo {
    animation: none !important;
  }
  .animal .an-parpado {
    transform: scaleY(0);
    visibility: hidden;
  }
}