/* =========================================================
   MAJRAWI ANIMATIONS
   Version: 2.0
========================================================= */

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* =====================================================
   SCALE & FLOAT
===================================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes zoomOut{

    from{

        opacity:0;

        transform:scale(1.08);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

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

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .7s ease,
        transform .7s ease;

    will-change:opacity,transform;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================================
   HOVER EFFECTS
===================================================== */

.hover-lift{

    transition:transform var(--transition),
               box-shadow var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.hover-scale{

    transition:transform var(--transition);

}

.hover-scale:hover{

    transform:scale(1.04);

}

.hover-rotate{

    transition:transform var(--transition);

}

.hover-rotate:hover{

    transform:rotate(3deg);

}

/* =====================================================
   LOADER
===================================================== */

.loader-animation{

    animation:fadeIn .6s ease forwards;

}

.float-animation{

    animation:float 5s ease-in-out infinite;

}

.pulse-animation{

    animation:pulse 2s ease-in-out infinite;

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-down{

    animation:fadeDown .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

.zoom-out{

    animation:zoomOut .8s ease both;

}

/* =====================================================
   REDUCE MOTION
===================================================== */

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

    *,

    *::before,

    *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}

/* =====================================================
   END
===================================================== */