/* Animationen der Reflexions-Szenen. Grundlage (.ikon, .spielt, .schleife, Hilfsmuster, reduzierte Bewegung)
   in shared/bausteine.css. `--v` versetzt Teile derselben Animation (Anteil der Dauer). */

/* Szenen sind ruhiger als in Warm-up: eine Runde dauert länger. */
:is(.spielt, .schleife) .ikon { --ik-t: 2.4s; }
.ikon [style*="--v"] { --verz: calc(var(--ik-t, 0s) * var(--v) * -1); }

/* Aufspringen, versetzt: zielscheibe, kopfherzhand, hashtag */
@keyframes rk-auf {
  0%, 100% { transform: none; opacity: 1; }
  8% { transform: scale(0.2); opacity: 0; }
  22% { transform: scale(1.15); opacity: 1; }
  30% { transform: none; }
}
:is(.spielt, .schleife) :is(.rk-zielscheibe .punkt, .rk-kopfherzhand .auf) { animation: rk-auf var(--ik-t) ease-out var(--verz, 0s) var(--ik-n); }
:is(.spielt, .schleife) .rk-hashtag .raute { animation: ik-pop var(--ik-t) ease-out var(--ik-n); }

/* koffer: Zettel fällt hinein, kommt wieder; der Knäuel folgt eine halbe Runde später */
@keyframes rk-rein {
  0%, 70%, 100% { transform: none; opacity: 1; }
  35% { transform: translateY(18px); opacity: 0; }
  36% { transform: translateY(-8px); opacity: 0; }
}
.rk-koffer .spaet { --v: 0.5; --verz: calc(var(--ik-t, 0s) * -0.5); }
:is(.spielt, .schleife) .rk-koffer .rein { animation: rk-rein var(--ik-t) ease-in var(--verz, 0s) var(--ik-n); }

/* hand, dreizweieins: Finger und Säulen heben sich nacheinander */
@keyframes rk-heben { 0%, 40%, 100% { transform: none; } 15% { transform: scaleY(0.55); } }
.rk-hand .finger { transform-origin: 50% 100%; }
.rk-hand .finger:first-of-type { transform-origin: 100% 100%; }
.rk-dreizweieins .saeule { transform-origin: 50% 100%; }
:is(.spielt, .schleife) :is(.rk-hand .finger, .rk-dreizweieins .saeule) { animation: rk-heben var(--ik-t) ease-in-out var(--verz, 0s) var(--ik-n); }

/* blitz */
@keyframes rk-blitz { 0%, 30%, 100% { transform: none; } 8% { transform: scale(1.12); } 16% { transform: scale(0.95); } }
:is(.spielt, .schleife) .rk-blitz .blitz { animation: rk-blitz var(--ik-t) ease-out var(--ik-n); }
:is(.spielt, .schleife) .rk-blitz .strahlen { animation: ik-blinken var(--ik-t) linear var(--ik-n); }

/* barometer: Zeiger schlägt von links aus und pendelt sich ein */
@keyframes rk-zeiger {
  0%, 100% { transform: none; }
  25% { transform: rotate(-95deg); }
  55% { transform: rotate(18deg); }
  75% { transform: rotate(-8deg); }
}
:is(.spielt, .schleife) .rk-barometer .zeiger { animation: rk-zeiger var(--ik-t) ease-in-out var(--ik-n); }

/* ampel: grün, gelb, rot nacheinander */
.rk-ampel .licht { fill-opacity: 0.25; }
.rk-ampel .licht-1 { fill-opacity: 1; }
@keyframes rk-licht-1 { 0%, 30%, 100% { fill-opacity: 1; } 33%, 97% { fill-opacity: 0.25; } }
@keyframes rk-licht-2 { 0%, 30%, 64%, 100% { fill-opacity: 0.25; } 33%, 61% { fill-opacity: 1; } }
@keyframes rk-licht-3 { 0%, 64%, 100% { fill-opacity: 0.25; } 67%, 97% { fill-opacity: 1; } }
:is(.spielt, .schleife) .rk-ampel .licht-1 { animation: rk-licht-1 var(--ik-t) steps(1) var(--ik-n); }
:is(.spielt, .schleife) .rk-ampel .licht-2 { animation: rk-licht-2 var(--ik-t) steps(1) var(--ik-n); }
:is(.spielt, .schleife) .rk-ampel .licht-3 { animation: rk-licht-3 var(--ik-t) steps(1) var(--ik-n); }

/* wetter */
@keyframes rk-wolke { 0%, 100% { transform: none; } 50% { transform: translateX(-12px); } }
:is(.spielt, .schleife) .rk-wetter .sonne { animation: rk-sonne calc(var(--ik-t) * 2) linear var(--ik-n); }
:is(.spielt, .schleife) .rk-wetter .wolke { animation: rk-wolke var(--ik-t) ease-in-out var(--ik-n); }
@keyframes rk-sonne { to { transform: rotate(45deg); } }

