/* =====================================================
   CRESTBRIDGE PREMIUM DESIGN SYSTEM
   Animations v3.1
   Global Animation Utilities
===================================================== */


/* =====================================================
   REVEAL ANIMATIONS
===================================================== */

.reveal{

    opacity:0;

    transform:translateY(24px);

    transition:
        opacity var(--duration) var(--ease),
        transform var(--duration) var(--ease);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/* =====================================================
   REVEAL MODIFIERS
===================================================== */

.reveal-left{

    transform:translateX(-30px);

}

.reveal-right{

    transform:translateX(30px);

}

.reveal-scale{

    transform:scale(.94);

}


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

.reveal-delay-1{

    transition-delay:.08s;

}

.reveal-delay-2{

    transition-delay:.16s;

}

.reveal-delay-3{

    transition-delay:.24s;

}


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

.fade{

    opacity:0;

    transition:opacity var(--duration) var(--ease);

}

.fade.active{

    opacity:1;

}


/* =====================================================
   HERO ENTRANCE
===================================================== */

.hero-content{

    animation:
        heroContentIn var(--duration-slow) var(--ease) forwards;

}

.hero-image{

    animation:
        heroImageIn var(--duration-slow) var(--ease) forwards;

}


@keyframes heroContentIn{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes heroImageIn{

    from{

        opacity:0;

        transform:translateX(30px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


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

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

    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}