/* ═══════════════════════════════════════════════════════════════════════
   Lebendige Ruhe-Animation für Pixel-Avatare (Spieler, NPCs, Kampf)
   ───────────────────────────────────────────────────────────────────────
   Statt eines ganzen Wackel-Blocks bewegen sich die Teile einzeln:
     • Brustkorb atmet (scale, Fixpunkt Füße)  • Arme folgen den Schultern
     • Kopf (Haare, Gesicht, Augen, Mund, Bart, Kopf-Ausrüstung) schwebt im Atemtakt,
       schaut zwischendurch zur Seite
     • Mund lächelt / murmelt ab und zu, redet bei .is-chatting / .talking
     • Gewichtsverlagerung der ganzen Figur (sehr klein, dg-dance neu definiert)
     • Mini-Aktionen (Strecken, Arme verschränken, Winken …) setzt avatar-idle.js per Klasse .idle-act-*
   Alles läuft über die Einzel-Eigenschaften translate/rotate/scale und überlagert sich so
   mit den vorhandenen transform-Animationen (Blinzeln, Gesten, Lauf-Wippen).
   Phase: --clk (Sekunden mod 60 beim Rendern) + --ph (je Figur fest) → Animation läuft nach einem Render nahtlos weiter.
   Alle Zyklen teilen 60 s (1.5 / 3 / 4 / 6 / 12 s).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Gewichtsverlagerung (ersetzt das alte Quetsch-Wackeln der Ruheschleife) ── */
@keyframes dg-dance {
  0%, 100% { transform: translateX(0)    translateY(0) scaleX(var(--flip, 1)) rotate(0deg); }
  25%      { transform: translateX(-1px) translateY(0) scaleX(var(--flip, 1)) rotate(-1deg); }
  50%      { transform: translateX(0)    translateY(0) scaleX(var(--flip, 1)) rotate(0deg); }
  75%      { transform: translateX(1px)  translateY(0) scaleX(var(--flip, 1)) rotate(1deg); }
}
.dg-avatar-mini, .dg-decor-avatar, .dg-decor-npc-wrap, .dg-angehoerige-wrap { animation-duration: 6s !important; }

/* ── Atmen ── */
@keyframes pxaBody { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 1.04; } }
@keyframes pxaArm  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.3px; } }
/* Kopf: zwei Atemzüge, Blick nach links (gehalten), Rückkehr, zwei Atemzüge */
@keyframes pxaHead {
  0%    { translate: 0 0; }
  16.7% { translate: 0 -1.6px; }
  33.3% { translate: 0 0; }
  38%   { translate: -1.5px -0.4px; }
  50%   { translate: -1.5px -1.6px; }
  62%   { translate: -1.5px -0.3px; }
  67%   { translate: 0 0; }
  83.3% { translate: 0.5px -1.6px; }
  100%  { translate: 0 0; }
}
/* Mund: ab und zu kleines Lächeln, später ein leises „o“ */
@keyframes pxaMouth {
  0%, 36%, 52%, 70%, 82%, 100% { scale: 1 1; }
  42%, 48%                     { scale: 1.35 1; }
  74%, 78%                     { scale: 0.75 1.9; }
}
@keyframes pxaTalk { 0%, 100% { scale: 1 1; } 50% { scale: 0.85 2.2; } }

.pixel-avatar .px-body,
.pixel-avatar .px-gear.gv-slot-clothing {
  animation: pxaBody 4s ease-in-out infinite;
  animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0)));
  transform-origin: 50% 100%;
}
.pixel-avatar .px-arm-left, .pixel-avatar .px-arm-right, .pixel-avatar .px-collar, .pixel-avatar .px-badge {
  animation: pxaArm 4s ease-in-out infinite;
  animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0)) + 0.1s);
}
.pixel-avatar .px-hair, .pixel-avatar .px-face, .pixel-avatar .px-eye-left, .pixel-avatar .px-eye-right,
.pixel-avatar .px-mouth, .pixel-avatar .px-beard, .pixel-avatar .px-gear.gv-slot-head {
  animation-name: pxaHead;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0)) + 0.3s);
}
/* Augen behalten ihr Blinzeln/Blickwandern (mehrere Animationen) — der Kopfversatz kommt dazu */
.pixel-avatar .px-eye-left, .pixel-avatar .px-eye-right {
  /* Blinzeln und Blickwandern je Figur zeitversetzt (sonst bewegen sich alle Augen im Gleichtakt) */
  animation: pxBlink 6s ease-in-out infinite, pxEyeWander 10s ease-in-out infinite, pxaHead 12s ease-in-out infinite;
  animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0) * 1.7)), calc(-1s * (var(--clk, 0) + var(--ph, 0) * 2.3)), calc(-1s * (var(--clk, 0) + var(--ph, 0)) + 0.3s);
}
.pixel-avatar .px-eye-right { animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0) * 1.7) + 0.08s), calc(-1s * (var(--clk, 0) + var(--ph, 0) * 2.3)), calc(-1s * (var(--clk, 0) + var(--ph, 0)) + 0.3s); }
/* Mund: Kopfbewegung + Mimik */
.pixel-avatar .px-mouth {
  animation: pxaHead 12s ease-in-out infinite, pxaMouth 12s ease-in-out infinite;
  animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0)) + 0.3s), calc(-1s * (var(--clk, 0) + var(--ph, 0)) + 5s);
}
/* Reden: Mund klappt im Sprechtakt */
.base-npc.is-chatting .px-mouth, .talking .px-mouth, .cutscene-box.show .cutscene-npc .px-mouth {
  animation: pxaHead 12s ease-in-out infinite, pxaTalk 0.32s steps(2, end) infinite;
}

