/*
====================================
KARTEL62 Apple Store
Premium Animation CSS
====================================
*/


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


.fade-in{

    opacity:0;

    transform:translateY(40px);

    transition:
    all .8s ease;

}



.fade-in.active{

    opacity:1;

    transform:translateY(0);

}





/*
========================
SLIDE EFFECT
========================
*/


.slide-left{

    opacity:0;

    transform:translateX(-60px);

    transition:.8s ease;

}


.slide-left.active{

    opacity:1;

    transform:translateX(0);

}





.slide-right{

    opacity:0;

    transform:translateX(60px);

    transition:.8s ease;

}



.slide-right.active{

    opacity:1;

    transform:translateX(0);

}





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


.hero-button a,
.btn-header,
.card a{


position:relative;

overflow:hidden;

}



.hero-button a::before,
.btn-header::before,
.card a::before{


content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:
rgba(255,255,255,.25);


transition:.4s;


}



.hero-button a:hover::before,
.btn-header:hover::before,
.card a:hover::before{


left:100%;


}




/*
========================
PRODUCT HOVER
========================
*/


.card img{

transition:.5s ease;

}



.card:hover img{

transform:

scale(1.08)
translateY(-10px);

}





/*
========================
NAVBAR EFFECT
========================
*/


.header{

transition:.4s;

}



.header.scrolled{


background:

rgba(0,0,0,.85);


backdrop-filter:

blur(15px);


position:fixed;


}




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


.loading{


animation:

pulse 1.5s infinite;


}



@keyframes pulse{


0%{

opacity:.5;

}



50%{

opacity:1;

}



100%{

opacity:.5;

}


}





/*
========================
TEXT ANIMATION
========================
*/


.hero-text h1{

animation:

textShow 1s ease;


}



@keyframes textShow{


from{

opacity:0;

transform:

translateY(30px);

}


to{

opacity:1;

transform:

translateY(0);

}


}