@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.caption h1 {
    animation: fadeIn 1s ease forwards;
}

.caption p {
    animation: fadeIn 1.3s ease forwards;
}

.caption .btn {
    animation: fadeIn 1.6s ease forwards;
}
/* ======================================
   HUANGCHAN CONSTRUCTION
   ANIMATION STYLES
====================================== */


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


*{

    transition:
    color .3s ease,
    background .3s ease,
    transform .3s ease,
    opacity .3s ease;

}



/* ================================
   FADE IN ANIMATION
================================ */


.fade-in{

    animation:fadeIn 1.2s ease forwards;

}


@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}




/* ================================
   SLIDE UP
================================ */


.slide-up{

    animation:slideUp 1s ease forwards;

}



@keyframes slideUp{


    from{

        opacity:0;
        transform:translateY(50px);

    }


    to{

        opacity:1;
        transform:translateY(0);

    }


}




/* ================================
   HERO CAPTION ANIMATION
================================ */


.caption h1{

    animation:titleReveal 1.2s ease;

}



.caption p{

    animation:textReveal 1.5s ease;

}



.caption .btn{

    animation:buttonReveal 1.8s ease;

}




@keyframes titleReveal{


from{

opacity:0;
transform:translateX(-80px);

}


to{

opacity:1;
transform:translateX(0);

}


}



@keyframes textReveal{


from{

opacity:0;
transform:translateX(80px);

}


to{

opacity:1;
transform:translateX(0);

}


}



@keyframes buttonReveal{


from{

opacity:0;
transform:translateY(40px);

}


to{

opacity:1;
transform:translateY(0);

}


}




/* ================================
   SERVICE CARD EFFECT
================================ */


.service-card{

    overflow:hidden;

}



.service-card:hover{

    transform:translateY(-15px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.2);

}



.service-card img{

    transition:.6s;

}



.service-card:hover img{

    transform:scale(1.08);

}




/* ================================
   PROJECT IMAGE EFFECT
================================ */


.project-card{

    overflow:hidden;

}


.project-card img{

    transition:.6s;

}


.project-card:hover img{

    transform:scale(1.1);

}



.project-card:hover{

    transform:translateY(-10px);

}




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


.btn{

    position:relative;
    overflow:hidden;

}



.btn:before{


content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:white;

opacity:.3;

transition:.5s;


}



.btn:hover:before{

left:100%;

}





/* ================================
   STATISTICS ANIMATION
================================ */


.stat h2{

    animation:numberPulse 2s infinite;

}



@keyframes numberPulse{


0%{

transform:scale(1);

}


50%{

transform:scale(1.08);

}


100%{

transform:scale(1);

}


}




/* ================================
   INDUSTRY BOX HOVER
================================ */


.industry-grid div{

    position:relative;
    overflow:hidden;

}



.industry-grid div:hover{


transform:translateY(-8px);

background:#e5a900;

color:#111;

}




/* ================================
   CTA ANIMATION
================================ */


.cta h2{

animation:fadeIn 1.5s ease;

}


.cta .btn{

margin-top:20px;

}



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


.reveal{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}



.reveal.active{

opacity:1;

transform:translateY(0);

}





/* ================================
   LOADING EFFECT
================================ */


.loading{

animation:loading 1s infinite alternate;

}



@keyframes loading{


from{

opacity:.4;

}


to{

opacity:1;

}


}




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


.float{

animation:floating 4s infinite ease-in-out;

}



@keyframes floating{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


100%{

transform:translateY(0);

}


}




/* ================================
   MOBILE PERFORMANCE
================================ */


@media(max-width:768px){


*{

transition:none;

}



.service-card:hover,
.project-card:hover{

transform:none;

}


}