@keyframes code {
    0% {
        transform: translateX(0);
        opacity: 100%;
    }
    80% {
        transform: translateX(5em);
        opacity: 25%;
    }
    100% {
        transform: translate(5em);
        opacity: 0%;
    }
}
@keyframes compiler {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-10px, 10px);
    }
    40% {
        transform: translate(-10px, -10px);
    }
    60% {
        transform: translate(10px, 10px);
    }
    80% {
        transform: translate(10px, -10px);
        opacity: 100%;
    }
    100% {
        tranform: translate(0, 0);
        opacity: 0%;
    }
}
@keyframes bytecode {
    0% {
        transform: translateX(-5em);
        opacity: 0%;
    }
    50% {
        opacity: 100%;
    }
    80% {
        transform: translateX(5em);
        opacity: 5%;
    }
    100% {
        transform: translate(5em);
        opacity: 0%;
    }
}
@keyframes executable {
    0% {
        opacity: 0%;
    }
    30% {
        opacity: 0%;
    }
    70% {
        opacity: 100%;
        transform: translateX(0);
    }
    100% {
        opacity: 0%;
        transform: translateX(5em);
    }
}
@keyframes interpreter {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-10px, 10px);
    }
    40% {
        transform: translate(-10px, -10px);
    }
    60% {
        transform: translate(10px, 10px);
    }
    80% {
        transform: translate(10px, -10px);
    }
    100% {
        tranform: translate(0, 0);
    }
}
@keyframes instructions {
    0% {
        transform: translateX(-5em);
        opacity: 0%;
    }
    50% {
        opacity: 100%;
    }
    80% {
        transform: translateX(5em);
        opacity: 5%;
    }
    100% {
        transform: translate(5em);
        opacity: 0%;
    }
}

#anim-area {
    div {
        margin: 0 1em;
        padding: 0.3em;
        border: dashed #444 1px;
    }

    #code {
        color: #04ebb5;
    }

    #compiler, #interpreter {
        font-weight: bold;
    }

    #machine {
        color: #fa94ac;
    }
}
#anim:has(#animate-checkbox:checked) {
    #code {
        animation: code 1s forwards;
    }

    #compiler {
        animation: compiler linear 1s 0.8s forwards;
    }

    #bytecode {
        opacity: 0%;
        animation: bytecode 2s 1.6s;
    }

    #executable {
        opacity: 0%;
        animation: executable 3s 1.6s forwards;
    }

    #interpreter {
        animation: interpreter ease-in 1s 2.8s infinite;
    }

    #instructions {
        opacity: 0%;
        animation: instructions 1s 3.2s infinite;
    }
}