/* ── Kampf: angespannt — geduckt, flache schnelle Atmung, Arme in Deckung, federnder Stand ── */
@keyframes pxaCombatReady {
  0%, 100% { transform: scale(1.24) translateY(0)      scaleY(0.97); }
  35%      { transform: scale(1.24) translateY(-1.5px) scaleY(0.985); }
  60%      { transform: scale(1.24) translateY(0.5px)  scaleY(0.965); }
  80%      { transform: scale(1.24) translateY(-1px)   scaleY(0.98); }
}
@keyframes pxaGuardL { 0%, 100% { rotate: 14deg; translate: 0 -1px; } 50% { rotate: 20deg; translate: 0 -1.5px; } }
@keyframes pxaGuardR { 0%, 100% { rotate: -14deg; translate: 0 -1px; } 50% { rotate: -20deg; translate: 0 -1.5px; } }
@keyframes pxaTense  { 0%, 100% { scale: 1 1; } 50% { scale: 1.02 1.035; } }
@keyframes pxaHeadTense {
  0%, 100% { translate: 0 0; }
  20%      { translate: 0 -1px; }
  35%      { translate: 0.8px -0.5px; }
  50%      { translate: 0 0; }
  70%      { translate: -0.8px -1px; }
  85%      { translate: 0 0; }
}
.combatant .pixel-avatar { animation: pxaCombatReady 1.5s ease-in-out infinite; animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0))); }
.combatant .pixel-avatar .px-body, .combatant .pixel-avatar .px-gear.gv-slot-clothing { animation: pxaTense 1.5s ease-in-out infinite; }
.combatant .pixel-avatar .px-arm-left  { animation: pxaGuardL 1.5s ease-in-out infinite; }
.combatant .pixel-avatar .px-arm-right { animation: pxaGuardR 1.5s ease-in-out infinite; }
.combatant .pixel-avatar .px-hair, .combatant .pixel-avatar .px-face, .combatant .pixel-avatar .px-beard,
.combatant .pixel-avatar .px-mouth, .combatant .pixel-avatar .px-gear.gv-slot-head {
  animation: pxaHeadTense 3s ease-in-out infinite;
}
.combatant .pixel-avatar .px-eye-left, .combatant .pixel-avatar .px-eye-right {
  animation: pxBlink 6s ease-in-out infinite, pxEyeWander 4s ease-in-out infinite, pxaHeadTense 3s ease-in-out infinite;
  animation-delay: calc(-1s * (var(--clk, 0) + var(--ph, 0) * 1.7)), calc(-1s * (var(--clk, 0) + var(--ph, 0) * 2.3)), calc(-1s * var(--ph, 0));
}

/* ── Roboter: Servo-Ruck statt Atmen ── */
@keyframes pxaServoHead {
  0%, 58%, 100% { translate: 0 0; }
  60%, 66%      { translate: 1px 0; }
  68%, 74%      { translate: -1px 0; }
  76%           { translate: 0 0; }
}
@keyframes pxaServoBody { 0%, 40%, 100% { translate: 0 0; } 42%, 46% { translate: 0 -1px; } }
@keyframes pxaRoboEyes { 0%, 30%, 100% { opacity: 1; filter: brightness(1); } 32%, 35% { opacity: 0.25; } 37%, 62% { opacity: 1; filter: brightness(1.6); } 64%, 67% { opacity: 0.4; } }
.pixel-avatar.px-roboter .px-body, .pixel-avatar.px-roboter .px-gear.gv-slot-clothing { animation: pxaServoBody 4s steps(1, end) infinite; }
.pixel-avatar.px-roboter .px-hair, .pixel-avatar.px-roboter .px-face, .pixel-avatar.px-roboter .px-gear.gv-slot-head { animation: pxaServoHead 6s steps(1, end) infinite; }
.pixel-avatar.px-roboter .px-eye-left, .pixel-avatar.px-roboter .px-eye-right {
  animation: pxaServoHead 6s steps(1, end) infinite, pxaRoboEyes 7s steps(1, end) infinite;
}
.pixel-avatar.px-roboter .px-arm-left, .pixel-avatar.px-roboter .px-arm-right { animation: pxaServoBody 4s steps(1, end) infinite; }

