/* =====================================================
   MJP - Manu Janta Party
   Animation Styles
   Cloudflare Pages Ready
===================================================== */


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


a,
button,
.card,
.gallery-item,
img {

    transition:
    all 0.3s ease;

}





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


.fade-in {

    animation:
    fadeIn 1s ease forwards;

}



@keyframes fadeIn {

    from {

        opacity:0;

    }


    to {

        opacity:1;

    }

}







.fade-up {


    animation:
    fadeUp .8s ease forwards;


}



@keyframes fadeUp {


    from {

        opacity:0;

        transform:
        translateY(30px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }

}







.fade-down {


    animation:
    fadeDown .8s ease forwards;


}



@keyframes fadeDown {


    from {

        opacity:0;

        transform:
        translateY(-30px);

    }


    to {

        opacity:1;

        transform:
        translateY(0);

    }

}







/* ==========================================
   HERO ANIMATIONS
========================================== */


.hero h1 {


    animation:
    heroTitle 1s ease;

}



@keyframes heroTitle {


    from {


        opacity:0;

        transform:
        translateX(-40px);


    }



    to {


        opacity:1;

        transform:
        translateX(0);


    }


}







.hero p {


    animation:
    heroText 1.2s ease;


}



@keyframes heroText {


    from {


        opacity:0;

        transform:
        translateY(20px);


    }


    to {


        opacity:1;

        transform:
        translateY(0);


    }


}







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


.btn {


    position:relative;

    overflow:hidden;

}



.btn:hover {


    transform:
    translateY(-3px);


    box-shadow:
    0 8px 20px rgba(0,0,0,.15);


}



.btn:active {


    transform:
    translateY(0);


}







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


.card:hover {


    transform:
    translateY(-8px);


    box-shadow:
    0 15px 35px rgba(0,0,0,.12);


}







/* ==========================================
   IMAGE EFFECTS
========================================== */


.gallery-item {


    overflow:hidden;


}



.gallery-item img {


    transform:
    scale(1);


}



.gallery-item:hover img {


    transform:
    scale(1.08);


}







/* ==========================================
   NAVIGATION EFFECTS
========================================== */


.nav-menu a {


    position:relative;


}



.nav-menu a::after {


    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:
    #FFB703;


    transition:.3s;


}



.nav-menu a:hover::after {


    width:100%;


}







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


.pulse {


    animation:
    pulse 2s infinite;


}



@keyframes pulse {


    0% {


        transform:
        scale(1);


    }



    50% {


        transform:
        scale(1.05);


    }



    100% {


        transform:
        scale(1);


    }


}







/* ==========================================
   SCROLL REVEAL SUPPORT
========================================== */


.reveal {


    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;


}



.reveal.show {


    opacity:1;

    transform:
    translateY(0);


}







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


.loading {


    animation:
    loading 1.5s infinite;


}



@keyframes loading {


    0% {

        opacity:.4;

    }


    50% {

        opacity:1;

    }


    100% {

        opacity:.4;

    }


}







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


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


* {


    animation-duration:
    0.01ms !important;


    animation-iteration-count:
    1 !important;


    transition-duration:
    0.01ms !important;


}


}