/* =========================================================
   KB MOTION FRAMEWORK
========================================================= */

/* Base */
.kb-motion{
    opacity:0;
    will-change:transform, opacity;
    animation-duration:1s;
    animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
}

/* Visible */
.kb-motion.kb-inview{
    opacity:1;
}

/* Delays */
.kb-delay-1{ animation-delay:.15s; }
.kb-delay-2{ animation-delay:.3s; }
.kb-delay-3{ animation-delay:.45s; }
.kb-delay-4{ animation-delay:.6s; }
.kb-delay-5{ animation-delay:.75s; }

/* =========================================================
   MOVE UP
========================================================= */

.kb-move-up.kb-inview{
    animation-name:kbMoveUp;
}

@keyframes kbMoveUp{
    from{
        opacity:0;
        transform:translate3d(0,80px,0);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}

/* =========================================================
   MOVE DOWN
========================================================= */

.kb-move-down.kb-inview{
    animation-name:kbMoveDown;
}

@keyframes kbMoveDown{
    from{
        opacity:0;
        transform:translate3d(0,-80px,0);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}

/* =========================================================
   MOVE LEFT
========================================================= */

.kb-move-left.kb-inview{
    animation-name:kbMoveLeft;
}

@keyframes kbMoveLeft{
    from{
        opacity:0;
        transform:translate3d(80px,0,0);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}

/* =========================================================
   MOVE RIGHT
========================================================= */

.kb-move-right.kb-inview{
    animation-name:kbMoveRight;
}

@keyframes kbMoveRight{
    from{
        opacity:0;
        transform:translate3d(-80px,0,0);
    }
    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}

/* =========================================================
   SCALE
========================================================= */

.kb-scale-up.kb-inview{
    animation-name:kbScaleUp;
}

@keyframes kbScaleUp{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/* =========================================================
   BLUR UP
========================================================= */

.kb-blur-up{
    filter:blur(20px);
}

.kb-blur-up.kb-inview{
    animation-name:kbBlurUp;
}

@keyframes kbBlurUp{
    from{
        opacity:0;
        filter:blur(20px);
        transform:translate3d(0,40px,0);
    }
    to{
        opacity:1;
        filter:blur(0);
        transform:translate3d(0,0,0);
    }
}

/* =========================================================
   IMAGE REVEAL
========================================================= */

.kb-reveal{
    overflow:hidden;
}

.kb-reveal img{
    transform:scale(1.2);
    transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}

.kb-reveal.kb-inview img{
    transform:scale(1);
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce){

    .kb-motion{
        animation:none !important;
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
        filter:none !important;
    }

}