/* ===================================================================
   aeri-zustaende-3.css - die Launen, Teil 3: Lauschen, Staunen,
   Zwinkern, Warnen.

   Vier Momente, die in Aerona wirklich vorkommen und für die es bisher
   keine Haltung gab: die KI hört zu, etwas Neues wird gezeigt, etwas
   ist bestätigt, etwas ist gleich unwiderruflich.
   =================================================================== */

/* --- 10. Lauschen: die Eingabe läuft, Aeri hört hin --------------- */

.aeri--lauschen .aeri-neigung      { transform: rotate(6deg) translateY(-2px); }
.aeri--lauschen .aeri-kamm--rechts { transform: rotate(-21deg); animation: none; }
.aeri--lauschen .aeri-kamm--links  { transform: rotate(-7deg); animation: none; }
.aeri--lauschen .aeri-auge         { transform: translate(2.5px, -1px); }
.aeri--lauschen .aeri-mund-ruhe    { opacity: 0; }
.aeri--lauschen .aeri-mund-strich  { opacity: .55; }
.aeri--lauschen .aeri-fluegel      { animation-duration: 3.4s; }

.aeri--lauschen .aeri-wellen { opacity: 1; }
.aeri--lauschen .aeri-wellen path {
    transform-box: fill-box;
    transform-origin: left center;
    animation: aeri-lauschen 2.2s ease-out infinite;
}
.aeri--lauschen .aeri-wellen path:nth-child(2) { animation-delay: .28s; }
.aeri--lauschen .aeri-wellen path:nth-child(3) { animation-delay: .56s; }

@keyframes aeri-lauschen {
    0%   { opacity: 0; transform: translateX(-5px) scaleX(.6); }
    35%  { opacity: .9; transform: none; }
    100% { opacity: 0; transform: translateX(6px) scaleX(1.1); }
}

/* --- 11. Staunen: etwas Neues ist da ----------------------------- */

.aeri--staunen .aeri-neigung      { transform: rotate(-3deg) translateY(-3px); }
.aeri--staunen .aeri-kamm--rechts,
.aeri--staunen .aeri-kamm--links  { transform: rotate(-17deg); animation: none; }
/* Weit aufgerissene Augen: die Gruppe dreht sich um die Gesichtsmitte,
   dadurch rücken beide Augen zugleich auseinander und werden größer. */
.aeri--staunen .aeri-auge         { transform: scale(1.1); }
.aeri--staunen .aeri-braue--links,
.aeri--staunen .aeri-braue--rechts { opacity: .75; transform: translateY(-6px); }
.aeri--staunen .aeri-mund-ruhe    { opacity: 0; }
.aeri--staunen .aeri-mund-rund    {
    opacity: .88;
    transform-box: fill-box;
    transform-origin: center;
    animation: aeri-staunen 2.8s ease-in-out infinite;
}
.aeri--staunen .aeri-bloom        { animation-duration: 3s; }

.aeri--staunen .aeri-funken { opacity: 1; }
.aeri--staunen .aeri-funken g use {
    transform-box: fill-box;
    transform-origin: center;
    animation: aeri-funkeln 2.6s ease-in-out infinite;
}
.aeri--staunen .aeri-funken g:nth-child(2) use { animation-delay: .7s; }
.aeri--staunen .aeri-funken g:nth-child(3) use { animation-delay: 1.35s; }

@keyframes aeri-staunen {
    0%, 100% { transform: scale(.88); }
    50%      { transform: scale(1.06); }
}

/* --- 12. Zwinkern: verstanden, unter uns ------------------------- */

.aeri--zwinkern .aeri-neigung       { transform: rotate(4deg); }
.aeri--zwinkern .aeri-kamm--rechts  { transform: rotate(-12deg); animation: none; }
.aeri--zwinkern .aeri-mund-ruhe     { opacity: 0; }
.aeri--zwinkern .aeri-mund-freude   { opacity: .88; }

/* Ein Auge bleibt offen - deshalb hier keine gemeinsame Regel für beide. */
.aeri--zwinkern .aeri-auge--links .aeri-lid {
    transform: scaleY(0);
    animation: none;
}
.aeri--zwinkern .aeri-auge--rechts .aeri-lid {
    animation: aeri-zwinkern 2.6s ease-in-out infinite;
}

/* Ohne Wimpernlinie sieht ein geschlossenes Auge nicht geschlossen aus,
   sondern weggenommen. Sie kommt und geht im selben Takt wie das Lid. */
.aeri--zwinkern .aeri-auge--rechts .aeri-wimper {
    animation: aeri-zwinkerwimper 2.6s ease-in-out infinite;
}

@keyframes aeri-zwinkern {
    0%, 52%, 100% { transform: scaleY(0); }
    60%, 80%      { transform: scaleY(1); }
}

@keyframes aeri-zwinkerwimper {
    0%, 54%, 100% { opacity: 0; }
    62%, 78%      { opacity: .65; }
}

/* --- 13. Warnen: gleich passiert etwas Unwiderrufliches ---------- */

/* Aeri warnt, er schimpft nicht: die Brauen gehen hoch, nicht zusammen.
   Nach unten gezogene Brauen wären Ärger - und Ärger passt nicht zum
   Ton (RULE 17). Die Warnfarbe liefert die Oberfläche, nicht das Tier. */

.aeri--warnen .aeri-schweben      { animation-duration: 3.4s; }
.aeri--warnen .aeri-drift         { animation: none; transform: none; }
.aeri--warnen .aeri-neigung       { transform: translateY(-4px); }
.aeri--warnen .aeri-kamm--rechts,
.aeri--warnen .aeri-kamm--links   { transform: rotate(-23deg); animation: none; }
.aeri--warnen .aeri-auge          { transform: scale(1.06); }
.aeri--warnen .aeri-braue--links,
.aeri--warnen .aeri-braue--rechts { opacity: .8; transform: translateY(-5px); }
.aeri--warnen .aeri-mund-ruhe     { opacity: 0; }
.aeri--warnen .aeri-mund-strich   { opacity: .8; }
.aeri--warnen .aeri-fluegel       { animation-duration: 3.4s; }

.aeri--warnen .aeri-ausruf { opacity: 1; }
.aeri--warnen .aeri-ausruf text {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: aeri-mahnen 1.5s ease-in-out infinite;
}
.aeri--warnen .aeri-bloom {
    animation: aeri-warnpuls 1.5s ease-in-out infinite;
}

@keyframes aeri-mahnen {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(1.18); }
    28%      { transform: scale(1); }
    40%      { transform: scale(1.12); }
    56%      { transform: scale(1); }
}

@keyframes aeri-warnpuls {
    0%, 100% { opacity: .7; transform: scale(.98); }
    20%      { opacity: 1; transform: scale(1.05); }
}

/* --- Bewegungsarm ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .aeri--lauschen .aeri-wellen path,
    .aeri--staunen .aeri-funken,
    .aeri--warnen .aeri-ausruf { opacity: 1; }

    .aeri--zwinkern .aeri-auge--rechts .aeri-lid { transform: scaleY(1); }
}