/* sprechblase: Punkte hüpfen wie beim Tippen */
@keyframes rk-tippen { 0%, 40%, 100% { transform: none; } 20% { transform: translateY(-6px); } }
:is(.spielt, .schleife) .rk-sprechblase .tippen { animation: rk-tippen var(--ik-t) ease-in-out var(--verz, 0s) var(--ik-n); }

/* zeitung: Schlagzeile schreibt sich von links */
@keyframes rk-schreiben { 0% { transform: scaleX(0); } 45%, 100% { transform: none; } }
.rk-zeitung .schlagzeile { transform-origin: 0 50%; }
:is(.spielt, .schleife) .rk-zeitung .schlagzeile { animation: rk-schreiben var(--ik-t) ease-out var(--ik-n); }

/* gesicht, wuerfel: Hilfsmuster Tauschen (shared/bausteine.css) */
@keyframes rk-wurf {
  0%, 100% { transform: none; }
  20% { transform: translateY(-10px) rotate(-90deg); }
  40% { transform: translateY(0) rotate(-180deg); }
  45% { transform: none; }
}
:is(.spielt, .schleife) .rk-wuerfel .wurf { animation: rk-wurf var(--ik-t) ease-in-out var(--ik-n); }

/* postkarte: fliegt nach rechts oben davon und kommt zurück */
@keyframes rk-karte {
  0%, 100% { transform: none; opacity: 1; }
  35% { transform: translate(18px, -16px) rotate(-12deg) scale(0.7); opacity: 0; }
  36% { transform: translate(-18px, 10px) scale(0.7); opacity: 0; }
  70% { transform: none; opacity: 1; }
}
:is(.spielt, .schleife) .rk-postkarte .karte { animation: rk-karte var(--ik-t) ease-in-out var(--ik-n); }

/* megafon */
@keyframes rk-welle { 0%, 100% { opacity: 1; } 25% { opacity: 0.1; } 50% { opacity: 1; } }
:is(.spielt, .schleife) .rk-megafon .welle { animation: rk-welle calc(var(--ik-t) / 2) linear var(--verz, 0s) var(--ik-n); }

/* ecken: von Ecke zu Ecke über die Mitte */
@keyframes rk-ecken {
  0%, 100% { transform: none; }
  25% { transform: translate(-13px, 13px); }
  50% { transform: translate(-26px, 26px); }
  75% { transform: translate(-13px, 13px); }
}
:is(.spielt, .schleife) .rk-ecken .person { animation: rk-ecken var(--ik-t) ease-in-out var(--ik-n); }

/* daumen: hoch, quer, runter, hoch */
@keyframes rk-daumen {
  0%, 15%, 100% { transform: none; }
  30%, 45% { transform: rotate(-90deg); }
  60%, 80% { transform: rotate(-180deg); }
}
:is(.spielt, .schleife) .rk-daumen .dreh { animation: rk-daumen calc(var(--ik-t) * 1.5) ease-in-out var(--ik-n); }

/* kurve: zeichnet sich von links */
@keyframes rk-zeichnen { 0% { stroke-dashoffset: 100; } 60%, 100% { stroke-dashoffset: 0; } }
.rk-kurve .zug { stroke-dasharray: 100; }
:is(.spielt, .schleife) .rk-kurve .zug { animation: rk-zeichnen var(--ik-t) ease-in-out var(--ik-n); }

/* nebel: Schwaden ziehen hin und her */
@keyframes rk-schwaden { 0%, 100% { transform: none; opacity: 1; } 50% { transform: translateX(8px); opacity: 0.4; } }
:is(.spielt, .schleife) .rk-nebel .schwaden { animation: rk-schwaden var(--ik-t) ease-in-out var(--verz, 0s) var(--ik-n); }

/* ticket: Abschnitt reißt ab und rastet wieder ein */
@keyframes rk-abriss { 0%, 70%, 100% { transform: none; } 30%, 50% { transform: translate(5px, 6px) rotate(14deg); } }
:is(.spielt, .schleife) .rk-ticket .abriss { animation: rk-abriss var(--ik-t) ease-in-out var(--ik-n); }

/* schneeball: fliegt im Bogen von links nach rechts */
@keyframes rk-bogen {
  0%, 100% { transform: none; opacity: 1; }
  8% { transform: none; opacity: 0; }
  12% { transform: translate(-38px, 0); opacity: 0; }
  20% { transform: translate(-38px, 0); opacity: 1; }
  45% { transform: translate(-22px, -22px); }
  70% { transform: translate(-4px, -10px); }
  85% { transform: none; }
}
:is(.spielt, .schleife) .rk-schneeball .knaeuel { animation: rk-bogen var(--ik-t) ease-in-out var(--ik-n); }

/* skala: sucht den Platz auf der Linie */
@keyframes rk-skala { 0%, 100% { transform: none; } 30% { transform: translateX(-26px); } 60% { transform: translateX(12px); } 80% { transform: translateX(-3px); } }
:is(.spielt, .schleife) .rk-skala .person { animation: rk-skala var(--ik-t) ease-in-out var(--ik-n); }

