/*==================================================
            FALCON ANIMATION SYSTEM v1.0
==================================================*/

:root{

    --reveal-distance:48px;

    --reveal-duration:.95s;

    --reveal-ease:cubic-bezier(.22,.61,.36,1);

}


/*==================================================
            BASE
==================================================*/

.reveal{

    opacity:0;

    transition:

    opacity var(--reveal-duration) var(--reveal-ease),

    transform var(--reveal-duration) var(--reveal-ease),

    filter var(--reveal-duration) var(--reveal-ease);

    will-change:opacity,transform;

}

.reveal.in{

    opacity:1;

    transform:none;

    filter:none;

}


/*==================================================
            FROM BOTTOM
==================================================*/

.reveal-up{

    transform:

    translateY(var(--reveal-distance));

}


/*==================================================
            FROM TOP
==================================================*/

.reveal-down{

    transform:

    translateY(calc(var(--reveal-distance) * -1));

}


/*==================================================
            FROM LEFT
==================================================*/

.reveal-left{

    transform:

    translateX(calc(var(--reveal-distance) * -1));

}


/*==================================================
            FROM RIGHT
==================================================*/

.reveal-right{

    transform:

    translateX(var(--reveal-distance));

}


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

.reveal-scale{

    transform:scale(.92);

}


/*==================================================
            ZOOM
==================================================*/

.reveal-zoom{

    transform:scale(.82);

    filter:blur(10px);

}


/*==================================================
            ROTATE
==================================================*/

.reveal-rotate{

    transform:

    perspective(900px)

    rotateX(14deg)

    translateY(40px);

}


/*==================================================
            FADE ONLY
==================================================*/

.reveal-fade{

    transform:none;

}


/*==================================================
            DELAYS
==================================================*/

.delay-1{

    transition-delay:.08s;

}

.delay-2{

    transition-delay:.16s;

}

.delay-3{

    transition-delay:.24s;

}

.delay-4{

    transition-delay:.32s;

}

.delay-5{

    transition-delay:.40s;

}

.delay-6{

    transition-delay:.48s;

}

.delay-7{

    transition-delay:.56s;

}

.delay-8{

    transition-delay:.64s;

}


/*==================================================
            FAST
==================================================*/

.fast{

    --reveal-duration:.6s;

}


/*==================================================
            SLOW
==================================================*/

.slow{

    --reveal-duration:1.4s;

}


/*==================================================
            MOBILE
==================================================*/

@media(max-width:768px){

    :root{

        --reveal-distance:30px;

        --reveal-duration:.8s;

    }

}


/*==================================================
        ACCESSIBILITY
==================================================*/

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

    .reveal{

        opacity:1!important;

        transform:none!important;

        transition:none!important;

        filter:none!important;

    }

}