/* Intro animation. Pulls waves up into view. */
@keyframes waves-enter{
    0% {
        transform: translateY(75vw);
    }

    to {
        transform: translateY(0);
    }
}

/* Primary wave animation. Just pulls them to the left on loop. */
@keyframes left{
    from {
        transform: translateX(0) translateZ(0);
    }

    to {
        transform: translateX(-800vw) translateZ(0);
    }
}

/* Animations */
#wave1{
    animation: left infinite linear 50s, waves-enter 7s;
    animation-delay: 7s, 0s;
}

#wave2{
    animation: left infinite linear 30s, waves-enter 6s;
    animation-delay: 6s, 0s;
}

/* Wave generic */
.wave{
    opacity: var(--wave-opacity);
    background-size: 800vw 100vh;
    background-repeat: repeat-x;
    width: 1200vw;
    will-change: transform;
}

/* Subtle gradient */
#background{
    position: fixed;
    background-image: var(--backdrop-gradient);
    z-index: -1;
}

/* Noise to smooth out any banding in the gradient */
#noise > div:first-child{
    background-image: url("../assets/71noise.png");
    height: 100vh;
    opacity: 0.05;
}

#noise > div:last-child{
    background-image: url("../assets/109noise.png");
    height: 100vh;
    opacity: 0.02;
}

/* Background's just grey by default, but with a pinch of JS, we can tint it a random color. */
#tint{
    background: var(--tint-color);
    opacity: var(--tint-strength);
}