/* ===================================================================
   aeri-zustaende.css - die Launen, Teil 1: Ruhe, Erklären, Winken,
   Denken, Freude. Teil 2 in aeri-zustaende-2.css.

   Jede Laune ist nur eine Klasse am Wirtselement. Der Körper bleibt
   derselbe, es verschieben sich Winkel, Lider, Brauen, Mund und
   Beigaben. Alles mit Übergang, damit ein Wechsel mitten im Blick
   nicht springt.

   ⚠ Eine laufende Animation schlägt jeden festen transform-Wert, den
   man daneben schreibt. Wo eine Haltung eine laufende Bewegung ersetzt,
   braucht sie eigene Keyframes - nicht `transform:` neben `animation:`.
   =================================================================== */

/* --- 1. Ruhe ------------------------------------------------------- */
/* Der Grundzustand steckt schon in aeri.css und aeri-gesicht.css. */

/* --- 2. Erklären: ein Flügel zeigt hin, der Mund spricht ----------- */

.aeri--erklaeren.aeri--blick-rechts .aeri-neigung { transform: rotate(3.5deg); }
.aeri--erklaeren.aeri--blick-links  .aeri-neigung { transform: rotate(-3.5deg); }

/* Der zeigende Flügel - je nach Blickrichtung der eine oder der andere. */
.aeri--erklaeren.aeri--blick-rechts .aeri-fluegel--rechts,
.aeri--erklaeren.aeri--blick-links  .aeri-fluegel--links {
    animation: aeri-zeigen 2.6s ease-in-out infinite;
}

.aeri--erklaeren.aeri--blick-rechts .aeri-fluegel--links,
.aeri--erklaeren.aeri--blick-links  .aeri-fluegel--rechts {
    animation-duration: 2.6s;
}

.aeri--erklaeren.aeri--blick-rechts .aeri-fluegel--rechts .aeri-fluegelspitze,
.aeri--erklaeren.aeri--blick-links  .aeri-fluegel--links .aeri-fluegelspitze {
    opacity: 1;
    animation: aeri-spitzenpuls 1.6s ease-in-out infinite;
}

.aeri--erklaeren .aeri-kamm--rechts { transform: rotate(-7deg); animation: none; }
.aeri--erklaeren .aeri-mund-ruhe    { opacity: 0; }
.aeri--erklaeren .aeri-mund-offen   {
    opacity: .88;
    transform-box: fill-box;
    transform-origin: top center;
    animation: aeri-sprechen 1.1s ease-in-out infinite;
}

/* Weit angehoben sieht der Flügel abgeknickt aus. Wenig reicht zum Zeigen. */
@keyframes aeri-zeigen {
    0%, 100% { transform: rotate(-13deg); }
    50%      { transform: rotate(-19deg); }
}

@keyframes aeri-sprechen {
    0%, 100% { transform: scaleY(.55); }
    50%      { transform: scaleY(1); }
}

@keyframes aeri-spitzenpuls {
    0%, 100% { opacity: .45; }
    50%      { opacity: 1; }
}

/* --- 3. Winken: die Begrüßung ------------------------------------- */

.aeri--winken .aeri-schweben { animation: aeri-wippen 1.8s ease-in-out infinite; }

.aeri--winken.aeri--blick-rechts .aeri-fluegel--rechts,
.aeri--winken.aeri--blick-links  .aeri-fluegel--links {
    animation: aeri-winken .82s ease-in-out infinite;
}

.aeri--winken.aeri--blick-rechts .aeri-fluegel--links,
.aeri--winken.aeri--blick-links  .aeri-fluegel--rechts {
    animation-duration: 1.8s;
}

.aeri--winken.aeri--blick-rechts .aeri-neigung { transform: rotate(4deg); }
.aeri--winken.aeri--blick-links  .aeri-neigung { transform: rotate(-4deg); }

.aeri--winken .aeri-kamm--rechts { transform: rotate(-11deg); animation: none; }
.aeri--winken .aeri-mund-ruhe    { opacity: 0; }
.aeri--winken .aeri-mund-freude  { opacity: .9; }
.aeri--winken .aeri-lid {
    transform-origin: bottom center;
    transform: scaleY(.4);
    animation: none;
}

