/* Animationen der Energizer-Motive. Grundlage (.ikon, .spielt, .schleife, Hilfsmuster, reduzierte Bewegung)
   in shared/bausteine.css. */

/* klatschen, hochwurf */
@keyframes ik-hand-l { 0%, 40%, 80%, 100% { transform: none; } 20%, 60% { transform: translateX(-6px) rotate(-10deg); } }
@keyframes ik-hand-r { 0%, 40%, 80%, 100% { transform: none; } 20%, 60% { transform: translateX(6px) rotate(10deg); } }
:is(.spielt, .schleife) :is(.ik-klatschen, .ik-hochwurf) .l { transform-origin: 50% 100%; animation: ik-hand-l var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) :is(.ik-klatschen, .ik-hochwurf) .r { transform-origin: 50% 100%; animation: ik-hand-r var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) :is(.ik-klatschen, .ik-hochwurf) .funken { animation: ik-blinken var(--ik-t) linear var(--ik-n); }
@keyframes ik-hochwurf { 0%, 100% { transform: none; } 50% { transform: translateY(22px); } }
:is(.spielt, .schleife) .ik-hochwurf .ball { animation: ik-hochwurf var(--ik-t) cubic-bezier(0.45, 0, 0.55, 1) var(--ik-n); }

/* zuwerfen: Ball im Bogen nach rechts, zurück nach links, wieder oben */
@keyframes ik-zuwerfen {
  0%, 100% { transform: none; }
  12.5% { transform: translate(8px, 3px); }
  25% { transform: translate(14px, 14px); }
  37.5% { transform: translate(8px, 3px); }
  50% { transform: none; }
  62.5% { transform: translate(-8px, 3px); }
  75% { transform: translate(-14px, 14px); }
  87.5% { transform: translate(-8px, 3px); }
}
:is(.spielt, .schleife) .ik-zuwerfen .ball { animation: ik-zuwerfen var(--ik-t) linear var(--ik-n); }

/* ballkreis: Ring wandert einmal um den Kreis */
@keyframes ik-dreh { to { transform: rotate(360deg); } }
:is(.spielt, .schleife) .ik-ballkreis .dreh { animation: ik-dreh var(--ik-t) ease-in-out var(--ik-n); }

/* zielwurf: Ball verschwindet, kommt von links oben und fällt in den Ring */
@keyframes ik-zielwurf {
  0%, 100% { transform: none; opacity: 1; }
  12% { opacity: 0; transform: none; }
  18% { opacity: 0; transform: translate(-24px, -32px); }
  28% { opacity: 1; transform: translate(-24px, -32px); }
  55% { transform: translate(-10px, -34px); }
  85% { transform: translate(0, -2px); }
}
:is(.spielt, .schleife) .ik-zielwurf .ball { animation: ik-zielwurf var(--ik-t) ease-in-out var(--ik-n); }

/* spiegel: beide Arme sinken und heben sich gleichzeitig */
@keyframes ik-arm-l { 0%, 100% { transform: none; } 50% { transform: rotate(-110deg); } }
@keyframes ik-arm-r { 0%, 100% { transform: none; } 50% { transform: rotate(110deg); } }
:is(.spielt, .schleife) .ik-spiegel .arm-l { animation: ik-arm-l var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-spiegel .arm-r { animation: ik-arm-r var(--ik-t) ease-in-out var(--ik-n); }

/* atmen: Punkt fährt das Quadrat ab, das Quadrat atmet mit */
@keyframes ik-viereck {
  0%, 100% { transform: none; }
  25% { transform: translateX(36px); }
  50% { transform: translate(36px, 36px); }
  75% { transform: translateY(36px); }
}
@keyframes ik-atem { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: scale(1.06); } }
:is(.spielt, .schleife) .ik-atmen .punkt { animation: ik-viereck calc(var(--ik-t) * 2) linear var(--ik-n); }
:is(.spielt, .schleife) .ik-atmen .quadrat { animation: ik-atem calc(var(--ik-t) * 2) ease-in-out var(--ik-n); }

