/* Animationen der Spielfiguren. Klassen setzt avatar.js (emo-* und mv-*). */
.avatar { display: block; overflow: visible; width: 100%; height: auto; transform-origin: 50% 100%; }
.avatar #mouth-alt { display: none; }
.avatar.has-alt #mouth { display: none; }
.avatar.has-alt #mouth-alt { display: inline; }

/* --- Augen und Brauen --- */
.avatar #eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
.avatar #brow-l, .avatar #brow-r, .avatar #brows { transform-box: fill-box; transform-origin: center; transition: transform .25s; }
@keyframes blink {
  0%, 92%, 100% { transform: translateY(var(--ty, 0px)) scale(var(--ex, 1), var(--ey, 1)); }
  95% { transform: translateY(var(--ty, 0px)) scale(var(--ex, 1), .1); }
}

.emo-cheer #brows { transform: translateY(-7px); }
.emo-shock #brows { transform: translateY(-10px); }
.emo-shock #eyes { --ex: 1.18; --ey: 1.18; }
.emo-sad #brow-l { transform: rotate(-16deg) translateY(2px); }
.emo-sad #brow-r { transform: rotate(16deg) translateY(2px); }
.emo-sad #eyes { --ty: 3px; }
.emo-angry #brow-l { transform: rotate(18deg) translateY(4px); }
.emo-angry #brow-r { transform: rotate(-18deg) translateY(4px); }
.emo-angry #eyes { --ey: .85; }
.emo-thinking #brow-r { transform: translateY(-8px) rotate(-8deg); }

/* --- Effekte --- */
.fx { transform-box: fill-box; transform-origin: center; }
.fx-spark { animation: twinkle 1s ease-in-out infinite; }
.fx-spark.d2 { animation-delay: .25s; } .fx-spark.d3 { animation-delay: .5s; } .fx-spark.d4 { animation-delay: .75s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .3; } 50% { transform: scale(1.1) rotate(40deg); opacity: 1; } }
.fx-tear { animation: tear 1.4s ease-in infinite; }
.fx-tear.d2 { animation-delay: .5s; }
@keyframes tear { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(36px); opacity: 0; } }
.fx-cloud { animation: cloud 2.4s ease-in-out infinite; }
@keyframes cloud { 50% { transform: translateX(6px); } }
.fx-rain { stroke-dasharray: 6 6; animation: rain .5s linear infinite; }
@keyframes rain { to { stroke-dashoffset: -12; } }
.fx-pop { animation: pop .5s ease-out both; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } }
.fx-crown { animation: crown 1.2s ease-in-out infinite; }
@keyframes crown { 50% { transform: translateY(-5px) rotate(4deg); } }

/* --- Bewegungen: Körperteile schwingen um Schulter, Hüfte, Hals --- */
.avatar #arm-l { transform-origin: 80px 205px; }
.avatar #arm-r { transform-origin: 220px 205px; }
.avatar #leg-l { transform-origin: 125px 305px; }
.avatar #leg-r { transform-origin: 175px 305px; }
/* Die langen Haare hinten (Flora, Mona) bewegen sich wie der Kopf */
.avatar #head, .avatar #hair-back { transform-origin: 150px 200px; }

/* Ruhig */
.mv-idle { animation: bob 3s ease-in-out infinite; }
.mv-idle #arm-l { animation: sway-l 3s ease-in-out infinite; }
.mv-idle #arm-r { animation: sway-r 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes sway-l { 50% { transform: rotate(5deg); } }
@keyframes sway-r { 50% { transform: rotate(-5deg); } }

