/* ==============================
   89 ORIGINAL ANIMATIONS
============================== */


/* Fade in when page loads */

.fade-in{

animation:fadeIn 1s ease forwards;

}


@keyframes fadeIn{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/* Slide from left */

.slide-left{

animation:slideLeft 1s ease forwards;

}


@keyframes slideLeft{

from{

opacity:0;

transform:translateX(-50px);

}

to{

opacity:1;

transform:translateX(0);

}

}


/* Slide from right */

.slide-right{

animation:slideRight 1s ease forwards;

}


@keyframes slideRight{

from{

opacity:0;

transform:translateX(50px);

}

to{

opacity:1;

transform:translateX(0);

}

}


/* Product cards */

.product-card{

transition:transform .4s ease, box-shadow .4s ease;

}


.product-card:hover{

transform:translateY(-10px);

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

}


/* Buttons */

.btn,
.cart-btn,
.whatsapp-btn,
.nav-shop-btn{

transition:.3s ease;

}


.btn:hover,
.cart-btn:hover,
.whatsapp-btn:hover,
.nav-shop-btn:hover{

transform:translateY(-3px);

}


/* Images */

.main-image img,
.product-card img{

transition:transform .5s ease;

}


.product-card:hover img{

transform:scale(1.05);

}


/* Logo animation */

.brand-logo{

animation:logoPop .8s ease;

}


@keyframes logoPop{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}


/* Cart badge */

#cartCount{

animation:badgePop .4s ease;

}


@keyframes badgePop{

0%{

transform:scale(0);

}

100%{

transform:scale(1);

}

}


/* Lightbox */

.lightbox img{

animation:zoomIn .4s ease;

}


@keyframes zoomIn{

from{

transform:scale(.7);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}


/* Floating effect */

.float{

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

}


@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}