/* ==========================================================
   HAYNA UI
   animations.css
========================================================== */

/* ===========================
   KEYFRAMES
=========================== */

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

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

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(40px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes zoomIn{
    from{
        opacity:0;
        transform:scale(.8);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes float{
    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }
}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

100%{

transform:scale(1);

}

}

@keyframes rotate360{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

@keyframes gradient{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes shimmer{

100%{

transform:translateX(220%);

}

}

@keyframes loader{

100%{

transform:rotate(360deg);

}

}

@keyframes bounce{

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

transform:translateY(0);

}

40%{

transform:translateY(-10px);

}

60%{

transform:translateY(-5px);

}

}


/* ===========================
   ANIMATION CLASSES
=========================== */

.fade-in{

animation:fadeIn .6s ease forwards;

}

.fade-up{

animation:fadeUp .6s ease forwards;

}

.fade-down{

animation:fadeDown .6s ease forwards;

}

.fade-left{

animation:fadeLeft .6s ease forwards;

}

.fade-right{

animation:fadeRight .6s ease forwards;

}

.zoom-in{

animation:zoomIn .5s ease forwards;

}

.float{

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

}

.pulse{

animation:pulse 2s infinite;

}

.rotate{

animation:rotate360 15s linear infinite;

}

.bounce{

animation:bounce 2s infinite;

}


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

.btn,

.btn-primary,

.btn-register{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}


/* ===========================
   HERO SHAPES
=========================== */

.hero-shape{

position:absolute;

border-radius:50%;

filter:blur(5px);

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

opacity:.25;

}

.hero-shape.one{

width:220px;

height:220px;

top:70px;

left:8%;

background:#ffffff;

}

.hero-shape.two{

width:120px;

height:120px;

right:12%;

top:160px;

background:#ffffff;

animation-delay:1s;

}

.hero-shape.three{

width:320px;

height:320px;

bottom:-120px;

left:35%;

background:#ffffff;

animation-delay:2s;

}


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

.card,

.store-card,

.offer-card,

.category-card{

transition:

transform .35s,

box-shadow .35s;

}

.card:hover,

.store-card:hover,

.offer-card:hover,

.category-card:hover{

transform:translateY(-8px);

}


/* ===========================
   IMAGE ZOOM
=========================== */

.store-cover{

overflow:hidden;

}

.store-cover img{

transition:transform .5s;

}

.store-card:hover img{

transform:scale(1.08);

}


/* ===========================
   SKELETON
=========================== */

.skeleton{

position:relative;

overflow:hidden;

background:#ECECEC;

}

.skeleton::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.6),

transparent

);

animation:shimmer 1.3s infinite;

}


/* ===========================
   LOADER
=========================== */

.loader{

width:60px;

height:60px;

border-radius:50%;

border:5px solid #eee;

border-top:5px solid var(--primary);

animation:loader .8s linear infinite;

}


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

.reveal{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.reveal.active{

opacity:1;

transform:none;

}


/* ===========================
   ICON HOVER
=========================== */

.social-icons a:hover{

transform:translateY(-6px) scale(1.08);

}

.category-card:hover i{

animation:bounce .8s;

}

.store-card:hover .store-logo{

animation:pulse .7s;

}