/* ==========================================
   BailJi Organic Premium Animation
========================================== */

/* Fade Up */

.fade-up{

opacity:0;

transform:translateY(50px);

animation:fadeUp .8s forwards;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* Fade Down */

.fade-down{

opacity:0;

transform:translateY(-50px);

animation:fadeDown .8s forwards;

}

@keyframes fadeDown{

0%{

opacity:0;

transform:translateY(-50px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

/* Fade Left */

.fade-left{

opacity:0;

transform:translateX(-60px);

animation:fadeLeft .8s forwards;

}

@keyframes fadeLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/* Fade Right */

.fade-right{

opacity:0;

transform:translateX(60px);

animation:fadeRight .8s forwards;

}

@keyframes fadeRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/* Zoom */

.zoom{

animation:zoom .7s;

}

@keyframes zoom{

0%{

opacity:0;

transform:scale(.7);

}

100%{

opacity:1;

transform:scale(1);

}

}

/* Floating */

.float{

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

}

@keyframes floating{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

/* Pulse */

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}

/* Rotate */

.rotate{

animation:rotate 8s linear infinite;

}

@keyframes rotate{

100%{

transform:rotate(360deg);

}

}

/* Shine */

.shine{

position:relative;

overflow:hidden;

}

.shine::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:50%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transform:skewX(-25deg);

}

.shine:hover::before{

animation:shine 1s;

}

@keyframes shine{

100%{

left:150%;

}

}

/* Button Hover */

.btn-animate{

transition:.35s;

}

.btn-animate:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(46,125,50,.3);

}

/* Card Hover */

.card-animate{

transition:.35s;

}

.card-animate:hover{

transform:translateY(-12px);

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

}
/* ==========================================
   Floating Leaves Animation
========================================== */

.leaf{
    position:absolute;
    pointer-events:none;
    opacity:.25;
    animation:leafAnimation 12s linear infinite;
}

.leaf-1{
    top:5%;
    left:8%;
    width:35px;
}

.leaf-2{
    top:25%;
    right:8%;
    width:28px;
    animation-delay:3s;
}

.leaf-3{
    bottom:15%;
    left:20%;
    width:42px;
    animation-delay:6s;
}

.leaf-4{
    top:55%;
    right:30%;
    width:30px;
    animation-delay:2s;
}

@keyframes leafAnimation{

0%{
opacity:0;
transform:translateY(-50px) rotate(0deg);
}

20%{
opacity:.35;
}

100%{
opacity:0;
transform:translateY(900px) rotate(360deg);
}

}

/* ==========================================
   Wave Animation
========================================== */

.wave{
    position:relative;
    overflow:hidden;
}

.wave::before{

content:"";

position:absolute;

left:-50%;

bottom:0;

width:200%;

height:120px;

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

border-radius:45%;

animation:waveMove 8s linear infinite;

}

@keyframes waveMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(50%);
}

}

/* ==========================================
   Glass Glow
========================================== */

.glass-glow{

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

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.2);

transition:.35s;

}

.glass-glow:hover{

box-shadow:0 0 40px rgba(76,175,80,.35);

}

/* ==========================================
   Product Hover
========================================== */

.product-card{

overflow:hidden;

}

.product-card img{

transition:.45s;

}

.product-card:hover img{

transform:scale(1.08);

}

.product-card:hover{

transform:translateY(-10px);

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

}

/* ==========================================
   Wishlist Heart
========================================== */

.heart{

transition:.3s;

}

.heart:hover{

animation:heartBeat .7s;

color:#E53935;

}

@keyframes heartBeat{

0%{
transform:scale(1);
}

25%{
transform:scale(1.25);
}

50%{
transform:scale(.95);
}

75%{
transform:scale(1.2);
}

100%{
transform:scale(1);
}

}

/* ==========================================
   Cart Shake
========================================== */

.cart-icon:hover{

animation:cartShake .6s;

}

@keyframes cartShake{

0%{transform:rotate(0);}
20%{transform:rotate(-12deg);}
40%{transform:rotate(12deg);}
60%{transform:rotate(-8deg);}
80%{transform:rotate(8deg);}
100%{transform:rotate(0);}

}

/* ==========================================
   Notification Bell
========================================== */

.bell:hover{

animation:ring .8s;

}

@keyframes ring{

0%{transform:rotate(0);}
20%{transform:rotate(20deg);}
40%{transform:rotate(-20deg);}
60%{transform:rotate(15deg);}
80%{transform:rotate(-15deg);}
100%{transform:rotate(0);}

}

/* ==========================================
   Page Transition
========================================== */

.page-enter{

animation:pageFade .7s ease;

}

@keyframes pageFade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ==========================================
   Skeleton Loader
