/* Tanchō (丹頂), Geltungsraum JP — Posen-System.
   Seit der Bild-Lieferung vom 17.08.2026 (tancho/lieferung-2/): je Zustand
   EIN ganzes, freigestelltes Illustrations-Bild (assets/tancho/pose_*.png,
   PNG mit echtem Alpha, aus Blatt F geschnitten und per Flutfüllung mit
   Konturlücken-Barriere freigestellt - Details im CHANGELOG_JP.md). Die App
   blendet zwischen den Posen um (opacity-Crossfade); die sanften Bewegungen
   (Atmen, Plustern, Schweben) legt CSS auf die ganze Figur. Das frühere
   Fünf-Ebenen-Rigging (assets/tsuru/*.svg) ist damit abgelöst - die
   Zustands-Logik in js/tsuru.js blieb unverändert, sie kennt nur
   data-zustand + aria-label und ist der Darstellung gegenüber blind.

   Rot-Konvention: die App vermeidet sonst durchgängig Rot (siehe Kopf von
   app.css). Der Zinnober-Scheitel in den Posen-Bildern ist die bewusste,
   eng begrenzte Ausnahme - beim Tanchō-Kranich (丹頂鶴) das entscheidende,
   kulturell verankerte Erkennungsmerkmal; er lebt jetzt im Artwork selbst.

   Lokale Verifikation: siehe CLAUDE.md, Abschnitt "Tsuru: Zustandsfarben
   real prüfen". */

.tsuru {
  /* 128px Breite: so rendern alle vier Posen höhengebunden auf 104px
     (breiteste Pose evolving 331x310 braucht bei 104px Höhe ~111px). */
  width: 128px;
  height: 104px;
  margin: 0 auto .5rem;
  position: relative;
}

/* ---------- Tanchōs Sprechblase (js/tancho_stimme.js) ----------
   Schwebt ÜBER der Fußzeile (absolute, bottom: 100%), damit ihr Erscheinen
   kein Layout verschiebt. z-index 6: über den treibenden Sakura-Blüten
   (z-index 5 in japan_scenery.css) - Lesbarkeit des Textes geht vor
   Blüten-Romantik. pointer-events: none: reine Geste, steht nie im Weg. */
.eingabe { position: relative; }
.tancho-blase {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 6;
  max-width: min(340px, 86vw);
  background: rgba(255, 255, 255, .94);
  border: 1px solid var(--welle);
  border-radius: 14px;
  padding: .55rem .95rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinte);
  text-align: center;
  box-shadow: 0 2px 10px rgba(34, 48, 59, .10);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.tancho-blase[data-sichtbar="1"] { opacity: 1; transform: translate(-50%, 0); }
/* Schwänzchen, zeigt auf den Kranich darunter. */
.tancho-blase::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(255, 255, 255, .94);
}
.tsuru-rig {
  position: relative;
  width: 100%;
  height: 100%;
  /* Füße bleiben am Boden: Atmen/Plustern/Schweben skalieren von unten. */
  transform-origin: 50% 100%;
}

/* Vier Posen deckungsgleich gestapelt, unten-mittig verankert (Füße auf
   einer Linie, egal wie breit die Pose ist), Crossfade beim Umschalten. */
.tancho-pose {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  opacity: 0;
  transition: opacity .3s ease;
}

.tsuru[data-zustand="idle"] .tancho-pose-idle { opacity: 1; }
.tsuru[data-zustand="thinking"] .tancho-pose-thinking { opacity: 1; }
.tsuru[data-zustand="concerned"] .tancho-pose-concerned { opacity: 1; }
.tsuru[data-zustand="evolving"] .tancho-pose-evolving { opacity: 1; }

/* Tanchō bemerkt einen Besucher (js/besucher.js setzt kurz .schaut-hin):
   rein visueller Blick über die thinking-Pose - die Zustandsmaschine
   (data-zustand) und das aria-label bleiben unberührt, es ist eine Geste,
   kein Zustand. Greift bewusst NUR im Ruhezustand: ein denkender,
   besorgter oder wachsender Kranich lässt sich nicht ablenken. */
.tsuru[data-zustand="idle"].schaut-hin .tancho-pose-idle { opacity: 0; }
.tsuru[data-zustand="idle"].schaut-hin .tancho-pose-thinking { opacity: 1; }

/* Nachts schläft Tanchō: die thinking-Pose (geschlossene Augen, gesenkter
   Kopf) wird zur Schlaf-Pose, das Atmen wird tief und langsam. Rein
   visuell und nur im Ruhezustand - beginnt der Mensch ein Gespräch,
   wacht der Kranich auf (echte Zustände übersteuern den Schlaf), und
   das aria-label bleibt "ruht" (schlafen IST ruhen). */
/* Seit 20.08.2026 (Lieferung 7): Der Nachtschlaf hat eine ECHTE
   Schlaf-Pose - js/japan_lebenszustand.js tauscht nachts das idle-Bild
   gegen zustaende/schlaeft.png (Kopf im Rückengefieder). Der frühere
   Behelf (thinking-Pose als Schlafhaltung einblenden) ist damit
   Geschichte; geblieben ist nur der verlangsamte Nacht-Atem. */
body[data-tageszeit="nacht"] .tsuru[data-zustand="idle"] .tsuru-rig { animation-duration: 8s; }

/* idle: ruhiges Atmen. thinking: langsameres, meditatives Atmen (die Pose
   selbst traegt den geneigten Kopf mit geschlossenen Augen). */
.tsuru[data-zustand="idle"] .tsuru-rig { animation: tsuru-atmen 4.6s ease-in-out infinite; }
.tsuru[data-zustand="thinking"] .tsuru-rig { animation: tsuru-atmen 3.4s ease-in-out infinite; }

/* concerned: die Pose ist bereits geduckt/aufgeplustert (echtes Artwork,
   kein Farbfilter mehr noetig) - dazu leichtes Plustern + unruhiges
   Flackern (zwei Animationen, verschiedene Eigenschaften). */
.tsuru[data-zustand="concerned"] .tsuru-rig {
  animation: tsuru-plustern 2.4s ease-in-out infinite,
             tsuru-flackern-unruhig 2.4s ease-in-out infinite;
}

/* evolving: die Pose traegt die weit geoeffneten Fluegel - dazu der kurze
   Schwebe-Moment mit Aufleuchten (einmalig, faellt mit dem Impuls in
   tsuru.js zusammen und blendet danach auf idle zurueck). */
.tsuru[data-zustand="evolving"] .tsuru-rig { animation: tsuru-schweben 1.6s ease-out 1; }

/* ---------- Keyframes: ausschließlich transform/opacity/filter ---------- */
@keyframes tsuru-atmen {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.03); }
}
@keyframes tsuru-flackern-unruhig {
  0%, 100% { opacity: 1; }
  38% { opacity: .88; }
  46% { opacity: 1; }
  61% { opacity: .92; }
  70% { opacity: 1; }
  85% { opacity: .86; }
}
@keyframes tsuru-plustern {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.035, .972); }
}
@keyframes tsuru-schweben {
  0% { transform: translateY(0) scale(1); filter: brightness(1); }
  35% { transform: translateY(-6px) scale(1.08); filter: brightness(1.25); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .tsuru-rig, .tancho-pose { transition: none; animation: none !important; }
  /* Sprechblase: erscheint/verschwindet ohne Bewegung, bleibt aber lesbar. */
  .tancho-blase { transition: none; transform: translate(-50%, 0); }
}