/* anspannen: Finger krümmen sich zur Faust, Spannung zeigt sich, dann loslassen */
@keyframes ik-faust { 0%, 100% { transform: none; } 30%, 65% { transform: scaleY(0.35); } }
@keyframes ik-spannung { 0%, 20%, 75%, 100% { opacity: 0; } 30%, 65% { opacity: 1; } }
.ik-anspannen .finger { transform-origin: 50% 100%; }
.ik-anspannen .spannung { opacity: 0; }
:is(.spielt, .schleife) .ik-anspannen .finger { animation: ik-faust var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-anspannen .spannung { animation: ik-spannung var(--ik-t) linear var(--ik-n); }

/* atome, reihe: auseinander und wieder zusammen */
:is(.spielt, .schleife) :is(.ik-atome, .ik-reihe) .streu { animation: ik-streu var(--ik-t) ease-in-out var(--ik-n); }

/* sprint: Beine und Arme wechseln im Laufschritt */
@keyframes ik-schritt-a { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: rotate(35deg); } }
@keyframes ik-schritt-b { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: rotate(-35deg); } }
:is(.spielt, .schleife) .ik-sprint :is(.bein-l, .arm-r) { animation: ik-schritt-a calc(var(--ik-t) / 2) linear var(--ik-n); }
:is(.spielt, .schleife) .ik-sprint :is(.bein-r, .arm-l) { animation: ik-schritt-b calc(var(--ik-t) / 2) linear var(--ik-n); }
:is(.spielt, .schleife) .ik-sprint .tempo { animation: ik-blinken var(--ik-t) linear var(--ik-n); }

/* ampel: rot, gelb, grün nacheinander */
@keyframes ik-licht-1 { 0%, 28%, 100% { fill-opacity: 1; } 33%, 95% { fill-opacity: 0.2; } }
@keyframes ik-licht-2 { 0%, 28%, 66%, 100% { fill-opacity: 0.2; } 33%, 61% { fill-opacity: 1; } }
@keyframes ik-licht-3 { 0%, 61%, 100% { fill-opacity: 0.2; } 66%, 95% { fill-opacity: 1; } }
:is(.spielt, .schleife) .ik-ampel .licht-1 { animation: ik-licht-1 calc(var(--ik-t) * 1.5) steps(1) var(--ik-n); }
:is(.spielt, .schleife) .ik-ampel .licht-2 { animation: ik-licht-2 calc(var(--ik-t) * 1.5) steps(1) var(--ik-n); }
:is(.spielt, .schleife) .ik-ampel .licht-3 { animation: ik-licht-3 calc(var(--ik-t) * 1.5) steps(1) var(--ik-n); }

/* ecken: Punkt startet in der Mitte und läuft in seine Ecke */
@keyframes ik-ecke { 0%, 100% { transform: none; } 15%, 40% { transform: translate(-15px, 15px); } }
:is(.spielt, .schleife) .ik-ecken .geher { animation: ik-ecke var(--ik-t) ease-in-out var(--ik-n); }

/* linie: Figur springt von „falsch“ nach „richtig“ */
@keyframes ik-linie {
  0%, 100% { transform: none; }
  20%, 35% { transform: translateX(-28px); }
  55% { transform: translate(-14px, -10px); }
  75% { transform: none; }
}
:is(.spielt, .schleife) .ik-linie .springer { animation: ik-linie var(--ik-t) ease-in-out var(--ik-n); }

