/* =====================================================================
   STOKEA · Sistema de mascotas · Estilos de personajes
   ---------------------------------------------------------------------
   Este archivo lo mantiene characters-dev. Las animaciones de caminata,
   pausa, tamaños y burbujas ya viven en `src/styles/buddy.css` y NO se
   duplican: aquí solo van las variaciones propias de cada personaje,
   respetando el mismo envoltorio `.buddy-avatar` y los atributos
   `data-character`, `data-motion-intensity`, `data-animations` y
   `data-buddy-paused`.

   Reglas de accesibilidad que deben conservarse:
   · `[data-animations="off"]` y `prefers-reduced-motion: reduce` paran las
     animaciones de los personajes.
   · `[data-buddy-paused="true"]` congela la animación sin reiniciarla.
   ===================================================================== */

/* Amplitud de las animaciones propias según la ficha de accesibilidad. */
.buddy-avatar[data-motion-intensity="low"] { --pet-motion-scale: .55; }
.buddy-avatar[data-motion-intensity="medium"] { --pet-motion-scale: .8; }
.buddy-avatar[data-motion-intensity="high"] { --pet-motion-scale: 1; }

/* El SVG compuesto puede asomar un poco (orejas, colas, sombreros). */
.buddy-avatar .pet-svg { overflow: visible; }

/* Pausa global de las animaciones propias de los personajes. */
.buddy-avatar[data-animations="off"] *,
.buddy-root[data-buddy-paused="true"] .buddy-avatar * {
  animation-play-state: paused !important;
}

html[data-animations="off"] .buddy-avatar * {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .buddy-avatar * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* characters-dev: animaciones y detalles propios de foxy, tito, byte,
   limo, pipo, michi y verdito (colas, orejas, antena, aletas…). */

/* =====================================================================
   2 · ANIMACIONES PROPIAS POR PERSONAJE
   ---------------------------------------------------------------------
   Movimientos cortos y suaves (colas, orejas, antena, aletas, papada) que
   se suman a los de `buddy.css`. Solo transforman piezas del propio SVG:
   no crean capas, no cambian el flujo y nunca tapan contenido.
   La amplitud se escala con `--pet-motion-scale`, que depende de
   `data-motion-intensity` (ver arriba).
   ===================================================================== */

/* -------------------------------- Foxy ------------------------------- */

/* La cola se balancea despacio y las orejas hacen una sacudida corta. */
.buddy-avatar[data-character="foxy"] .pet-foxy-tail {
  transform-box: fill-box;
  transform-origin: 12% 78%;
  animation: pet-foxy-tail-sway 4.8s ease-in-out infinite;
}
.buddy-avatar[data-character="foxy"] .pet-foxy-ear {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: pet-foxy-ear-twitch 6.2s ease-in-out infinite;
}
.buddy-avatar[data-character="foxy"] .pet-foxy-ear--right {
  animation-delay: -2.8s;
}

@keyframes pet-foxy-tail-sway {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(calc(var(--pet-motion-scale, 1) * -3.4deg)); }
  70% { transform: rotate(calc(var(--pet-motion-scale, 1) * 2.2deg)); }
}
@keyframes pet-foxy-ear-twitch {
  0%, 86%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(calc(var(--pet-motion-scale, 1) * -4deg)); }
  95% { transform: rotate(calc(var(--pet-motion-scale, 1) * 2deg)); }
}

/* -------------------------------- Tito ------------------------------- */

/* Orejas redondas que se mueven al dormitar y cola que da tirones. */
.buddy-avatar[data-character="tito"] .pet-tito-ear {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-tito-ear-wiggle 5.4s ease-in-out infinite;
}
.buddy-avatar[data-character="tito"] .pet-tito-ear--right {
  animation-delay: -1.7s;
}
.buddy-avatar[data-character="tito"] .pet-tito-tail {
  transform-box: fill-box;
  transform-origin: 92% 12%;
  animation: pet-tito-tail-twitch 4.2s ease-in-out infinite;
}

