/*
 * ELION Avatar Engine 0.3
 * Darstellung und Bewegungen
 */

.avatar-stage {
    position: absolute;
    inset: 30px 10px 75px;

    display: grid;
    place-items: center;

    perspective: 1000px;
}

.elion-presence {
    width: min(100%, 470px);

    transform-origin: 50% 70%;

    transition:
        transform 2.8s cubic-bezier(.2,.7,.3,1);

    animation:
        elionBreathing 7s ease-in-out infinite;
}

@keyframes elionBreathing {
    0%,100% {
        translate: 0 0;
        scale: 1;
    }

    50% {
        translate: 0 -3px;
        scale: 1.004;
    }
}

.elion-svg {
    width: 100%;
    height: auto;

    overflow: visible;

    filter:
        drop-shadow(0 0 16px rgba(50,210,255,.55))
        drop-shadow(0 0 42px rgba(0,120,255,.24));
}

/* Körper */

.elion-body,
.elion-neck {
    fill: url(#bodyGradient);

    stroke: rgba(90,220,255,.62);
    stroke-width: 1.5;
}

/* Kopf */

.elion-face {
    fill: url(#faceGradient);

    stroke: #5cddff;
    stroke-width: 2;

    filter:
        drop-shadow(0 0 10px rgba(50,210,255,.28));
}

/* digitale Struktur */

.elion-circuit {
    fill: none;

    stroke: rgba(100,225,255,.72);
    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .78;
}

.elion-dot {
    fill: #83edff;
    opacity: .55;
}

/* Augen */

.elion-eye-white {
    fill: rgba(135,236,255,.16);

    stroke: #75e7ff;
    stroke-width: 1.5;
}

.elion-pupil {
    fill: #baf7ff;

    filter:
        drop-shadow(0 0 5px #7aefff)
        drop-shadow(0 0 12px #31c9ff);

    transition:
        transform .65s cubic-bezier(.2,.8,.3,1);
}

.elion-lid {
    fill: #0a568f;

    transform-box: fill-box;
    transform-origin: center;

    transition: transform .12s ease;
}

.avatar-blink .elion-lid {
    transform: scaleY(1);
}

.elion-lid {
    transform: scaleY(.02);
}

/* Brauen */

.elion-brow {
    fill: none;

    stroke: #9af0ff;
    stroke-width: 3;

    stroke-linecap: round;

    transition: d .45s ease;
}

/* Mund */

.elion-mouth {
    fill: none;

    stroke: #b7f5ff;
    stroke-width: 3;

    stroke-linecap: round;

    filter:
        drop-shadow(0 0 6px rgba(70,215,255,.8));

    transition: d .4s ease;
}

/* Brustkern */

.elion-core {
    fill: #9cf5ff;

    filter:
        drop-shadow(0 0 7px #39d7ff)
        drop-shadow(0 0 18px #168cff);

    animation:
        elionCore 3s ease-in-out infinite;
}

@keyframes elionCore {

    0%,100% {
        opacity: .63;
    }

    50% {
        opacity: 1;
    }
}

/* Status */

.avatar-state {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 16px;

    border-radius: 14px;

    border: 1px solid rgba(70,195,255,.18);

    background: rgba(2,15,32,.72);

    backdrop-filter: blur(12px);
}

.avatar-state strong {
    letter-spacing: 3px;
}

.avatar-state span {
    color: #61dcff;

    font-size: 12px;
}

/* Zuhören */

.avatar-listening .elion-core {
    animation-duration: 1.3s;
}

/* Sprechen */

.avatar-speaking .elion-mouth {
    animation:
        elionSpeak .34s ease-in-out infinite alternate;
}

@keyframes elionSpeak {

    from {
        stroke-width: 2.4;
    }

    to {
        stroke-width: 4.4;
    }
}

/* Rücksicht auf reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {

    .elion-presence,
    .elion-core,
    .avatar-speaking .elion-mouth {
        animation: none !important;
    }

}