/* ===================================================
   HANA FLOWERS MARKET
   animation.css
=================================================== */


/* ==========================================
   GLOBAL TRANSITION
========================================== */

*{

    transition:all .35s ease;

}


/* ==========================================
   FLOATING HERO IMAGE
========================================== */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

.floating{

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

}


/* ==========================================
   FADE UP
========================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}


/* ==========================================
   FADE LEFT
========================================== */

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}


/* ==========================================
   FADE RIGHT
========================================== */

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}


/* ==========================================
   ZOOM IN
========================================== */

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

.zoom-in{

    animation:zoomIn .7s ease;

}


/* ==========================================
   BOUNCE
========================================== */

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-12px);

    }

    60%{

        transform:translateY(-6px);

    }

}

.bounce{

    animation:bounce 2.5s infinite;

}


/* ==========================================
   BUTTON GLOW
========================================== */

.btn-success{

    position:relative;

    overflow:hidden;

}

.btn-success::after{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

}

.btn-success:hover::after{

    left:120%;

    transition:.7s;

}


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

.product-card{

    overflow:hidden;

}

.product-card:hover{

    transform:translateY(-12px);

}

.product-card img{

    transition:transform .5s ease;

}

.product-card:hover img{

    transform:scale(1.08);

}


/* ==========================================
   CATEGORY HOVER
========================================== */

.category-card{

    overflow:hidden;

}

.category-card:hover{

    transform:translateY(-8px);

}

.category-card img{

    transition:.5s;

}

.category-card:hover img{

    transform:scale(1.06);

}


/* ==========================================
   FEATURE BOX
========================================== */

.feature-box:hover{

    transform:translateY(-12px);

}


/* ==========================================
   STEP BOX
========================================== */

.step-box:hover{

    transform:translateY(-10px);

}


/* ==========================================
   TESTIMONIAL
========================================== */

.testimonial-card:hover{

    transform:translateY(-10px);

}


/* ==========================================
   ICON ROTATE
========================================== */

.feature-icon{

    transition:.35s;

}

.feature-box:hover .feature-icon{

    transform:rotate(360deg);

}


/* ==========================================
   SOCIAL ICON
========================================== */

.footer a{

    transition:.3s;

}

.footer a:hover{

    transform:translateY(-5px) scale(1.15);

}


/* ==========================================
   NAVBAR UNDERLINE
========================================== */

.nav-link{

    position:relative;

}

.nav-link::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    left:0;

    bottom:-6px;

    background:#5D9C59;

    transition:.35s;

}

.nav-link:hover::after{

    width:100%;

}


/* ==========================================
   IMAGE SHINE
========================================== */

.category-card,
.product-card{

    position:relative;

}

.category-card::before,
.product-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );

    transform:skewX(-25deg);

}

.category-card:hover::before,
.product-card:hover::before{

    left:130%;

    transition:.9s;

}


/* ==========================================
   BACK TO TOP
========================================== */

.back-to-top{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(93,156,89,.5);

    }

    70%{

        box-shadow:0 0 0 18px rgba(93,156,89,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(93,156,89,0);

    }

}


/* ==========================================
   SCROLL ANIMATION
========================================== */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/* ==========================================
   LOADING SPINNER
========================================== */

.loader{

    width:55px;

    height:55px;

    border:5px solid #f1f1f1;

    border-top:5px solid #5D9C59;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}


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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

.fade-in{

    animation:fadeIn 1s ease;

}


/* ==========================================
   SCALE HOVER
========================================== */

.scale-hover{

    transition:.35s;

}

.scale-hover:hover{

    transform:scale(1.05);

}


/* ==========================================
   ROTATE HOVER
========================================== */

.rotate-hover:hover{

    transform:rotate(3deg);

}


/* ==========================================
   SHADOW HOVER
========================================== */

.shadow-hover:hover{

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

}


/* ==========================================
   DELAY UTILITIES
========================================== */

.delay-1{

    animation-delay:.2s;

}

.delay-2{

    animation-delay:.4s;

}

.delay-3{

    animation-delay:.6s;

}

.delay-4{

    animation-delay:.8s;

}