/* ── Caveman (Fell): schwerer, geduckt, breiter Atem ── */
@keyframes pxaBodyHeavy { 0%, 100% { scale: 1 1; translate: 0 0.5px; } 50% { scale: 1.025 1.04; translate: 0 0.5px; } }
.pixel-avatar.px-fell .px-body, .pixel-avatar.px-fell .px-gear.gv-slot-clothing { animation: pxaBodyHeavy 3s ease-in-out infinite; }

/* ── Gymfreak: Brust raus, kräftiger Atem ── */
@keyframes pxaBodyPuff { 0%, 100% { scale: 1 1; } 50% { scale: 1.04 1.03; } }
.pixel-avatar.px-idle-gym .px-body, .pixel-avatar.px-idle-gym .px-gear.gv-slot-clothing { animation: pxaBodyPuff 3s ease-in-out infinite; }

/* ═══ Mini-Aktionen (Klasse .idle-act-… setzt avatar-idle.js für ein paar Sekunden) ═══ */
@keyframes pxaStretchL { 0%, 100% { rotate: 0deg; } 25%, 70% { rotate: 168deg; } 45% { rotate: 158deg; } }
@keyframes pxaStretchR { 0%, 100% { rotate: 0deg; } 25%, 70% { rotate: -168deg; } 45% { rotate: -158deg; } }
@keyframes pxaStretchBody { 0%, 100% { scale: 1 1; } 25%, 70% { scale: 1.03 1.07; } }
@keyframes pxaStretchHead { 0%, 100% { translate: 0 0; } 25%, 70% { translate: 0 -2px; } }
@keyframes pxaYawn { 0%, 100% { scale: 1 1; } 25%, 70% { scale: 1.1 3.2; } }
.idle-act-stretch .px-arm-left  { animation: pxaStretchL 2.4s ease-in-out; z-index: 6; }
.idle-act-stretch .px-arm-right { animation: pxaStretchR 2.4s ease-in-out; z-index: 6; }
.idle-act-stretch .px-body { animation: pxaStretchBody 2.4s ease-in-out; }
.idle-act-stretch .px-hair, .idle-act-stretch .px-face, .idle-act-stretch .px-beard,
.idle-act-stretch .px-eye-left, .idle-act-stretch .px-eye-right, .idle-act-stretch .px-gear.gv-slot-head { animation: pxaStretchHead 2.4s ease-in-out; }
.idle-act-stretch .px-mouth { animation: pxaStretchHead 2.4s ease-in-out, pxaYawn 2.4s ease-in-out; }

@keyframes pxaCrossL { 0%, 100% { rotate: 0deg; } 20%, 80% { rotate: -68deg; } }
@keyframes pxaCrossR { 0%, 100% { rotate: 0deg; } 20%, 80% { rotate: 68deg; } }
.idle-act-crossarms .px-arm-left  { animation: pxaCrossL 3.2s ease-in-out; z-index: 6; }
.idle-act-crossarms .px-arm-right { animation: pxaCrossR 3.2s ease-in-out; z-index: 7; }

@keyframes pxaWaveR { 0%, 100% { rotate: 0deg; } 15% { rotate: -150deg; } 28% { rotate: -128deg; } 41% { rotate: -156deg; } 54% { rotate: -128deg; } 67% { rotate: -156deg; } 85% { rotate: -60deg; } }
.idle-act-wave .px-arm-right { animation: pxaWaveR 2.4s ease-in-out; z-index: 6; }
.idle-act-wave .px-mouth { animation: pxaHead 12s ease-in-out infinite, pxaWaveSmile 2.4s ease-in-out; }
@keyframes pxaWaveSmile { 0%, 100% { scale: 1 1; } 15%, 80% { scale: 1.45 1; } }

@keyframes pxaShrugArm { 0%, 100% { translate: 0 0; } 25%, 65% { translate: 0 -2px; } }
@keyframes pxaShrugBody { 0%, 100% { scale: 1 1; } 25%, 65% { scale: 1 0.98; } }
@keyframes pxaShrugHead { 0%, 100% { translate: 0 0; } 25%, 65% { translate: 0 0.8px; } }
.idle-act-shrug .px-arm-left, .idle-act-shrug .px-arm-right { animation: pxaShrugArm 1.5s ease-in-out; }
.idle-act-shrug .px-body { animation: pxaShrugBody 1.5s ease-in-out; }
.idle-act-shrug .px-hair, .idle-act-shrug .px-face, .idle-act-shrug .px-beard, .idle-act-shrug .px-mouth,
.idle-act-shrug .px-eye-left, .idle-act-shrug .px-eye-right, .idle-act-shrug .px-gear.gv-slot-head { animation: pxaShrugHead 1.5s ease-in-out; }

