@keyframes scrollLeft {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: calc(var(--tileWidth) * -1);
    }
}

@keyframes swim {
    0% {
        transform: rotateY(-30deg);
    }

    50% {
        transform: rotateY(30deg);
    }

    100% {
        transform: rotateY(-30deg);
    }
}

@keyframes ground-wiggle {
    0% {
        transform: scale(1.4) translateX(5%);
    }

    50% {
        transform: scale(1.4) translateX(-5%);
    }

    100% {
        transform: scale(1.4) translateX(5%);
    }
}

@keyframes oxy-rest {
    0% {
        transform: translateY(5%) rotate(5deg);
    }

    25% {
        transform: translateY(-5%) rotate(0deg);
    }

    50% {
        transform: translateY(5%) rotate(-5deg);
    }

    75% {
        transform: translateY(-5%) rotate(0deg);
    }

    100% {
        transform: translateY(5%) rotate(5deg);
    }
}

@keyframes bubbles {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-10%, -15%);
    }

    20% {
        transform: translate(0, -30%);
    }

    30% {
        transform: translate(10%, -45%);
    }

    40% {
        transform: translate(0, -60%);
    }

    50% {
        transform: translate(-10%, -75%);
    }

    60% {
        transform: translate(0, -100%);
    }

    70% {
        transform: translate(10%, -115%);
    }

    80% {
        transform: translate(0, -130%);
    }

    90% {
        transform: translate(-10%, -145%);
    }

    100% {
        transform: translate(0, -160%);
    }
}

@keyframes bubbles-down {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-10%, 15%);
    }

    20% {
        transform: translate(0, 30%);
    }

    30% {
        transform: translate(10%, 45%);
    }

    40% {
        transform: translate(0, 60%);
    }

    50% {
        transform: translate(-10%, 75%);
    }

    60% {
        transform: translate(0, 100%);
    }

    70% {
        transform: translate(10%, 115%);
    }

    80% {
        transform: translate(0, 130%);
    }

    90% {
        transform: translate(-10%, 145%);
    }

    100% {
        transform: translate(0, 160%);
    }
}

@keyframes seaweed {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: calc(100% * 6);
    }
}

@keyframes eyes {
    0% {
        opacity: 0;
    }

    69% {
        opacity: 0;
    }
    70% {
        opacity: 1;
    }

    79% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }

    84% {
        opacity: 0;
    }
    85% {
        opacity: 1;
    }

    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}