@keyframes pet-tito-ear-wiggle {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(calc(var(--pet-motion-scale, 1) * 3.2deg)); }
  60% { transform: rotate(calc(var(--pet-motion-scale, 1) * -2deg)); }
}
@keyframes pet-tito-tail-twitch {
  0%, 74%, 100% { transform: rotate(0deg); }
  80% { transform: rotate(calc(var(--pet-motion-scale, 1) * 5deg)); }
  90% { transform: rotate(calc(var(--pet-motion-scale, 1) * -3deg)); }
}

/* -------------------------------- Byte ------------------------------- */

/* Antena con vaivén, luz que late y pies que flotan muy poco. */
.buddy-avatar[data-character="byte"] .pet-byte-antenna {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-byte-antenna-sway 3.8s ease-in-out infinite;
}
.buddy-avatar[data-character="byte"] .pet-byte-antenna-light {
  transform-box: fill-box;
  transform-origin: center;
  animation: pet-byte-led-pulse 3.2s ease-in-out infinite;
}
.buddy-avatar[data-character="byte"] .pet-byte-foot {
  transform-box: fill-box;
  transform-origin: center;
  animation: pet-byte-foot-hover 4.6s ease-in-out infinite;
}
.buddy-avatar[data-character="byte"] .pet-byte-foot.buddy-foot--right {
  animation-delay: -1.4s;
}

@keyframes pet-byte-antenna-sway {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(calc(var(--pet-motion-scale, 1) * 4.4deg)); }
  70% { transform: rotate(calc(var(--pet-motion-scale, 1) * -3.2deg)); }
}
@keyframes pet-byte-led-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}
@keyframes pet-byte-foot-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--pet-motion-scale, 1) * -1.4px)); }
}

/* -------------------------------- Limo ------------------------------- */

/* La cola en espiral gira, la cresta ondula y la lengua asoma a ratos. */
.buddy-avatar[data-character="limo"] .pet-limo-tail {
  transform-box: fill-box;
  transform-origin: 96% 10%;
  animation: pet-limo-tail-turn 7s ease-in-out infinite;
}
.buddy-avatar[data-character="limo"] .pet-limo-crest {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-limo-crest-sway 4.4s ease-in-out infinite;
}
.buddy-avatar[data-character="limo"] .pet-limo-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: pet-limo-eye-look 6.4s ease-in-out infinite;
}
.buddy-avatar[data-character="limo"] .pet-limo-eye:nth-of-type(2) {
  animation-delay: -2.2s;
}
.buddy-avatar[data-character="limo"] .pet-limo-tongue {
  animation: pet-limo-tongue-flick 5.6s ease-in-out infinite;
}

@keyframes pet-limo-tail-turn {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(calc(var(--pet-motion-scale, 1) * 4deg)); }
}
@keyframes pet-limo-crest-sway {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(calc(var(--pet-motion-scale, 1) * -3deg)); }
}
@keyframes pet-limo-eye-look {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(calc(var(--pet-motion-scale, 1) * 1.6px), calc(var(--pet-motion-scale, 1) * -1.2px)); }
  65% { transform: translate(calc(var(--pet-motion-scale, 1) * -1.4px), calc(var(--pet-motion-scale, 1) * 0.8px)); }
}
@keyframes pet-limo-tongue-flick {
  0%, 78%, 100% { transform: translateY(0) scaleY(1); }
  84% { transform: translateY(calc(var(--pet-motion-scale, 1) * 1.6px)) scaleY(1.18); }
  90% { transform: translateY(0) scaleY(1); }
}

/* -------------------------------- Pipo ------------------------------- */

/* Aletas que se mecen y respiración pausada: calma de pingüino. */
.buddy-avatar[data-character="pipo"] .pet-pipo-flipper {
  transform-box: fill-box;
  animation: pet-pipo-flipper-sway 5.2s ease-in-out infinite;
}
.buddy-avatar[data-character="pipo"] .pet-pipo-flipper--left {
  transform-origin: 92% 8%;
}
.buddy-avatar[data-character="pipo"] .pet-pipo-flipper--right {
  transform-origin: 8% 8%;
  animation-delay: -2.6s;
}
.buddy-avatar[data-character="pipo"] .pet-pipo-body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-pipo-body-breathe 5.8s ease-in-out infinite;
}