/* Caveman: Brust trommeln */
@keyframes pxaThumpL { 0%, 100% { rotate: 0deg; } 10%, 30%, 50%, 70% { rotate: -52deg; } 20%, 40%, 60% { rotate: -30deg; } 85% { rotate: 0deg; } }
@keyframes pxaThumpR { 0%, 100% { rotate: 0deg; } 20%, 40%, 60% { rotate: 52deg; } 10%, 30%, 50%, 70% { rotate: 30deg; } 85% { rotate: 0deg; } }
@keyframes pxaThumpBody { 0%, 100% { scale: 1 1; } 10%, 30%, 50%, 70% { scale: 1.05 1.05; } 20%, 40%, 60% { scale: 1.02 1.02; } }
.idle-act-thump .px-arm-left  { animation: pxaThumpL 2.2s ease-in-out; z-index: 6; }
.idle-act-thump .px-arm-right { animation: pxaThumpR 2.2s ease-in-out; z-index: 6; }
.idle-act-thump .px-body { animation: pxaThumpBody 2.2s ease-in-out; }

/* Gymfreak: Bizeps zeigen */
@keyframes pxaFlexL { 0%, 100% { rotate: 0deg; } 20%, 75% { rotate: 108deg; } 35%, 55% { rotate: 100deg; } }
@keyframes pxaFlexR { 0%, 100% { rotate: 0deg; } 20%, 75% { rotate: -108deg; } 35%, 55% { rotate: -100deg; } }
@keyframes pxaFlexBody { 0%, 100% { scale: 1 1; } 20%, 75% { scale: 1.08 1.04; } 35%, 55% { scale: 1.1 1.05; } }
.idle-act-flex .px-arm-left  { animation: pxaFlexL 2.2s ease-in-out; z-index: 6; }
.idle-act-flex .px-arm-right { animation: pxaFlexR 2.2s ease-in-out; z-index: 6; }
.idle-act-flex .px-body { animation: pxaFlexBody 2.2s ease-in-out; }

/* Roboter: Scan (Kopf ruckt, Augen leuchten) und Störung */
@keyframes pxaScanHead { 0%, 100% { translate: 0 0; } 10%, 25% { translate: -2px 0; } 30%, 45% { translate: 0 0; } 50%, 70% { translate: 2px 0; } 80% { translate: 0 0; } }
@keyframes pxaScanEyes { 0%, 100% { filter: brightness(1); } 10%, 70% { filter: brightness(2.2) drop-shadow(0 0 3px #2dd4bf); } }
.idle-act-scan .px-hair, .idle-act-scan .px-face, .idle-act-scan .px-gear.gv-slot-head { animation: pxaScanHead 2.4s steps(6, end); }
.idle-act-scan .px-eye-left, .idle-act-scan .px-eye-right { animation: pxaScanHead 2.4s steps(6, end), pxaScanEyes 2.4s steps(1, end); }
@keyframes pxaGlitch { 0%, 100% { translate: 0 0; opacity: 1; } 10% { translate: 2px 0; } 20% { translate: -2px 1px; opacity: 0.6; } 30% { translate: 1px -1px; opacity: 1; } 45% { translate: -1px 0; opacity: 0.7; } 60% { translate: 0 0; opacity: 1; } }
.idle-act-glitch { animation: pxaGlitch 0.9s steps(1, end); }

@media (prefers-reduced-motion: reduce) {
  .pixel-avatar *, .pixel-avatar { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }
}
/* In Listen (Bestenliste, Spielstände) bleibt es ruhig */
.lb-avatar .pixel-avatar *, .saved-char-avatar .pixel-avatar *, .saved-char-highscore-avatar .pixel-avatar * { animation: none !important; }

/* Vorhandene Gesten (Basis-NPCs, .gesture-*) behalten Vorrang vor der Atem-Animation der Arme */
.gesture-cheer .pixel-avatar .px-arm-left,  .pixel-avatar.gesture-cheer .px-arm-left  { animation: pxGestureCheerL 1.3s ease-out; z-index: 6; }
.gesture-cheer .pixel-avatar .px-arm-right, .pixel-avatar.gesture-cheer .px-arm-right { animation: pxGestureCheerR 1.3s ease-out; z-index: 6; }
.gesture-chin .pixel-avatar .px-arm-right,  .pixel-avatar.gesture-chin .px-arm-right  { animation: pxGestureChin 2.6s ease-in-out; z-index: 6; }
.gesture-scratch .pixel-avatar .px-arm-left, .pixel-avatar.gesture-scratch .px-arm-left { animation: pxGestureScratch 2.6s ease-in-out; z-index: 6; }