/* ===================================================================
   aeri-gesicht.css - Augen, Brauen, Mund. Version 2.

   Das Gesicht hat eine eigene Datei bekommen, weil hier der ganze
   Ausdruck sitzt: ein Grad Neigung an einer Braue entscheidet zwischen
   "tut mir leid" und "genervt".
   =================================================================== */

/* --- Augen --------------------------------------------------------- */

.aeri-auge {
    transform-box: view-box;
    transform-origin: 100px 96px;
    transition: transform .4s cubic-bezier(.2, .8, .25, 1);
}

.aeri-augapfel {
    fill: var(--aeri-dunkel);
}

/* Ein Ring aus dem Blau des Leibes im Auge: dadurch wirkt es rund und
   nicht wie ein schwarzes Loch. */
.aeri-regenbogen {
    fill: none;
    stroke: #1e40af;
    stroke-width: 2.6;
    opacity: .55;
}

/* Rücklicht: der Schein, den der leuchtende Bauch ins Auge wirft. */
.aeri-ruecklicht {
    fill: #3b82f6;
    opacity: .5;
}

.aeri-augpunkt {
    fill: #ffffff;
    opacity: .92;
}

.aeri-augpunkt--klein {
    opacity: .5;
}

/* Das Lid ist etwas größer als das Auge und klappt von oben zu. */
.aeri-lid {
    fill: url(#aeri-lidhaut);
    transform-box: fill-box;
    transform-origin: top center;
    transform: scaleY(0);
    transition: transform .28s cubic-bezier(.3, .7, .2, 1);
}

.aeri-auge--links .aeri-lid,
.aeri-auge--rechts .aeri-lid {
    animation: aeri-blinzeln 6.4s ease-in-out infinite;
}

.aeri-auge--rechts .aeri-lid {
    animation-delay: .04s;
}

@keyframes aeri-blinzeln {
    0%, 93.5%, 100% { transform: scaleY(0); }
    95.5%, 96.5%    { transform: scaleY(1); }
}

.aeri-wimper {
    fill: none;
    stroke: var(--aeri-dunkel);
    stroke-width: 2.4;
    stroke-linecap: round;
    opacity: 0;
    transition: opacity .3s ease;
}

/* --- Brauen -------------------------------------------------------
   Unsichtbar, solange nichts zu sagen ist. Erst eine Laune holt sie
   hervor. Gedreht wird um das ÄUSSERE Ende: hebt sich das innere,
   wird daraus Mitgefühl - hebt sich das äußere, Ärger. Aeri kennt nur
   das erste.                                                          */

.aeri-braue {
    fill: none;
    stroke: var(--aeri-dunkel);
    stroke-width: 3.4;
    stroke-linecap: round;
    opacity: 0;
    transform-box: view-box;
    transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .25, 1);
}

.aeri-braue--links  { transform-origin: 73.5px 77px; }
.aeri-braue--rechts { transform-origin: 126.5px 77px; }

/* --- Mund ---------------------------------------------------------- */

/* :where() hält die Spezifität bei null - sonst schlägt diese Zeile jede
   einzelne Mundform, und Aeri hätte überhaupt keinen Mund. */
.aeri-mund :where(path) {
    opacity: 0;
    transition: opacity .25s ease;
}

.aeri-mund-ruhe,
.aeri-mund-sanft,
.aeri-mund-strich {
    fill: none;
    stroke: var(--aeri-dunkel);
    stroke-width: 3.2;
    stroke-linecap: round;
}

.aeri-mund-freude,
.aeri-mund-offen,
.aeri-mund-rund {
    fill: var(--aeri-dunkel);
}

/* Nur ein Mund je Laune. Der Ruhemund ist der voreingestellte. */
.aeri-mund-ruhe {
    opacity: .82;
}

/* --- Beigaben: Punkte, Funken, Schlummer, Frage -------------------- */

.aeri-beigaben > g {
    opacity: 0;
    pointer-events: none;
}

.aeri-denken circle {
    fill: #93c5fd;
}

.aeri-funken use {
    fill: #dbeafe;
}

.aeri-schlummer text,
.aeri-frage text,
.aeri-ausruf text {
    fill: #93c5fd;
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-weight: 600;
}

.aeri-wellen path {
    fill: none;
    stroke: #93c5fd;
    stroke-width: 3.4;
    stroke-linecap: round;
}