@layer properties {
    @property --elh {
        /* eye left height   */
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
    }
    @property --erx {
        /* eye right x pos   */
        syntax: '<percentage>';
        inherits: true;
        initial-value: 0%;
    }
    @property --fx {
        /* face x pos   */
        syntax: '<percentage>';
        inherits: true;
        initial-value: 0%;
    }
    @property --ealw {
        /* ear left w    */
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
    }
    @property --earw {
        /* ear right w    */
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
    }
    @property --erh {
        /* eye right height   */
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
    }
    @property --mh {
        /* mouth height   */
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
    }
    @property --mw {
        /* mouth width   */
        syntax: '<number>';
        inherits: true;
        initial-value: 1;
    }
}

:root {
    --surface: #111;
    --c: white;
    --c2: #9ae3dc;
    --c3: magenta;
}

.ai-bot {
    scale: 2;
    width: 34px;
    aspect-ratio: 1;
    position: relative;
    display: grid;
    place-items: center;
    -webkit-animation: blink 2.4s ease infinite, move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) infinite, mouth 1.2s ease-in infinite;
    animation: blink 2.4s ease infinite, move-head 4.2s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) infinite, mouth 1.2s ease-in infinite;
    .head {
        background: linear-gradient(var(--c) 80%, color-mix(in srgb, var(--c), black 30%), var(--c));
        border-radius: .375rem;
        position: absolute;
        width: 28px;
        height: 20px;
        &:before,
        &:after {
            content: '';
            position: absolute;
            left: -4px;
            top: 6px;
            width: 2px;
            height: 8px;
            background: var(--c, 1);
            border-radius: 2px 0 0 2px;
            scale: var(--ealw, 1) 1;
        }
        &:after {
            right: -4px;
            left: unset;
            border-radius: 0 2px 2px 0;
            scale: var(--earw, 1) 1;
        }
        .face {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            inset: 0 3px;
            background: var(--surface);
            translate: var(--fx) 0;
            border-radius: 4px;
            padding: 4px 4px 2px 4px;
            gap: 3px;
            &:before {
                content: '';
                background: var(--c);
                position: absolute;
                height: 1px;
                width: 10px;
                top: -2px;
                border-radius: 2px 2px 0 0;
                -webkit-mask: radial-gradient(circle at 50% 100%, transparent 45%, black 45%);
                mask: radial-gradient(circle at 50% 100%, transparent 45%, black 45%)
            }
            .eyes {
                display: flex;
                height: 8px;
                gap: 6px;
                &:before,
                &:after {
                    content: '';
                    width: 5px;
                    height: 8px;
                    scale: 1 var(--elh);
                    filter: drop-shadow( 0 0 2px var(--c2));
                    background: repeating-linear-gradient(to bottom, var(--c), var(--c) .25px, transparent .25px, transparent .6px), linear-gradient(to bottom, var(--c3), transparent 60%), var(--c2);
                    border-radius: 1px;
                    translate: var(--erx) 0;
                }
                &:after {
                    scale: 1 var(--erh);
                    translate: var(--erx) 0;
                }
            }
            .mouth {
                width: 10px;
                height: 2px;
                background: var(--c2);
                border-radius: 0 0 1px 1px;
                filter: drop-shadow( 0 0 2px var(--c2));
                scale: var(--mw, 1) var(--mh, 1);
            }
        }
    }
}

@layer animations {
    @-webkit-keyframes blink {
        from,
        10%,
        to {
            --elh: 1;
            --erh: 1;
        }
        2% {
            --elh: .2;
        }
        8% {
            --erh: .1;
        }
    }
    @keyframes blink {
        from,
        10%,
        to {
            --elh: 1;
            --erh: 1;
        }
        2% {
            --elh: .2;
        }
        8% {
            --erh: .1;
        }
    }
    @-webkit-keyframes mouth {
        from,
        30%,
        70%,
        to {
            --mh: 1;
            --mw: 1;
        }
        20% {
            --mh: .5;
        }
        60% {
            --mw: .7;
        }
    }
    @keyframes mouth {
        from,
        30%,
        70%,
        to {
            --mh: 1;
            --mw: 1;
        }
        20% {
            --mh: .5;
        }
        60% {
            --mw: .7;
        }
    }
    @-webkit-keyframes move-head {
        from,
        20%,
        40% to {
            --erx: 0% --fx: 0%;
            --ealw: 1;
            --earw: 1;
        }
        10% {
            --erx: 20%;
            --fx: 10%;
            --ealw: 1.5;
            --earw: .5;
        }
        30% {
            --erx: -20%;
            --fx: -10%;
            --ealw: .5;
            --earw: 1.5;
        }
    }
    @keyframes move-head {
        from,
        20%,
        40% to {
            --erx: 0% --fx: 0%;
            --ealw: 1;
            --earw: 1;
        }
        10% {
            --erx: 20%;
            --fx: 10%;
            --ealw: 1.5;
            --earw: .5;
        }
        30% {
            --erx: -20%;
            --fx: -10%;
            --ealw: .5;
            --earw: 1.5;
        }
    }
}