/* =====================================
   9NAGA LUXURY ANIMATION CSS
   ===================================== */



/* =====================================
   GOLD NEON GLOW HEADER
   ===================================== */


.luxury-header{

    animation:
    headerGlow 3s infinite alternate;

}



@keyframes headerGlow{


    from{

        box-shadow:

        0 0 15px gold,
        inset 0 0 10px rgba(255,215,0,.3);

    }


    to{

        box-shadow:

        0 0 40px gold,
        inset 0 0 25px rgba(255,215,0,.7);

    }


}








/* =====================================
 SOCIAL BUTTON FLOAT
 ===================================== */



.social-btn{


    animation:

    floating 3s ease-in-out infinite;


}



.social-btn:nth-child(2){

    animation-delay:.4s;

}


.social-btn:nth-child(3){

    animation-delay:.8s;

}





@keyframes floating{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-8px);

    }


    100%{

        transform:translateY(0);

    }


}









/* =====================================
 BUTTON PRESS EFFECT
 ===================================== */



.menu-button,
.luxury-button{


    position:relative;

    overflow:hidden;


}





.menu-button::before,
.luxury-button::before{


    content:"";


    position:absolute;


    top:0;


    left:-100%;


    width:100%;


    height:100%;


    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.8),
        transparent
    );



    transition:.5s;


}





.menu-button:hover::before,
.luxury-button:hover::before{


    left:100%;


}








.menu-button:hover,
.luxury-button:hover{


    transform:

    translateY(-5px)
    scale(1.05);


}






.menu-button:active,
.luxury-button:active{


    transform:

    scale(.85);


}









/* =====================================
 GOLD TEXT SHINE
 ===================================== */



.luxury-title{

    background:
    linear-gradient(
        90deg,
        #7a5b00,
        #fff2a8,
        gold,
        #7a5b00
    );

    background-size:200%;

    background-clip:text;

    -webkit-background-clip:text;

    color:transparent;

}



@keyframes goldMove{


    from{

        background-position:

        200% center;

    }


    to{

        background-position:

        -200% center;

    }


}









/* =====================================
 CARD 3D HOVER
 ===================================== */


.partner-box{


    transition:.5s;


}



.partner-box:hover{


    transform:

    translateY(-15px);



}





.partner-image{


    animation:

    imageGlow 4s infinite alternate;


}




@keyframes imageGlow{


    from{

        box-shadow:

        0 0 15px gold;

    }


    to{

        box-shadow:

        0 0 45px gold;

    }


}









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



.slide-active{


    animation:

    slideFade 1s ease;


}





@keyframes slideFade{


    from{

        opacity:0;

        transform:

        scale(1.08);

    }



    to{


        opacity:1;

        transform:

        scale(1);

    }


}









/* =====================================
 SIDEBAR OPEN EFFECT
 ===================================== */



.sidebar.active{


    animation:

    sidebarGlow .5s ease;


}



@keyframes sidebarGlow{


    from{


        opacity:0;

        transform:

        translateX(100px);


    }



    to{


        opacity:1;

        transform:

        translateX(0);


    }


}









/* =====================================
 BACKGROUND LIGHT EFFECT
 ===================================== */



body::before{


    content:"";


    position:fixed;


    inset:0;


    pointer-events:none;


    background:


    radial-gradient(
        circle,
        rgba(255,215,0,.15),
        transparent 40%
    );


    animation:

    backgroundPulse 6s infinite;


}





@keyframes backgroundPulse{


    0%,100%{

        opacity:.3;

    }



    50%{

        opacity:.8;

    }


}








/* =====================================
 GOLD BORDER MOVEMENT
 ===================================== */



.hero-slider,
.partner-image,
.bottom-banner,
.about{


    position:relative;

    overflow:hidden;


}





.hero-slider::after,
.partner-image::after,
.bottom-banner::after,
.about::after{


    content:"";


    position:absolute;


    inset:0;


    border-radius:inherit;


    border:

    2px solid rgba(255,215,0,.5);


    animation:

    borderFlash 3s infinite;


}




@keyframes borderFlash{


    0%,100%{


        opacity:.3;


    }



    50%{


        opacity:1;


    }


}







/* =====================================
 LOADING SHIMMER
 ===================================== */



.loading{


    animation:

    shimmer 1.5s infinite;


}




@keyframes shimmer{


    0%{

        opacity:.4;

    }


    50%{

        opacity:1;

    }


    100%{

        opacity:.4;

    }


}