/* Fritte-Rig: Drehpunkte, Posen, Mund, Leerlauf und Einmal-Bewegungen.
   Gestaltung über data-teil (Gruppen im SVG), Zustände über data-ff-* am SVG.
   Ohne Bewegungswunsch (prefers-reduced-motion: reduce oder html[data-ff-ruhig]) steht Fritte in der Grundpose;
   nur der Mund wechselt, weil er keine Bewegung ist.
   Posen setzen nur Variablen; Varianten können sie am SVG überschreiben:
   --ff-arm-l, --ff-arm-r, --ff-lupe, --ff-kopf-dreh, --ff-kopf-x, --ff-kopf-y, --ff-braue-y,
   --ff-braue-l-dreh, --ff-braue-r-dreh, --ff-auge-s, --ff-pupille-s, --ff-blick-x, --ff-blick-y,
   --ff-figur-sx, --ff-figur-sy, --ff-figur-y */

/* ---------- Drehpunkte (Koordinaten im viewBox 240 × 320) ---------- */
[data-ff-rig] { display: block; overflow: visible; }
[data-ff-rig] [data-teil] { transform-box: view-box; }
[data-ff-rig] [data-teil="figur"]     { transform-origin: 120px 292px; }
[data-ff-rig] [data-teil="koerper"]   { transform-origin: 120px 238px; }
[data-ff-rig] [data-teil="kopf"]      { transform-origin: 120px 125px; }
[data-ff-rig] [data-teil="auge-l"]    { transform-origin: 106px 112px; }
[data-ff-rig] [data-teil="auge-r"]    { transform-origin: 134px 110px; }
[data-ff-rig] [data-teil="pupille-l"] { transform-origin: 108px 116px; }
[data-ff-rig] [data-teil="pupille-r"] { transform-origin: 136px 114px; }
[data-ff-rig] [data-teil="braue-l"]   { transform-origin: 105px 86px; }
[data-ff-rig] [data-teil="braue-r"]   { transform-origin: 135px 81px; }
[data-ff-rig] [data-teil="mund"]      { transform-origin: 121px 152px; }
[data-ff-rig] [data-teil="arm-l"]     { transform-origin: 82px 168px; }
[data-ff-rig] [data-teil="lupe"]      { transform-origin: 58px 212px; }
[data-ff-rig] [data-teil="arm-r"]     { transform-origin: 158px 160px; }
[data-ff-rig] [data-teil="lider"] ellipse { transform-box: fill-box; transform-origin: center; }

/* ---------- Lider: offen, solange nichts blinzelt ---------- */
[data-ff-rig] [data-teil="lider"] { opacity: 0; }

/* ---------- Mund: Pose bestimmt den Mund, data-ff-mund übersteuert ---------- */
[data-ff-rig] [data-mund] { opacity: 0; }
[data-ff-rig] [data-mund="neutral"] { opacity: 1; }
[data-ff-rig]:is([data-ff-pose="freude"], [data-ff-pose="zeigen"]) [data-mund="neutral"] { opacity: 0; }
[data-ff-rig]:is([data-ff-pose="freude"], [data-ff-pose="zeigen"]) [data-mund="grinsen"] { opacity: 1; }
[data-ff-rig]:is([data-ff-pose="staunen"], [data-ff-pose="ducken"]) [data-mund="neutral"] { opacity: 0; }
[data-ff-rig]:is([data-ff-pose="staunen"], [data-ff-pose="ducken"]) [data-mund="offen"] { opacity: 1; }
[data-ff-rig][data-ff-mund] [data-mund] { opacity: 0; }
[data-ff-rig][data-ff-mund="neutral"] [data-mund="neutral"],
[data-ff-rig][data-ff-mund="offen"] [data-mund="offen"],
[data-ff-rig][data-ff-mund="grinsen"] [data-mund="grinsen"] { opacity: 1; }

/* ---------- Posen: nur Variablen ---------- */
[data-ff-rig][data-ff-pose="lesen"] {
  --ff-arm-l: 91deg;
  --ff-lupe: -46deg;
  --ff-kopf-dreh: -4deg;
  --ff-kopf-x: -2px;
  --ff-blick-x: -3px;
  --ff-blick-y: -1px;
  --ff-braue-l-dreh: -6deg;
}
[data-ff-rig][data-ff-pose="freude"] {
  --ff-arm-l: 121deg;
  --ff-lupe: -76deg;
  --ff-arm-r: 8deg;
  --ff-braue-y: -5px;
  --ff-kopf-y: -2px;
}
[data-ff-rig][data-ff-pose="zeigen"] {
  --ff-arm-r: 57deg;
  --ff-kopf-dreh: 4deg;
  --ff-kopf-x: 2px;
  --ff-blick-x: 3px;
  --ff-braue-r-dreh: -8deg;
}
[data-ff-rig][data-ff-pose="ducken"] {
  --ff-figur-sx: 1.06;
  --ff-figur-sy: .9;
  --ff-arm-l: 25deg;
  --ff-lupe: 20deg;
  --ff-arm-r: -25deg;
  --ff-kopf-y: 4px;
  --ff-braue-y: 2px;
  --ff-braue-l-dreh: -14deg;
  --ff-braue-r-dreh: 14deg;
  --ff-pupille-s: .85;
  --ff-blick-y: 2px;
}
[data-ff-rig][data-ff-pose="staunen"] {
  --ff-arm-l: 20deg;
  --ff-arm-r: 28deg;
  --ff-braue-y: -8px;
  --ff-auge-s: 1.1;
  --ff-pupille-s: .82;
  --ff-kopf-y: -3px;
  --ff-figur-y: -4px;
}