/* aufstehen: Figur sitzt kurz, dann steht sie mit erhobenen Armen */
@keyframes ik-setzen { 0%, 100% { transform: none; } 20%, 50% { transform: translate(-6px, 10px); } }
@keyframes ik-arme-hoch { 0%, 15%, 60% { opacity: 0; } 70%, 100% { opacity: 1; } }
:is(.spielt, .schleife) .ik-aufstehen .steher { animation: ik-setzen var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-aufstehen .arm-hoch { animation: ik-arme-hoch var(--ik-t) linear var(--ik-n); }

/* sprechen: Sprechblase wandert nach rechts weiter und kommt links wieder an */
@keyframes ik-blase {
  0%, 100% { transform: none; opacity: 1; }
  40% { transform: translateX(10px); opacity: 1; }
  50% { transform: translateX(14px); opacity: 0; }
  51% { transform: translateX(-14px); opacity: 0; }
  65% { transform: translateX(-8px); opacity: 1; }
}
:is(.spielt, .schleife) .ik-sprechen .blase { animation: ik-blase var(--ik-t) ease-in-out var(--ik-n); }

/* gedanke: zwei Gedanken erscheinen nacheinander und sind gleich */
:is(.spielt, .schleife) .ik-gedanke .denk-l { animation: ik-pop var(--ik-t) ease-out var(--ik-n); }
:is(.spielt, .schleife) .ik-gedanke .denk-r { animation: ik-pop var(--ik-t) ease-out 0.25s var(--ik-n) both; }

/* hoeren: Schallwellen kommen von außen nach innen */
@keyframes ik-welle { 0%, 100% { opacity: 1; } 15% { opacity: 0; } 55% { opacity: 1; } }
:is(.spielt, .schleife) .ik-hoeren .w3 { animation: ik-welle var(--ik-t) linear var(--ik-n); }
:is(.spielt, .schleife) .ik-hoeren .w2 { animation: ik-welle var(--ik-t) linear 0.15s var(--ik-n) both; }
:is(.spielt, .schleife) .ik-hoeren .w1 { animation: ik-welle var(--ik-t) linear 0.3s var(--ik-n) both; }

/* kommando: Ausrufezeichen pocht, die Figur springt */
@keyframes ik-ruf { 0%, 40%, 100% { transform: none; } 15% { transform: scale(1.25); } }
@keyframes ik-spring-spaet { 0%, 35%, 100% { transform: none; } 60% { transform: translateY(-9px); } }
:is(.spielt, .schleife) .ik-kommando .ruf { animation: ik-ruf var(--ik-t) ease-out var(--ik-n); }
:is(.spielt, .schleife) .ik-kommando .huepfer { animation: ik-spring-spaet var(--ik-t) ease-in-out var(--ik-n); }

/* auge: Blick wandert, Auge blinzelt */
@keyframes ik-blick { 0%, 100% { transform: none; } 20%, 35% { transform: translateX(-9px); } 55%, 70% { transform: translateX(9px); } }
@keyframes ik-lid { 0%, 80%, 100% { transform: none; } 88% { transform: scaleY(0.1); } }
:is(.spielt, .schleife) .ik-auge .pupille { animation: ik-blick var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-auge .lid { animation: ik-lid var(--ik-t) ease-in-out var(--ik-n); }

/* staffel: Figur läuft zur Tafel, eine neue Zeile entsteht, Figur läuft zurück */
@keyframes ik-staffel { 0%, 100% { transform: none; } 40%, 55% { transform: translateX(22px); } }
@keyframes ik-zeile { 0%, 45% { opacity: 0; } 50%, 100% { opacity: 1; } }
:is(.spielt, .schleife) .ik-staffel .laeufer { animation: ik-staffel var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-staffel .neu { animation: ik-zeile var(--ik-t) steps(1) var(--ik-n); }

/* inseln: ein Reifen verschwindet, die Figur springt hinüber */
@keyframes ik-schwindet { 0%, 100% { transform: none; opacity: 1; } 30%, 70% { transform: scale(0); opacity: 0; } }
@keyframes ik-insel-sprung {
  0%, 100% { transform: none; }
  40% { transform: translate(-10px, -10px); }
  55%, 75% { transform: translateX(-20px); }
}
:is(.spielt, .schleife) .ik-inseln .schwindet { animation: ik-schwindet var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-inseln .huepfer { animation: ik-insel-sprung var(--ik-t) ease-in-out var(--ik-n); }

/* seil: Seil schwingt über den Kopf, die Figur landet und springt wieder */
@keyframes ik-seil { 0%, 100% { transform: none; } 50% { transform: scaleY(-1.6); } }
@keyframes ik-seil-sprung { 0%, 100% { transform: none; } 30%, 70% { transform: translateY(10px); } }
:is(.spielt, .schleife) .ik-seil .seil { animation: ik-seil var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-seil .huepfer { animation: ik-seil-sprung var(--ik-t) ease-in-out var(--ik-n); }

/* fangen: beide laufen nach rechts, der Greifarm reicht nach dem Band, das Band flattert */
@keyframes ik-flucht { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
@keyframes ik-jagd { 0%, 100% { transform: none; } 50% { transform: translateX(9px); } }
@keyframes ik-flattern { 0%, 100% { transform: none; } 25% { transform: rotate(-18deg); } 75% { transform: rotate(12deg); } }
@keyframes ik-greifarm { 0%, 100% { transform: none; } 50% { transform: rotate(8deg); } }
:is(.spielt, .schleife) .ik-fangen .vorne { animation: ik-flucht var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-fangen .hinten { animation: ik-jagd var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-fangen .band { transform-origin: 100% 0%; animation: ik-flattern calc(var(--ik-t) / 2) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-fangen .greifarm { animation: ik-greifarm var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-fangen .tempo { animation: ik-blinken var(--ik-t) linear var(--ik-n); }

/* ---------- Brain Breaks ---------- */
/* Tauschen (hasejaeger, naseohr, daumenklein, kreuz, zaehlen, gewinner): .wechsel-a/-b aus shared/bausteine.css */

/* acht: Strich läuft einmal um die liegende Acht */
.ik-acht .spur { stroke-opacity: 0.3; }
.ik-acht .lauf { stroke-dasharray: 18 82; }
@keyframes ik-acht { to { stroke-dashoffset: -100; } }
:is(.spielt, .schleife) .ik-acht .lauf { animation: ik-acht calc(var(--ik-t) * 1.5) linear var(--ik-n); }

/* klopfen: Hand klopft zweimal, der Pfeil am Bauch kreist */
@keyframes ik-klopf { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: translateY(-4px); } }
@keyframes ik-kreis { to { transform: rotate(-360deg); } }
:is(.spielt, .schleife) .ik-klopfen .klopf { animation: ik-klopf var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-klopfen .kreis { animation: ik-kreis var(--ik-t) linear var(--ik-n); }

/* fingertippen: Daumenspitze springt von Finger zu Finger und zurück */
@keyframes ik-tipp {
  0%, 12%, 100% { transform: none; }
  20%, 32% { transform: translate(7px, -5px); }
  40%, 52% { transform: translate(14px, -5px); }
  60%, 72% { transform: translate(21px, 1px); }
  80%, 92% { transform: translate(14px, -5px); }
}
:is(.spielt, .schleife) .ik-fingertippen .tipp { animation: ik-tipp calc(var(--ik-t) * 1.5) ease-in-out var(--ik-n); }

/* kreisdreieck: beide Formen entstehen gleichzeitig */
.ik-kreisdreieck .zug { stroke-dasharray: 100; }
@keyframes ik-zeichnen { 0%, 100% { stroke-dashoffset: 0; } 12% { stroke-dashoffset: 100; } 80% { stroke-dashoffset: 0; } }
:is(.spielt, .schleife) .ik-kreisdreieck .zug { animation: ik-zeichnen calc(var(--ik-t) * 1.5) ease-in-out var(--ik-n); }

/* gewinner: der Haken pocht beim Tausch */
:is(.spielt, .schleife) .ik-gewinner .haken { animation: ik-pop calc(var(--ik-t) / 2) ease-out var(--ik-n); }

/* fingerleiter: die Stufen entstehen von unten nach oben, der Pfeil hüpft */
:is(.spielt, .schleife) .ik-fingerleiter .s2 { animation: ik-pop var(--ik-t) ease-out 0.2s var(--ik-n) both; }
:is(.spielt, .schleife) .ik-fingerleiter .s3 { animation: ik-pop var(--ik-t) ease-out 0.4s var(--ik-n) both; }
:is(.spielt, .schleife) .ik-fingerleiter .pfeil { animation: ik-huepfen calc(var(--ik-t) / 2) ease-in-out var(--ik-n); }

/* rhythmus: Hände klatschen, der Punkt springt vier Schläge weiter */
@keyframes ik-takt {
  0%, 24% { transform: none; }
  25%, 49% { transform: translateX(14px); }
  50%, 74% { transform: translateX(28px); }
  75%, 99% { transform: translateX(42px); }
  100% { transform: none; }
}
:is(.spielt, .schleife) .ik-rhythmus .takt { animation: ik-takt calc(var(--ik-t) * 1.5) linear var(--ik-n); }
:is(.spielt, .schleife) .ik-rhythmus .l { transform-origin: 50% 100%; animation: ik-hand-l calc(var(--ik-t) * 1.5) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .ik-rhythmus .r { transform-origin: 50% 100%; animation: ik-hand-r calc(var(--ik-t) * 1.5) ease-in-out var(--ik-n); }

/* windmuehle: linker Arm kreist vorwärts, rechter rückwärts */
@keyframes ik-arm-vor { to { transform: rotate(360deg); } }
@keyframes ik-arm-zurueck { to { transform: rotate(-360deg); } }
:is(.spielt, .schleife) .ik-windmuehle .arm-l { animation: ik-arm-vor var(--ik-t) linear var(--ik-n); }
:is(.spielt, .schleife) .ik-windmuehle .arm-r { animation: ik-arm-zurueck var(--ik-t) linear var(--ik-n); }