/* nachricht: Flieger startet nach rechts oben und kommt von links zurück */
@keyframes rk-flieger {
  0%, 100% { transform: none; opacity: 1; }
  35% { transform: translate(24px, -18px) scale(0.6); opacity: 0; }
  36% { transform: translate(-24px, 12px) scale(0.6); opacity: 0; }
  70% { transform: none; opacity: 1; }
}
:is(.spielt, .schleife) .rk-nachricht .flieger { animation: rk-flieger var(--ik-t) ease-in-out var(--ik-n); }

/* bruecke: der Pfeil schiebt, das Nachher springt auf */
@keyframes rk-pfeil { 0%, 60%, 100% { transform: none; } 30% { transform: translateX(5px); } }
:is(.spielt, .schleife) .rk-bruecke .pfeil { animation: rk-pfeil var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .rk-bruecke .nachher { animation: rk-auf var(--ik-t) ease-out calc(var(--ik-t) * -0.8) var(--ik-n); }

/* berg: Fahne weht */
@keyframes rk-fahne { 0%, 50%, 100% { transform: none; } 25%, 75% { transform: scaleX(0.6); } }
.rk-berg .fahne { transform-origin: 0 50%; }
:is(.spielt, .schleife) .rk-berg .fahne { animation: rk-fahne var(--ik-t) ease-in-out var(--ik-n); }

/* ball: springt, der Schatten wächst beim Aufkommen */
@keyframes rk-sprung { 0%, 100% { transform: none; } 50% { transform: translateY(17px); } }
@keyframes rk-schatten { 0%, 100% { transform: scaleX(0.6); } 50% { transform: none; } }
.rk-ball .schatten { transform: scaleX(0.6); }
:is(.spielt, .schleife) .rk-ball .sprung { animation: rk-sprung calc(var(--ik-t) / 2) cubic-bezier(0.5, 0, 0.5, 1) var(--ik-n); }
:is(.spielt, .schleife) .rk-ball .schatten { animation: rk-schatten calc(var(--ik-t) / 2) cubic-bezier(0.5, 0, 0.5, 1) var(--ik-n); }

/* batterie: Zellen laden nacheinander */
@keyframes rk-laden { 0%, 100% { opacity: 1; } 5%, 30% { opacity: 0.15; } }
:is(.spielt, .schleife) .rk-batterie .zelle { animation: rk-laden var(--ik-t) steps(1) var(--verz, 0s) var(--ik-n); }

/* danke: Herz schlägt, kleine Herzen steigen */
@keyframes rk-schlag { 0%, 40%, 100% { transform: none; } 10%, 30% { transform: scale(1.12); } 20% { transform: scale(0.98); } }
@keyframes rk-steigt { 0%, 100% { transform: none; opacity: 1; } 60% { transform: translateY(-10px); opacity: 0; } 61% { transform: translateY(8px); opacity: 0; } }
:is(.spielt, .schleife) .rk-danke .schlag { animation: rk-schlag var(--ik-t) ease-in-out var(--ik-n); }
:is(.spielt, .schleife) .rk-danke .steigt { animation: rk-steigt var(--ik-t) ease-in-out var(--verz, 0s) var(--ik-n); }

/* spickzettel: Lupe fährt über den Zettel */
@keyframes rk-lupe { 0%, 100% { transform: none; } 33% { transform: translate(-16px, -20px); } 66% { transform: translate(-8px, -8px); } }
:is(.spielt, .schleife) .rk-spickzettel .lupe { animation: rk-lupe var(--ik-t) ease-in-out var(--ik-n); }

/* ---------- Beamer „Nur Bild“ und „Ablauf“: der Teil zum Satzanfang ist hervorgehoben ---------- */
/* Im Ablauf nur, wenn das Bild einen Teil nennt (data-bild); sonst läuft die Szene ganz. */
:is(.beamer-szene, .ablauf-szene[data-bild]) .ikon:has(.teil-1) [class*="teil-"] { opacity: 0.2; transition: opacity 240ms; }
:is(.beamer-szene, .ablauf-szene)[data-bild="1"] .ikon .teil-1,
:is(.beamer-szene, .ablauf-szene)[data-bild="2"] .ikon .teil-2,
:is(.beamer-szene, .ablauf-szene)[data-bild="3"] .ikon .teil-3,
:is(.beamer-szene, .ablauf-szene)[data-bild="4"] .ikon .teil-4,
:is(.beamer-szene, .ablauf-szene)[data-bild="5"] .ikon .teil-5 { opacity: 1; }
/* Die Ampel zeigt ihr Licht voll, nicht im Wechsel. */
:is(.beamer-szene, .ablauf-szene[data-bild]) .rk-ampel .licht { animation: none; fill-opacity: 1; }
/* Der Daumen steht so, wie der Satzanfang sagt: hoch, quer, runter. */
:is(.beamer-szene, .ablauf-szene[data-bild]) .rk-daumen .dreh { animation: none; transition: transform 320ms; }
:is(.beamer-szene, .ablauf-szene)[data-bild="2"] .rk-daumen .dreh { transform: rotate(-90deg); }
:is(.beamer-szene, .ablauf-szene)[data-bild="3"] .rk-daumen .dreh { transform: rotate(-180deg); }