/* ---------- Bewegung: nur mit Bewegungswunsch ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-ff-ruhig]) [data-ff-rig] {
    --ff-federn: cubic-bezier(.34, 1.56, .64, 1);
    --ff-weich: cubic-bezier(.32, .72, 0, 1);
    --ff-pose-dauer: 520ms;
  }

  /* Gruppen lesen die Posen-Variablen; Wechsel federn nach */
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="figur"] {
    translate: 0 var(--ff-figur-y, 0px);
    scale: var(--ff-figur-sx, 1) var(--ff-figur-sy, 1);
    transition: translate var(--ff-pose-dauer) var(--ff-federn), scale var(--ff-pose-dauer) var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="koerper"] {
    animation: ff-atmen 4s cubic-bezier(.37, 0, .63, 1) infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="kopf"] {
    translate: var(--ff-kopf-x, 0px) var(--ff-kopf-y, 0px);
    rotate: var(--ff-kopf-dreh, 0deg);
    transition: translate var(--ff-pose-dauer) var(--ff-federn), rotate var(--ff-pose-dauer) var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] :is([data-teil="auge-l"], [data-teil="auge-r"]),
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="lider"] ellipse {
    scale: var(--ff-auge-s, 1);
    transition: scale var(--ff-pose-dauer) var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] :is([data-teil="pupille-l"], [data-teil="pupille-r"]) {
    translate: var(--ff-blick-x, 0px) var(--ff-blick-y, 0px);
    scale: var(--ff-pupille-s, 1);
    transition: translate 160ms var(--ff-weich), scale var(--ff-pose-dauer) var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] :is([data-teil="braue-l"], [data-teil="braue-r"]) {
    translate: 0 var(--ff-braue-y, 0px);
    transition: translate var(--ff-pose-dauer) var(--ff-federn), rotate var(--ff-pose-dauer) var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="braue-l"] { rotate: var(--ff-braue-l-dreh, 0deg); }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="braue-r"] { rotate: var(--ff-braue-r-dreh, 0deg); }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="arm-l"] {
    rotate: var(--ff-arm-l, 0deg);
    transition: rotate 620ms var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="lupe"] {
    rotate: var(--ff-lupe, 0deg);
    transition: rotate 620ms var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-teil="arm-r"] {
    rotate: var(--ff-arm-r, 0deg);
    transition: rotate var(--ff-pose-dauer) var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig] [data-mund] {
    transition: opacity 90ms var(--ff-weich);
  }

  /* Leerlauf je Pose */
  :root:not([data-ff-ruhig]) [data-ff-rig]:is([data-ff-pose="neutral"], :not([data-ff-pose])) [data-teil="arm-r"] {
    animation: ff-winken 5.2s var(--ff-weich) 1.2s infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-pose="freude"] [data-teil="figur"] {
    animation: ff-hüpfen 2.4s var(--ff-weich) infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-pose="freude"] [data-teil="arm-r"] {
    animation: ff-winken 2.4s var(--ff-weich) infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-pose="lesen"] [data-teil="arm-l"] {
    animation: ff-lupe-lesen-arm 3.6s cubic-bezier(.45, 0, .55, 1) 620ms infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-pose="lesen"] [data-teil="lupe"] {
    animation: ff-lupe-lesen 3.6s cubic-bezier(.45, 0, .55, 1) 620ms infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-pose="ducken"] [data-teil="figur"] {
    animation: ff-zittern 1.8s linear 600ms infinite;
  }

  /* Blinzeln: ohne Skript als Schleife, mit FFRig.idle() zufällig gesetzt */
  :root:not([data-ff-ruhig]) [data-ff-rig]:not([data-ff-idle]) [data-teil="lider"] {
    animation: ff-blinzeln 4.6s linear infinite;
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-blinzeln] [data-teil="lider"] {
    animation: ff-lid-zu 150ms linear;
  }

  /* Einmal-Bewegungen, gesetzt von ff-fritte-rig.js */
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-hop] [data-teil="figur"] {
    animation: ff-quetschen 520ms var(--ff-federn);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-nicken] [data-teil="kopf"] {
    animation: ff-nicken 640ms var(--ff-weich);
  }
  :root:not([data-ff-ruhig]) [data-ff-rig][data-ff-braue] :is([data-teil="braue-l"], [data-teil="braue-r"]) {
    animation: ff-braue-hoch 900ms var(--ff-weich);
  }

  /* Schreibmarke in der Sprechblase */
  :root:not([data-ff-ruhig]) [data-ff-cursor] {
    animation: ff-marke 900ms steps(1, end) infinite;
  }
}

