/* Animations */


/* Make a block wobble horizontally */

@keyframes wobble-horizontal {
    16% {
        transform: translateX(6px);
    }
    32% {
        transform: translateX(-4px);
    }
    48% {
        transform: translateX(3px);
    }
    64% {
        transform: translateX(-2px);
    }
    80% {
        transform: translateX(1px);
    }
    100% {
        transform: translateX(0px);
    }
}

/* Make a block wobble vertically */

@keyframes wobble-vertical {
    16% {
        transform: translateY(8px);
    }
    32% {
        transform: translateY(-6px);
    }
    48% {
        transform: translateY(5px);
    }
    64% {
        transform: translateY(-4px);
    }
    80% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* 
 * Make a block drop from the top of the browser window
 * with a little wobble effect at the end 
 */

@keyframes wobble-from-top {
    0% {
        transform: translateY(-1000px);
    }
    30% {
        transform: translateY(-500px);
    }
    80% {
        transform: translateY(65px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Make a block drop 50 pixels from its original position and wobble */

@keyframes wobble-down {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(50px);
    }
    70% {
        transform: translateY(-3px);
    }
    90% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Add a dropdown effect to the mobile navigation bar */
@keyframes dropdown-nav {
    0% {
        transform: translateY(-250px);
    }
    20% {
        transform: translateY(-200px);
    }
    40% {
        transform: translateY(-150px);
    }
    60% {
        transform: translateY(-100px);
    }
    80% {
        transform: translateY(-50px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes fold-top {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(-50px);
    }
    40% {
        transform: translateY(-100px);
    }
    60% {
        transform: translateY(-150px);
    }
    80% {
        transform: translateY(-200px);
    }
    100% {
        transform: translateY(-250px);
    }
}

/* Make a block slide in to the left
 * from the right side of the browser window,
 * eventually creating a wobble effect at the end
 */

@keyframes wobble-from-right {
    0% {
        transform: translateX(5000px);
    }
    40% {
        transform: translateX(-46px);
    }
    42.5% {
        transform: translateX(-46px);

    }
    50% {
        transform: translateX(50px);
    }
    60% {
        transform: translateX(-10px);
    }
    70% {
        transform: translateX(5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Make a block wobble slightly,
 * moving more to the left side as if its right side was hit by something
 */

@keyframes wobble-left {
    0% {
        transform: translateX(0px);
    }
    10% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(-50px);
    }
    75% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0px);
    }
}


/*
 * Make a block's background change its color gradually from right to left
 */
 @keyframes sweep-to-left {
    0% {
        background: linear-gradient(to left, var(--primary-bg) 0%, var(--nav-bg) 0%);
    }
    5% {
        background: linear-gradient(to left, var(--primary-bg) 5%, var(--nav-bg) 5%);
    }
    10% {
        background: linear-gradient(to left, var(--primary-bg)10%, var(--nav-bg) 10%);
    }
    15% {
        background: linear-gradient(to left, var(--primary-bg) 15%, var(--nav-bg) 15%);
    }
    20% {
        background: linear-gradient(to left, var(--primary-bg) 20%, var(--nav-bg)20%);
    }
    25% {
        background: linear-gradient(to left, var(--primary-bg) 25%, var(--nav-bg) 25%);
    }
    30% {
        background: linear-gradient(to left, var(--primary-bg) 30%, var(--nav-bg) 30%);
    }
    35% {
        background: linear-gradient(to left, var(--primary-bg) 35%, var(--nav-bg) 35%);
    }
    40% {
        background: linear-gradient(to left, var(--primary-bg) 40%, var(--nav-bg) 40%);
    }
    45% {
        background: linear-gradient(to left, var(--primary-bg) 45%, var(--nav-bg) 45%);
    }
    50% {
        background: linear-gradient(to left, var(--primary-bg) 50%, var(--nav-bg) 50%);
    }
    55% {
        background: linear-gradient(to left, var(--primary-bg) 55%, var(--nav-bg) 55%);
    }
    60% {
        background: linear-gradient(to left, var(--primary-bg) 60%, var(--nav-bg) 60%);
    }
    65% {
        background: linear-gradient(to left, var(--primary-bg) 65%, var(--nav-bg) 65%);
    }
    70% {
        background: linear-gradient(to left, var(--primary-bg) 70%, var(--nav-bg) 70%);
    }
    75% {
        background: linear-gradient(to left, var(--primary-bg) 75%, var(--nav-bg) 75%);
    }
    80% {
        background: linear-gradient(to left, var(--primary-bg) 80%, var(--nav-bg) 80%);
    }
    85% {
        background: linear-gradient(to left, var(--primary-bg) 85%, var(--nav-bg) 85%);
    }
    90% {
        background: linear-gradient(to left, var(--primary-bg) 90%, var(--nav-bg) 90%);
    }
    95% {
        background: linear-gradient(to left, var(--primary-bg) 95%, var(--nav-bg) 95%);
    }
    100% {
        background: linear-gradient(to left, var(--primary-bg) 100%, var(--nav-bg) 100%);
    }
}

/* Scale the img-icon and move it to the center of the display */
@keyframes scale-to-center {
    0% {
        height: 5rem;
        width: 5rem;
        transform: translate(0%, 0%);
    }
    100% {
        height: 80%;
        width: 80%;
        transform: translate(12.5%, 12.5%);
    }
}