/* Laufen (frontal, wie in South Park) */
.mv-walk { animation: walk-bob .7s ease-in-out infinite; }
.mv-walk #leg-l { animation: step-a .7s ease-in-out infinite; }
.mv-walk #leg-r { animation: step-b .7s ease-in-out infinite; }
.mv-walk #arm-l { animation: arm-a .7s ease-in-out infinite; }
.mv-walk #arm-r { animation: arm-b .7s ease-in-out infinite; }
.mv-walk #head, .mv-walk #hair-back { animation: head-roll .7s ease-in-out infinite; }
/* Zwei Schritte pro Zyklus: Körper hüpft, kippt zur Seite, Füsse heben ab */
@keyframes walk-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  25% { transform: translateY(-9px) rotate(0); }
  50% { transform: translateY(0) rotate(3deg); }
  75% { transform: translateY(-9px) rotate(0); }
}
@keyframes step-a { 0%, 100% { transform: rotate(28deg); } 25% { transform: rotate(0) translateY(-8px); } 50% { transform: rotate(-28deg); } 75% { transform: rotate(0); } }
@keyframes step-b { 0%, 100% { transform: rotate(-28deg); } 25% { transform: rotate(0); } 50% { transform: rotate(28deg); } 75% { transform: rotate(0) translateY(-8px); } }
@keyframes leg-a { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }
@keyframes leg-b { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes arm-a { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(36deg); } }
@keyframes arm-b { 0%, 100% { transform: rotate(36deg); } 50% { transform: rotate(-36deg); } }
@keyframes head-roll { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* Springen */
.mv-jump { animation: jump .9s ease-in-out infinite; }
.mv-jump #arm-l { transform: rotate(150deg); }
.mv-jump #arm-r { transform: rotate(-150deg); }
.mv-jump #leg-l { animation: leg-a .9s ease-in-out infinite; }
.mv-jump #leg-r { animation: leg-b .9s ease-in-out infinite; }
@keyframes jump { 0%, 100% { transform: translateY(0) scale(1.04, .94); } 40% { transform: translateY(-46px) scale(.97, 1.04); } 60% { transform: translateY(-46px) scale(.97, 1.04); } }

/* Tanzen / Jubeln */
.mv-dance { animation: dance .6s ease-in-out infinite alternate; }
.mv-dance #arm-l { animation: dance-l .6s ease-in-out infinite alternate; }
.mv-dance #arm-r { animation: dance-r .6s ease-in-out infinite alternate; }
.mv-dance #leg-l { animation: leg-a .6s ease-in-out infinite; }
.mv-dance #leg-r { animation: leg-b .6s ease-in-out infinite; }
@keyframes dance { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-8px); } }
@keyframes dance-l { from { transform: rotate(160deg); } to { transform: rotate(60deg); } }
@keyframes dance-r { from { transform: rotate(-60deg); } to { transform: rotate(-160deg); } }

/* Winken */
.mv-wave #arm-r { animation: wave .5s ease-in-out infinite alternate; }
.mv-wave { animation: bob 3s ease-in-out infinite; }
@keyframes wave { from { transform: rotate(-150deg); } to { transform: rotate(-120deg); } }

/* Emotionale Haltung (zusätzlich zur Bewegung) */
.emo-sad #head, .emo-sad #hair-back { transform: rotate(8deg) translateY(4px); }
.emo-sad.mv-idle #head, .emo-sad.mv-idle #hair-back { animation: sad-head 2.4s ease-in-out infinite; }
.emo-sad.mv-idle #arm-l { transform: rotate(-4deg); animation: none; }
.emo-sad.mv-idle #arm-r { transform: rotate(4deg); animation: none; }
@keyframes sad-head { 0%, 100% { transform: rotate(8deg) translateY(4px); } 50% { transform: rotate(-4deg) translateY(4px); } }
.emo-shock.mv-idle, .emo-angry.mv-idle { animation: tremble .15s linear infinite; }
.emo-angry.mv-idle { animation-duration: .1s; }
.emo-shock.mv-idle #arm-l { transform: rotate(40deg); animation: none; }
.emo-shock.mv-idle #arm-r { transform: rotate(-40deg); animation: none; }
@keyframes tremble { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
.emo-thinking.mv-idle #head, .emo-thinking.mv-idle #hair-back { transform: rotate(-6deg); }

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