/* Höher gehoben schwingt die Flügelwurzel unter dem Leib hervor und sieht
   aus wie eine zweite Flosse. Zweiundzwanzig Grad reichen zum Winken. */
@keyframes aeri-winken {
    0%, 100% { transform: rotate(-22deg); }
    50%      { transform: rotate(-32deg); }
}

@keyframes aeri-wippen {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(2px); }
}

/* --- 4. Denken: Blick nach oben, drei Punkte steigen -------------- */

.aeri--denken .aeri-neigung   { transform: rotate(-5deg); }
.aeri--denken .aeri-kamm--rechts { transform: rotate(-12deg); animation: none; }

.aeri--denken.aeri--blick-rechts .aeri-auge { transform: translate(2px, -2.5px); }
.aeri--denken.aeri--blick-links  .aeri-auge { transform: translate(-2px, -2.5px); }

/* Eine hochgezogene Braue - das Zeichen für "ich überlege noch". */
.aeri--denken .aeri-braue--rechts {
    opacity: .8;
    transform: translateY(-4px) rotate(-6deg);
}

.aeri--denken .aeri-denken    { opacity: 1; }
.aeri--denken .aeri-denken circle {
    animation: aeri-steigen 2.4s ease-in-out infinite;
}
.aeri--denken .aeri-denken circle:nth-child(2) { animation-delay: .28s; }
.aeri--denken .aeri-denken circle:nth-child(3) { animation-delay: .56s; }

@keyframes aeri-steigen {
    0%   { opacity: 0; transform: translate(-4px, 6px) scale(.6); }
    35%  { opacity: 1; transform: none; }
    75%  { opacity: .85; transform: translate(2px, -3px); }
    100% { opacity: 0; transform: translate(5px, -8px) scale(.85); }
}

/* --- 5. Freude: Hüpfer, Kulleraugen, Funken ----------------------- */

.aeri--freude .aeri-schweben {
    animation: aeri-huepfen 1.35s cubic-bezier(.3, .7, .3, 1) infinite;
}
.aeri--freude .aeri-fluegel      { animation-duration: 1.35s; }
.aeri--freude .aeri-schweif      { animation-duration: 1.35s; }
.aeri--freude .aeri-pfuetze      { animation-duration: 1.35s; }
.aeri--freude .aeri-kamm--rechts { transform: rotate(-14deg) translateY(-2px); animation: none; }
.aeri--freude .aeri-mund-ruhe    { opacity: 0; }
.aeri--freude .aeri-mund-freude  { opacity: .9; }
.aeri--freude .aeri-bloom        { animation-duration: 2.4s; }

/* Das Lid steigt hier von UNTEN. Von oben zugezogen wirkt derselbe Spalt
   grantig statt froh - der Unterschied zwischen "^^" und einem Blick unter
   halb geschlossenen Deckeln. */
.aeri--freude .aeri-lid {
    transform-origin: bottom center;
    transform: scaleY(.48);
    animation: none;
}

.aeri--freude .aeri-funken { opacity: 1; }
.aeri--freude .aeri-funken g use {
    transform-box: fill-box;
    transform-origin: center;
    animation: aeri-funkeln 1.9s ease-in-out infinite;
}
.aeri--freude .aeri-funken g:nth-child(2) use { animation-delay: .5s; }
.aeri--freude .aeri-funken g:nth-child(3) use { animation-delay: .95s; }

@keyframes aeri-huepfen {
    0%, 100% { transform: translateY(2px); }
    30%      { transform: translateY(-9px); }
    55%      { transform: translateY(-2px); }
}

/* Der eigene Ursprung der Funken bleibt erhalten: skaliert wird um sich selbst,
   die Platzierung steckt in der Gruppe darüber. */
@keyframes aeri-funkeln {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(-25deg); }
    45%      { opacity: 1; transform: scale(1) rotate(10deg); }
}