/* =====================================================================
   Zappelix – Maskottchen-Animationen
   Benötigt: tokens.css (Dauer-/Kurven-Variablen)
   Funktioniert nur, wenn das SVG INLINE im HTML steht (nicht per <img>).
   Drehpunkte sind im SVG inline gesetzt (transform-box: view-box +
   transform-origin in SVG-Einheiten) – hier also nur die Bewegung.

   Klassen am <svg class="zappelix …">:
     (Standard)          blinzeln, funkeln, sanft wackeln, Ohren wackeln
     .zappelix--winkt    winkt dauerhaft (Pose-Datei mascot-winkt.svg)
     .is-waving          rechter Arm winkt (z. B. per JS kurz setzen)
     .zappelix--freut-sich  hüpft und Sterne funkeln
     .zappelix--denkt    Denkblase schwebt
     .zappelix--still    alle Animationen aus
   Hover auf dem Maskottchen (oder .zappelix-trigger:hover) → winken.
   ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes zx-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes zx-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-2.5deg); }
  75%      { transform: rotate(2.5deg); }
}
@keyframes zx-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.16) rotate(8deg); opacity: .8; }
}
@keyframes zx-spark-pop {
  0%, 100% { opacity: .25; transform: scale(.6); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
@keyframes zx-wave {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-16deg); }
  40%      { transform: rotate(10deg); }
  60%      { transform: rotate(-12deg); }
  80%      { transform: rotate(6deg); }
}
@keyframes zx-ear-left {
  0%, 80%, 100% { transform: rotate(0deg); }
  86%           { transform: rotate(-9deg); }
  93%           { transform: rotate(4deg); }
}
@keyframes zx-ear-right {
  0%, 80%, 100% { transform: rotate(0deg); }
  86%           { transform: rotate(9deg); }
  93%           { transform: rotate(-4deg); }
}
@keyframes zx-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15%      { transform: translateY(0) scale(1.04, .95); }
  45%      { transform: translateY(-10px) scale(.98, 1.03); }
  75%      { transform: translateY(0) scale(1.03, .97); }
}
@keyframes zx-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---------- Standard-Animationen ---------- */
.zappelix .eye {
  animation: zx-blink var(--zx-duration-blink, 4.5s) var(--zx-ease-in-out, ease-in-out) infinite;
}
.zappelix .eye-right { animation-delay: 30ms; } /* minimal versetzt wirkt lebendiger */

.zappelix .body {
  animation: zx-wiggle var(--zx-duration-wiggle, 3.2s) var(--zx-ease-in-out, ease-in-out) infinite;
}
.zappelix .antenna-spark {
  animation: zx-twinkle var(--zx-duration-twinkle, 1.8s) var(--zx-ease-in-out, ease-in-out) infinite;
}
.zappelix .spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: zx-spark-pop var(--zx-duration-twinkle, 1.8s) var(--zx-ease-in-out, ease-in-out) infinite;
}
.zappelix .spark-2, .zappelix .sparkles .spark:nth-child(2n) { animation-delay: .45s; }
.zappelix .spark-3, .zappelix .sparkles .spark:nth-child(3n) { animation-delay: .9s; }

.zappelix .ear-left  { animation: zx-ear-left  calc(var(--zx-duration-wiggle, 3.2s) * 2) var(--zx-ease-bounce, ease) infinite; }
.zappelix .ear-right { animation: zx-ear-right calc(var(--zx-duration-wiggle, 3.2s) * 2) var(--zx-ease-bounce, ease) infinite; animation-delay: 80ms; }

/* ---------- Winken ---------- */
.zappelix--winkt .arm-right,
.zappelix.is-waving .arm-right,
.zappelix:hover .arm-right,
.zappelix-trigger:hover .zappelix .arm-right,
.zappelix-trigger:focus-visible .zappelix .arm-right {
  animation: zx-wave var(--zx-duration-wave, 1.6s) var(--zx-ease-in-out, ease-in-out) infinite;
}
.zappelix--winkt .wave-lines { animation: zx-spark-pop var(--zx-duration-wave, 1.6s) var(--zx-ease-in-out, ease-in-out) infinite; }

/* ---------- Posen ---------- */
.zappelix--freut-sich .body {
  animation: zx-hop calc(var(--zx-duration-wiggle, 3.2s) / 3) var(--zx-ease-bounce, ease) infinite;
}
.zappelix--denkt .thought {
  animation: zx-float calc(var(--zx-duration-float, 6s) / 2) var(--zx-ease-in-out, ease-in-out) infinite;
}
/* Beim Denken & Freuen kein Winken per Hover (Arme sind schon in Pose) */
.zappelix--denkt:hover .arm-right,
.zappelix--freut-sich:hover .arm-right { animation: none; }

/* ---------- Aus-Schalter ---------- */
.zappelix--still,
.zappelix--still * { animation: none !important; }

/* ---------- Reduzierte Bewegung respektieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .zappelix,
  .zappelix * { animation: none !important; transition: none !important; }
}