/* ==========================================================================
   Animation
   ========================================================================== */

.no-animation {
    animation: none;
}

/* ==========================================================================
   Add/Remove Elements
   ========================================================================== */

.add-element {
    animation: add-element .5s .25s ease-in-out both;
}
@keyframes add-element {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.remove-element {
    animation: remove-element 0s .5s linear both;
}
@keyframes remove-element {
    from { transform: scale(1); }
    to { transform: scale(0); }
}

/* ==========================================================================
   Fade In/Out
   ========================================================================== */

.fade-in {
    animation: fade-in .5s 0s ease-in-out forwards;
}

.fade-out {
    z-index: 0;
    animation: fade-out .3s 0s ease-in-out forwards;
}

.fade-in--slow { animation: fade-in .6s .25s ease-in-out forwards; }
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-out--slow { animation: fade-out .6s 0s ease-in-out forwards; }
@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==========================================================================
   Pulse
   ========================================================================== */

@keyframes pulse {
    0%, 100% {
        color: rgba(255, 255, 255, .5);
        background: rgba(255, 255, 255, .15);
    }
    50% {
        color: rgba(255, 255, 255, .8);
        background: rgba(255, 255, 255, .3);
    }
}

/* ==========================================================================
   On/Offscreen
   ========================================================================== */

.left-offscreen { animation: left-offscreen .25s 0s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes left-offscreen {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(-200%);
        opacity: 0;
    }
}

.left-onscreen { animation: left-onscreen .75s .35s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes left-onscreen {
    from {
        transform: translateX(-200%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.right-offscreen { animation: right-offscreen .25s 0s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes right-offscreen {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(200%);
        opacity: 0;
    }
}

.right-onscreen { animation: right-onscreen .5s .35s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes right-onscreen {
    from {
        transform: translateX(200%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.top-onscreen { animation: top-onscreen .5s .2s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes top-onscreen {
    from { transform: translateY(150%); }
    to { transform: translateY(0%); }
}

.top-offscreen { animation: top-offscreen .6s .25s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes top-offscreen {
    from { transform: translateY(0%); }
    to { transform: translateY(150%); }
}

.bottom-onscreen { animation: bottom-onscreen .7s .4s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes bottom-onscreen {
    from { transform: translateY(-150%); }
    to { transform: translateY(0%); }
}

.bottom-offscreen { animation: bottom-offscreen .6s .25s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes bottom-offscreen {
    from { transform: translateY(0%); }
    to { transform: translateY(-150%); }
}

/* ==========================================================================
   Slide
   ========================================================================== */

.slide-up { animation: slide-up .25s .4s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes slide-up {
    from { transform: translateY(200%); }
    to { transform: translateY(0px); }
}

.slide-down { animation: slide-down .3s .15s cubic-bezier(.41,.66,.54,.91) both; }
@keyframes slide-down {
    from { transform: translateY(0); }
    to { transform: translateY(150%); }
}

/* ==========================================================================
   Drift
   ========================================================================== */

.drift-up { animation: drift-up .25s .4s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes drift-up {
    from {
        transform: translateY(50%);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}

.drift-down { animation: drift-down .25s .4s cubic-bezier(0.19, 1, 0.22, 1) both; }
@keyframes drift-down {
    from {
        transform: translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ==========================================================================
   Scale Up/Down
   ========================================================================== */

.scale-up {
    transform: scale(0);
    animation: scale-up .35s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both,
               fade-in .35s .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes scale-up {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.scale-down {
    transform: scale(1);
    animation: scale-down .3s .2s cubic-bezier(0, 0, 0.2, 1) both,
               fade-out .35s .25s linear both;
}
@keyframes scale-down {
    from { transform: scale(1); }
    to { transform: scale(0); }
}

.scale-down {
    transform: scale(1);
    animation: scale-down .3s .2s cubic-bezier(0, 0, 0.2, 1) both,
               fade-out .35s .25s linear both;
}
@keyframes scale-down {
    from { transform: scaleY(1); }
    to { transform: scaleY(0); }
}

/* ==========================================================================
   Masks
   ========================================================================== */

.mask-from-left {
    -webkit-mask-image: linear-gradient(to right, black -5%, transparent 0%);
    animation: mask-from-left 1s .5s linear both;
}
@keyframes mask-from-left {
    0% {
        -webkit-mask-image: linear-gradient(to right, black -5%, transparent 0%);
    }
    10% {
        -webkit-mask-image: linear-gradient(to right, black 10%, transparent 20%);
    }
    20% {
        -webkit-mask-image: linear-gradient(to right, black 20%, transparent 30%);
    }
    30% {
        -webkit-mask-image: linear-gradient(to right, black 30%, transparent 40%);
    }
    40% {
        -webkit-mask-image: linear-gradient(to right, black 40%, transparent 50%);
    }
    50% {
        -webkit-mask-image: linear-gradient(to right, black 50%, transparent 60%);
    }
    60% {
        -webkit-mask-image: linear-gradient(to right, black 60%, transparent 70%);
    }
    70% {
        -webkit-mask-image: linear-gradient(to right, black 70%, transparent 80%);
    }
    80% {
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 90%);
    }
    90% {
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }
    100% {
        -webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
    }
}