/* ---------- Keyframes ---------- */
@keyframes ff-atmen {
  0%, 100% { scale: 1 1; }
  50% { scale: 1 1.02; }
}
@keyframes ff-hüpfen {
  0%, 55%, 100% { translate: 0 var(--ff-figur-y, 0px); }
  62% { translate: 0 calc(var(--ff-figur-y, 0px) - 16px); }
  70% { translate: 0 var(--ff-figur-y, 0px); }
  76% { translate: 0 calc(var(--ff-figur-y, 0px) - 6px); }
  82% { translate: 0 var(--ff-figur-y, 0px); }
}
@keyframes ff-winken {
  0%, 10%, 50%, 100% { rotate: var(--ff-arm-r, 0deg); }
  18% { rotate: calc(var(--ff-arm-r, 0deg) - 16deg); }
  26% { rotate: calc(var(--ff-arm-r, 0deg) + 10deg); }
  34% { rotate: calc(var(--ff-arm-r, 0deg) - 12deg); }
  42% { rotate: calc(var(--ff-arm-r, 0deg) + 6deg); }
}
@keyframes ff-blinzeln {
  0%, 91%, 97%, 100% { opacity: 0; }
  92%, 96% { opacity: 1; }
}
@keyframes ff-lid-zu {
  0%, 100% { opacity: 0; }
  12%, 88% { opacity: 1; }
}
@keyframes ff-quetschen {
  0% { scale: 1 1; }
  30% { scale: 1.12 .86; }
  60% { scale: .92 1.1; translate: 0 -14px; }
  100% { scale: 1 1; translate: 0 0; }
}
@keyframes ff-pulsen {
  0%, 100% { scale: 1; }
  50% { scale: 1.08; }
}
@keyframes ff-nicken {
  0%, 100% { translate: var(--ff-kopf-x, 0px) var(--ff-kopf-y, 0px); }
  30% { translate: var(--ff-kopf-x, 0px) calc(var(--ff-kopf-y, 0px) + 6px); }
  55% { translate: var(--ff-kopf-x, 0px) calc(var(--ff-kopf-y, 0px) - 2px); }
  78% { translate: var(--ff-kopf-x, 0px) calc(var(--ff-kopf-y, 0px) + 3px); }
}
@keyframes ff-braue-hoch {
  0%, 100% { translate: 0 var(--ff-braue-y, 0px); }
  25%, 70% { translate: 0 calc(var(--ff-braue-y, 0px) - 7px); }
}
/* Lupe fährt zwei Zeilen ab: Arm hebt und senkt die Zeile, das Handgelenk führt die Lupe quer.
   Werte sind auf die Pose „lesen“ (Arm 91°, Lupe −46°) abgestimmt. */
@keyframes ff-lupe-lesen-arm {
  0%, 10%, 40% { rotate: var(--ff-arm-l, 0deg); }
  50%, 58%, 88% { rotate: calc(var(--ff-arm-l, 0deg) - 9deg); }
  100% { rotate: var(--ff-arm-l, 0deg); }
}
@keyframes ff-lupe-lesen {
  0%, 10% { rotate: calc(var(--ff-lupe, 0deg) - 8deg); }
  40% { rotate: calc(var(--ff-lupe, 0deg) + 8deg); }
  50%, 58% { rotate: calc(var(--ff-lupe, 0deg) + 7deg); }
  88% { rotate: calc(var(--ff-lupe, 0deg) + 23deg); }
  100% { rotate: calc(var(--ff-lupe, 0deg) - 8deg); }
}

@keyframes ff-zittern {
  0%, 100% { translate: 0 var(--ff-figur-y, 0px); }
  10% { translate: -1px var(--ff-figur-y, 0px); }
  20% { translate: 1px var(--ff-figur-y, 0px); }
  30% { translate: 0 var(--ff-figur-y, 0px); }
}
@keyframes ff-marke {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* ---------- Sprechblase beim Tippen (FFRig.tippen) ---------- */
[data-ff-tipp-buehne] { display: grid; }
[data-ff-tipp-buehne] > * { grid-area: 1 / 1; }
[data-ff-tipp-geist] { visibility: hidden; }
[data-ff-cursor] {
  display: inline-block;
  width: .14em;
  height: 1.05em;
  margin-left: .08em;
  vertical-align: -.16em;
  background: currentColor;
  border-radius: 2px;
}
[data-ff-live] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}