/* VARIABLES */

:root {
    --main-color: rgb(127, 137, 163);
    --main-highlight: rgb(163, 173, 198);
    --main-shade: rgb(96, 104, 124);
    --blush: rgb(232, 184, 213);
    --catchlights: var(--c-ls);
    --border: 0px black solid;
    --size: 1.2;
}

/* ROBOT */

.robot {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25vh;
}

.antenna {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(var(--size) * 45px);
}

.antenna-left, .antenna-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: calc(var(--size) * 40px);
}

.antenna-stick-left {
    width: calc(var(--size) * 8px);
    height: calc(var(--size) * 20px);
    background-color: var(--main-shade);
    border: var(--border);
}

.antenna-stick-right {
    width: calc(var(--size) * 5px);
    height: calc(var(--size) * 11px);
    background-color: var(--main-shade);
    border: var(--border);
}

.antenna-ball-left {
    width: calc(var(--size) * 17px);
    height: calc(var(--size) * 17px);
    background-color: var(--c-la);
    border-radius: 3px;
    border: var(--border);
    animation: green-light 3s steps(5, start) infinite;
}

.antenna-ball-right {
    width: calc(var(--size) * 13px);
    height: calc(var(--size) * 13px);
    background-color: var(--c-mc);
    border-radius: 3px;
    border: var(--border);
    animation: blue-light 5s steps(5, start) infinite;
}

.head {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: calc(var(--size) * 140px);
    height: calc(var(--size) * 115px);
    background-color: var(--main-color);
    border-radius: 15px;
    border: var(--border);
}

.face {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(var(--size) * 110px);
    height: calc(var(--size) * 70px);
    margin-bottom: calc(var(--size) * 10px);
    padding-bottom: calc(var(--size) * 8px);
    background-color: var(--main-highlight);
    border-radius: 10px;
    border: var(--border);
}

.eyes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: calc(var(--size) * 75px);
    height: calc(var(--size) * 20px);
    margin-top: calc(var(--size) * 25px);
}

.eye-left, .eye-right {
    width: calc(var(--size) * 15px);
    background-color: var(--main-shade);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: var(--border);
    animation: blinking 4s steps(5, start) infinite;
}

.cheeks {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(var(--size) * 90px);
    height: calc(var(--size) * 7px);
}

.cheek-left, .cheek-right {
    width: calc(var(--size) * 23px);
    background-color: var(--blush);
    border-radius: 10px;
    border: var(--border);
    animation: blushing 2s steps(5, start) infinite;
}

.mouth {
    width: calc(var(--size) * 24px);
    height: calc(var(--size) * 7px);
    background-color: var(--main-shade);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: var(--border);
    animation: talking 0.8s steps(5, start) infinite;
}

.neck {
    width: calc(var(--size) * 40px);
    height: calc(var(--size) * 6px);
    background-color: var(--main-shade);
    border-radius: 3px;
    border: var(--border);
}

.body {
    width: calc(var(--size) * 80px);
    height: calc(var(--size) * 60px);
    background-color: var(--main-color);
    border-radius: 10px;
    border: var(--border);
}

#patch {
    position: relative;
    display: flex;
    align-items: flex-end;
}

#patch > div {
    position: absolute;
    right: 0;
    bottom: calc(var(--size) * -40px);
}

.patch {
    width: calc(var(--size) * 20px);
    height: calc(var(--size) * 18px);
    margin: calc(var(--size) * 10px);
    background-color: var(--main-highlight);
    border-radius: 5px;
    border: var(--border);
    animation: patch-open 10s steps(5, start) infinite;
}

.behind-patch {
    width: calc(var(--size) * 20px);
    height: calc(var(--size) * 18px);
    margin: calc(var(--size) * 10px);
    background-color: var(--main-shade);
    border-radius: 5px;
    border: var(--border);
}

.legs {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(var(--size) * 40px);
}

.leg-left, .leg-right {
    width: calc(var(--size) * 15px);
    height: calc(var(--size) * 6px);
    background-color: var(--main-shade);
    border-radius: 3px;
    border: var(--border);
}

.feet {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(var(--size) * 60px);
}

.foot-left, .foot-right {
    width: calc(var(--size) * 25px);
    height: calc(var(--size) * 7px);
    background-color: var(--main-color);
    border-radius: 4px;
    border: var(--border);
}

/* ANIMATIONS */

@keyframes blinking {
    /* Blink fast, twice */
    0% {
        height: calc(var(--size) * 0px);
    }

    5% {
        height: calc(var(--size) * 2px);
    }

    10% {
        height: calc(var(--size) * 20px);
    }

    20% {
        height: calc(var(--size) * 20px);
    }

    25% {
        height: calc(var(--size) * 2px);
    }

    30% {
        height: calc(var(--size) * 20px);
    }
    /* Wait */
    65% {
        height: calc(var(--size) * 20px);
    }
    /* Blink again */
    70% {
        height: calc(var(--size) * 2px);
    }

    75% {
        height: calc(var(--size) * 20px);
    }
    /* Wait */
    100% {
        height: calc(var(--size) * 20px);
    }
}

@keyframes patch-open {
    0% {
        height: calc(var(--size) * 18px);
    }

    50% {
        height: calc(var(--size) * 18px);
    }

    55% {
        height: calc(var(--size) * 3px);
    }

    95% {
        height: calc(var(--size) * 3px);
    }

    100% {
        height: calc(var(--size) * 18px);
    }
}

@keyframes green-light {
    0% {
        box-shadow: none;
    }

    10% {
        filter: brightness(130%);
        box-shadow: -5px -5px 10px #e1f8f4aa, 5px -5px 10px #e1f8f4aa;
    }

    15% {
        filter: brightness(100%);
    }

    20% {
        box-shadow: none;
    }
}

@keyframes blue-light {
    0% {
        box-shadow: none;
    }

    5% {
        filter: brightness(130%);
        box-shadow: -5px -5px 8px #e1f8f4aa, 5px -5px 8px #e1f8f4aa;
    }

    10% {
        filter: brightness(100%);
    }

    15% {
        box-shadow: none;
    }
}

@keyframes blushing {
    50% {
        filter: brightness(90%);
    }
}

@keyframes talking {
    20% {
        border-radius: 5px;
    }

    40% {
        width: calc(var(--size) * 30px);
    }

    60% {
        width: calc(var(--size) * 24px);
        height: calc(var(--size) * 15px);
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    80% {
        width: calc(var(--size) * 2px);
        height: calc(var(--size) * 2px);
    }

    100% {
        width: calc(var(--size) * 24px);
        height: calc(var(--size) * 7px);
    }
}