@keyframes pet-pipo-flipper-sway {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(calc(var(--pet-motion-scale, 1) * -2.6deg)); }
}
@keyframes pet-pipo-body-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(calc(var(--pet-motion-scale, 1) * -0.8px)) scale(1.006); }
}

/* -------------------------------- Michi ------------------------------ */

/* Cola que se menea y orejas que escuchan: gato al acecho. */
.buddy-avatar[data-character="michi"] .pet-michi-tail {
  transform-box: fill-box;
  transform-origin: 4% 92%;
  animation: pet-michi-tail-swish 3.6s ease-in-out infinite;
}
.buddy-avatar[data-character="michi"] .pet-michi-ear {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-michi-ear-twitch 5s ease-in-out infinite;
}
.buddy-avatar[data-character="michi"] .pet-michi-ear--right {
  animation-delay: -2.1s;
}
.buddy-avatar[data-character="michi"] .pet-michi-whiskers {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: pet-michi-whisker-breeze 6.8s ease-in-out infinite;
}

@keyframes pet-michi-tail-swish {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(calc(var(--pet-motion-scale, 1) * -5deg)); }
  70% { transform: rotate(calc(var(--pet-motion-scale, 1) * 3deg)); }
}
@keyframes pet-michi-ear-twitch {
  0%, 88%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(calc(var(--pet-motion-scale, 1) * -5deg)); }
  96% { transform: rotate(calc(var(--pet-motion-scale, 1) * 2.4deg)); }
}
@keyframes pet-michi-whisker-breeze {
  0%, 100% { transform: scale(1); }
  50% { transform: scaleX(calc(1 + var(--pet-motion-scale, 1) * 0.02)); }
}

/* ------------------------------- Verdito ----------------------------- */

/* Papada que late, patas impacientes y lengüita juguetona. */
.buddy-avatar[data-character="verdito"] .pet-verdito-throat {
  transform-box: fill-box;
  transform-origin: center;
  animation: pet-verdito-throat-pulse 3.4s ease-in-out infinite;
}
.buddy-avatar[data-character="verdito"] .pet-verdito-haunch {
  transform-box: fill-box;
  transform-origin: 50% 70%;
  animation: pet-verdito-haunch-bob 2.8s ease-in-out infinite;
}
.buddy-avatar[data-character="verdito"] .pet-verdito-haunch.buddy-leg--right {
  animation-delay: -1.4s;
}
.buddy-avatar[data-character="verdito"] .pet-verdito-eyes-bumps {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: pet-verdito-eyes-bob 4.2s ease-in-out infinite;
}
.buddy-avatar[data-character="verdito"] .pet-verdito-tongue {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: pet-verdito-tongue-wiggle 4.8s ease-in-out infinite;
}

@keyframes pet-verdito-throat-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(calc(1 + var(--pet-motion-scale, 1) * 0.08)); opacity: 0.95; }
}
@keyframes pet-verdito-haunch-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--pet-motion-scale, 1) * -1.2px)); }
}
@keyframes pet-verdito-eyes-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--pet-motion-scale, 1) * -0.8px)); }
}
@keyframes pet-verdito-tongue-wiggle {
  0%, 100% { transform: rotate(0deg); }
  40% { transform: rotate(calc(var(--pet-motion-scale, 1) * 4deg)); }
  70% { transform: rotate(calc(var(--pet-motion-scale, 1) * -2.4deg)); }
}

/* =====================================================================
   3 · PAUSA Y MOVIMIENTO REDUCIDO
   Las animaciones propias se congelan con [data-buddy-paused="true"] y
   se anulan con [data-animations="off"] o si el sistema pide movimiento
   reducido. La regla va al final para ganar por orden de aparición.
   ===================================================================== */

[data-animations="off"] .buddy-avatar *,
.buddy-avatar[data-animations="off"] *,
html[data-animations="off"] .buddy-avatar * {
  animation: none !important;
  transition: none !important;
}

[data-buddy-paused="true"] .buddy-avatar *,
[data-buddy-paused="true"].buddy-avatar *,
.buddy-root[data-buddy-paused="true"] .buddy-avatar * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .buddy-avatar[data-character] *,
  .buddy-avatar[data-character] *::before,
  .buddy-avatar[data-character] *::after {
    animation: none !important;
    transition: none !important;
  }
}