/* ===================================================================
   aeri.css - Gestalt und Grundbewegung. Version 2.
   Gesicht in aeri-gesicht.css, Launen in aeri-zustaende*.css.

   Bewegt wird ausschließlich mit transform und opacity. Kein top/left,
   keine Filter - damit Aeri auch zwei Dutzend Mal auf einer Seite ruhig
   läuft.
   =================================================================== */

aeri-tier {
    --aeri-groesse: 96px;
    --aeri-haut-mitte: #3b82f6;
    --aeri-dunkel: #0a1730;

    display: inline-block;
    width: var(--aeri-groesse);
    height: var(--aeri-groesse);
    line-height: 0;
    vertical-align: middle;
    /* Aeri fängt keine Klicks ab, wenn er nur begleitet. */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

aeri-tier[interaktiv] {
    pointer-events: auto;
    cursor: pointer;
}

.aeri-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* --- Schweben und Gleiten -----------------------------------------
   Zwei Bewegungen mit verschiedener Dauer: Heben und Senken in 5,2 s,
   das seitliche Legen in 7,4 s. Weil sich die beiden nie treffen,
   wiederholt sich keine Haltung sichtbar - das ist der Unterschied
   zwischen "schwebt" und "wackelt im Takt".                          */

.aeri-schweben {
    animation: aeri-schweben 5.2s ease-in-out infinite;
}

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

.aeri-drift {
    transform-box: view-box;
    transform-origin: 100px 110px;
    animation: aeri-drift 7.4s ease-in-out infinite;
}

@keyframes aeri-drift {
    0%, 100% { transform: rotate(-1.8deg); }
    50%      { transform: rotate(1.8deg); }
}

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

/* --- Flügel -------------------------------------------------------- */

.aeri-fluegel {
    transform-box: view-box;
    transform-origin: 126px 104px;
    animation: aeri-fluegelschlag 5.2s ease-in-out infinite;
    transition: transform .55s cubic-bezier(.2, .8, .25, 1);
}

/* Der eine Flügel geht dem anderen einen Hauch voraus. */
.aeri-fluegel--links {
    animation-delay: -.2s;
}

/* Abschlag schneller als Aufschwung - so schlägt kein Flügel gleichmäßig. */
@keyframes aeri-fluegelschlag {
    0%   { transform: rotate(-7deg); }
    42%  { transform: rotate(9deg); }
    100% { transform: rotate(-7deg); }
}

.aeri-fluegelkante {
    fill: none;
    stroke: #eff6ff;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: .22;
}

.aeri-fluegelstrahlen {
    fill: none;
    stroke: #eff6ff;
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: .1;
}

/* Das Spitzenlicht gehört zum Zeigen, nicht zum Dasein. */
.aeri-fluegelspitze {
    opacity: 0;
}

/* Die Vorderflügel sind ganz aus dem Bild genommen, nicht nur unsichtbar -
   sie liegen sonst als zweite Fläche über dem Leib und kosten bei jedem
   Aeri Zeichenzeit. */
.aeri-vorn {
    display: none;
    transform-box: view-box;
    transform-origin: 126px 104px;
}

/* Der Ladering läuft nur, wenn wirklich geladen wird. */
.aeri-ring {
    opacity: 0;
}

/* --- Kopfflösschen ------------------------------------------------- */

.aeri-kamm {
    transform-box: view-box;
    transform-origin: 106px 60px;
    transition: transform .45s cubic-bezier(.2, .8, .25, 1);
    animation: aeri-kammflattern 3.1s ease-in-out infinite;
}

.aeri-kamm--links {
    animation-delay: -.5s;
}

@keyframes aeri-kammflattern {
    0%, 100% { transform: rotate(2.5deg); }
    50%      { transform: rotate(-2.5deg); }
}

/* --- Schweif ------------------------------------------------------- */

.aeri-schweif {
    transform-box: view-box;
    transform-origin: 100px 140px;
    /* Der Schweif folgt dem Körper, statt mit ihm zu schwingen. */
    animation: aeri-schweif 5.2s ease-in-out -.45s infinite;
}

.aeri-schweif-spur {
    opacity: .28;
}

@keyframes aeri-schweif {
    0%, 100% { transform: rotate(5deg); }
    50%      { transform: rotate(-5deg); }
}

/* --- Licht --------------------------------------------------------- */

.aeri-bloom {
    animation: aeri-atem 6.6s ease-in-out infinite;
}

@keyframes aeri-atem {
    0%, 100% { opacity: .75; transform: scale(.97); }
    50%      { opacity: 1;   transform: scale(1.03); }
}

/* Die Pfütze wird heller und schmaler, wenn Aeri sinkt - dadurch bekommt
   das Schweben eine Höhe, statt nur eine Bewegung zu sein. */
.aeri-pfuetze {
    transform-box: view-box;
    transform-origin: 100px 171px;
    opacity: .3;
    animation: aeri-pfuetze 5.2s ease-in-out infinite;
}

@keyframes aeri-pfuetze {
    0%, 100% { opacity: .22; transform: scale(1.06, 1); }
    50%      { opacity: .42; transform: scale(.9, 1); }
}

.aeri-kern {
    animation: aeri-kernpuls 6.6s ease-in-out infinite;
}

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

/* --- Kleine Größen: Details weglassen, statt sie zu Grieß zu machen -- */

.aeri--klein .aeri-glanz,
.aeri--klein .aeri-bauch,
.aeri--klein .aeri-kern,
.aeri--klein .aeri-tiefe,
.aeri--klein .aeri-augenhoehle,
.aeri--klein .aeri-regenbogen,
.aeri--klein .aeri-ruecklicht,
.aeri--klein .aeri-augpunkt--klein,
.aeri--klein .aeri-wimper,
.aeri--klein .aeri-brauen,
.aeri--klein .aeri-schweif-spur,
.aeri--klein .aeri-fluegelstrahlen,
.aeri--klein .aeri-fluegelkante,
.aeri--klein .aeri-fluegelspitze,
.aeri--klein .aeri-bloom,
.aeri--klein .aeri-pfuetze,
.aeri--klein .aeri-beigaben {
    display: none;
}

.aeri--klein .aeri-rand {
    stroke-width: 3.4;
}

.aeri--klein .aeri-mund-ruhe,
.aeri--klein .aeri-mund-sanft {
    stroke-width: 4;
}

.aeri--mittel .aeri-augpunkt--klein,
.aeri--mittel .aeri-schweif-spur,
.aeri--mittel .aeri-fluegelstrahlen,
.aeri--mittel .aeri-augenhoehle {
    display: none;
}

.aeri--mittel .aeri-rand {
    stroke-width: 2.6;
}

/* --- Wer keine Bewegung will, bekommt keine ------------------------ */

@media (prefers-reduced-motion: reduce) {
    .aeri-svg,
    .aeri-svg * {
        animation: none !important;
        transition: none !important;
    }
}

/* Zum Anschauen einzelner Haltungen: Klasse an einem Vorfahren genügt. */
.aeri-still .aeri-svg * {
    animation-play-state: paused !important;
}