/* =========================================
   MORZO SocietyOS
   Animation System
========================================= */


/* =========================================
   GLOBAL TRANSITIONS
========================================= */


.animate {


    transition:

    var(--transition-normal);


}




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


@keyframes fadeIn {


    from {


        opacity:

        0;


    }


    to {


        opacity:

        1;


    }


}



.fade-in {


    animation:

    fadeIn

    0.6s ease forwards;


}





@keyframes fadeUp {


    from {


        opacity:

        0;


        transform:

        translateY(30px);


    }


    to {


        opacity:

        1;


        transform:

        translateY(0);


    }


}



.fade-up {


    animation:

    fadeUp

    0.6s ease forwards;


}





@keyframes fadeDown {


    from {


        opacity:

        0;


        transform:

        translateY(-30px);


    }


    to {


        opacity:

        1;


        transform:

        translateY(0);


    }


}



.fade-down {


    animation:

    fadeDown

    0.6s ease forwards;


}





/* =========================================
   SLIDE ANIMATIONS
========================================= */


@keyframes slideLeft {


    from {


        opacity:

        0;


        transform:

        translateX(40px);


    }


    to {


        opacity:

        1;


        transform:

        translateX(0);


    }


}



.slide-left {


    animation:

    slideLeft

    0.5s ease forwards;


}





@keyframes slideRight {


    from {


        opacity:

        0;


        transform:

        translateX(-40px);


    }


    to {


        opacity:

        1;


        transform:

        translateX(0);


    }


}



.slide-right {


    animation:

    slideRight

    0.5s ease forwards;


}





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


@keyframes scaleIn {


    from {


        opacity:

        0;


        transform:

        scale(0.95);


    }


    to {


        opacity:

        1;


        transform:

        scale(1);


    }


}



.scale-in {


    animation:

    scaleIn

    0.4s ease forwards;


}





/* =========================================
   BUTTON EFFECTS
========================================= */


.btn {


    transition:

    transform

    var(--transition-fast),

    box-shadow

    var(--transition-fast);


}



.btn:hover {


    transform:

    translateY(-2px);


}



.btn:active {


    transform:

    translateY(0);


}





/* =========================================
   CARD EFFECTS
========================================= */


.card {


    transition:

    transform

    var(--transition-normal),

    box-shadow

    var(--transition-normal);


}



.card:hover {


    transform:

    translateY(-8px);


}





/* =========================================
   IMAGE HOVER
========================================= */


.image-hover {


    overflow:

    hidden;


}



.image-hover img {


    transition:

    transform

    var(--transition-slow);


}



.image-hover:hover img {


    transform:

    scale(1.08);


}





/* =========================================
   FLOATING EFFECT
========================================= */


@keyframes float {


    0%,100% {


        transform:

        translateY(0);


    }



    50% {


        transform:

        translateY(-10px);


    }


}



.float {


    animation:

    float

    4s ease-in-out infinite;


}





/* =========================================
   PULSE EFFECT
========================================= */


@keyframes pulse {


    0% {


        transform:

        scale(1);


    }



    50% {


        transform:

        scale(1.05);


    }



    100% {


        transform:

        scale(1);


    }


}



.pulse {


    animation:

    pulse

    2s infinite;


}





/* =========================================
   LOADING ANIMATION
========================================= */


@keyframes spin {


    from {


        transform:

        rotate(0deg);


    }


    to {


        transform:

        rotate(360deg);


    }


}



.loading {


    animation:

    spin

    1s linear infinite;


}





/* =========================================
   SKELETON LOADING
========================================= */


@keyframes shimmer {


    0% {


        background-position:

        -400px 0;


    }



    100% {


        background-position:

        400px 0;


    }


}



.skeleton {


    background:

    linear-gradient(

        90deg,

        #eeeeee,

        #f8f8f8,

        #eeeeee

    );


    background-size:

    800px 100%;


    animation:

    shimmer

    1.5s infinite;


}





/* =========================================
   PAGE TRANSITION
========================================= */


.page-enter {


    opacity:

    0;


}



.page-enter-active {


    opacity:

    1;


    transition:

    opacity

    0.4s ease;


}





/* =========================================
   STAGGER ANIMATION
========================================= */


.stagger > * {


    opacity:

    0;


    animation:

    fadeUp

    0.5s ease forwards;


}



.stagger > *:nth-child(1) {


    animation-delay:

    0.1s;


}



.stagger > *:nth-child(2) {


    animation-delay:

    0.2s;


}



.stagger > *:nth-child(3) {


    animation-delay:

    0.3s;


}



.stagger > *:nth-child(4) {


    animation-delay:

    0.4s;


}





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


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


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


        animation-duration:

        0.01ms !important;


        transition-duration:

        0.01ms !important;


    }


}