========================================== */

.skeleton{

background:linear-gradient(
90deg,
#f2f2f2 25%,
#e7e7e7 50%,
#f2f2f2 75%
);

background-size:200% 100%;

animation:skeleton 1.3s infinite;

border-radius:10px;

}

@keyframes skeleton{

0%{

background-position:200% 0;

}

100%{

background-position:-200% 0;

}

}

/* ==========================================
   Image Fade
========================================== */

.image-fade{

opacity:0;

transition:opacity .5s;

}

.image-fade.loaded{

opacity:1;

}

/* ==========================================
   Scroll Reveal
========================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ==========================================
   Glow Button
========================================== */

.btn-glow{

position:relative;

overflow:hidden;

}

.btn-glow::after{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transition:.8s;

}

.btn-glow:hover::after{

left:120%;

}
/* ==========================================
   Premium Animation CSS Part 3
========================================== */

/* ==========================================
   Particle Background
========================================== */

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:1;
}

.particles span{
    position:absolute;
    width:8px;
    height:8px;
    background:rgba(76,175,80,.25);
    border-radius:50%;
    animation:particleMove 18s linear infinite;
}

@keyframes particleMove{

0%{
transform:translateY(100vh) scale(0);
opacity:0;
}

20%{
opacity:.6;
}

100%{
transform:translateY(-150px) scale(1.5);
opacity:0;
}

}

/* ==========================================
   Sparkle Effect
========================================== */

.sparkle{
    position:relative;
    overflow:hidden;
}

.sparkle::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:120%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent
);

transform:skewX(-25deg);

}

.sparkle:hover::before{

animation:sparkleMove .9s;

}

@keyframes sparkleMove{

100%{

left:150%;

}

}

/* ==========================================
   Floating Bubble
========================================== */

.bubble{

position:absolute;

border-radius:50%;

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

animation:bubbleFloat 12s linear infinite;

}

@keyframes bubbleFloat{

0%{

transform:translateY(80px) scale(.5);

opacity:0;

}

25%{

opacity:.5;

}

100%{

transform:translateY(-900px) scale(1.2);

opacity:0;

}

}

/* ==========================================
   Pulse Border
========================================== */

.pulse-border{

position:relative;

}

.pulse-border::after{

content:"";

position:absolute;

inset:-5px;

border-radius:inherit;

border:2px solid rgba(76,175,80,.4);

animation:borderPulse 2.5s infinite;

}

@keyframes borderPulse{

0%{

transform:scale(1);

opacity:1;

}

100%{

transform:scale(1.15);

opacity:0;

}

}

/* ==========================================
   Floating Icon
========================================== */

.float-icon{

display:inline-block;

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

}

@keyframes floatIcon{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

/* ==========================================
   Rotate Hover
========================================== */

.rotate-hover{

transition:.35s;

}

.rotate-hover:hover{

transform:rotate(12deg);

}

/* ==========================================
   Scale Hover
========================================== */

.scale-hover{

transition:.35s;

}

.scale-hover:hover{

transform:scale(1.08);

}

/* ==========================================
   Image Overlay
========================================== */

.image-overlay{

position:relative;

overflow:hidden;

}

.image-overlay::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(46,125,50,.15);

opacity:0;

transition:.35s;

}

.image-overlay:hover::after{

opacity:1;

}

/* ==========================================
   Success Animation
========================================== */

.success-pop{

animation:successPop .6s;

}

@keyframes successPop{

0%{

transform:scale(.5);

opacity:0;

}

60%{

transform:scale(1.15);

}

100%{

transform:scale(1);

opacity:1;

}

}

/* ==========================================
   Error Shake
========================================== */

.error-shake{

animation:errorShake .6s;

}

@keyframes errorShake{

0%{transform:translateX(0);}
20%{transform:translateX(-10px);}
40%{transform:translateX(10px);}
60%{transform:translateX(-8px);}
80%{transform:translateX(8px);}
100%{transform:translateX(0);}

}

/* ==========================================
   Skeleton Fade
========================================== */

.skeleton-fade{

animation:skeletonFade 1.5s infinite;

}

@keyframes skeletonFade{

0%{

opacity:.5;

}

50%{

opacity:1;

}

100%{

opacity:.5;

}

}

/* ==========================================
   Dark Mode Transition
========================================== */

body,
.card,
.navbar,
footer,
.btn{

transition:
background .35s,
color .35s,
border-color .35s,
box-shadow .35s;

}

/* ==========================================
   Disable Animation
========================================== */

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/* ==========================================
   Print Mode
========================================== */

@media print{

.particles,
.bubble,
.whatsapp,
#backToTop,
.mobile-bottom{

display:none !important;

}

body{

background:#fff;

}

}