$timing-default:        ease-out;
$timing-bounce:         cubic-bezier(0, 1.02, .32, 1.34); // easeOutBack, modified: http://cubic-bezier.com/#0,1.02,.32,1.34

//
// Transitions
//
@mixin transition {
    transition: all .2s ease-out;
}

.transition {
    @include transition;
}

.fade {
    @include transition;
    opacity: 0;

    &.in {
        opacity: 1;
    }
}


//
// Custom animations
//
@mixin animation-fade-in {
    animation: fade-in .2s $timing-default;
}

.animation-fade-in {
    @include animation-fade-in;

    &.paused {
        animation-play-state: paused;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

// smooooothly slide in from bottom
@mixin animation-slide-in-from-bottom {
    animation: slide-in-from-bottom .7s $timing-bounce;
}

.animation-slide-in-from-bottom {
    @include animation-slide-in-from-bottom;

    &.paused {
        animation-play-state: paused;
    }
}

@keyframes slide-in-from-bottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}