/*=========================================================
  THE SPOILED CHEF
  ANIMATIONS
=========================================================*/

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

@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(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes rotateSlow{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

@keyframes shimmer{

    0%{

        background-position:-500px 0;

    }

    100%{

        background-position:500px 0;

    }

}

/*=========================================================
HELPER CLASSES
=========================================================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

.fade-down{

    animation:fadeDown .8s ease forwards;

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

.zoom-in{

    animation:zoomIn .7s ease forwards;

}

.float{

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

}

.pulse{

    animation:pulse 2.5s infinite;

}

.rotate{

    animation:rotateSlow 15s linear infinite;

}

.bounce{

    animation:bounce 2s infinite;

}

/*=========================================================
HOVER EFFECTS
=========================================================*/

.hover-up{

    transition:var(--transition);

}

.hover-up:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:var(--transition);

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-shadow{

    transition:var(--transition);

}

.hover-shadow:hover{

    box-shadow:var(--shadow-lg);

}

/*=========================================================
IMAGE EFFECTS
=========================================================*/

.image-zoom{

    overflow:hidden;

}

.image-zoom img{

    transition:.6s;

}

.image-zoom:hover img{

    transform:scale(1.08);

}

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

.btn{

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}

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

.loader{

    width:46px;

    height:46px;

    border-radius:50%;

    border:4px solid rgba(0,0,0,.08);

    border-top-color:var(--color-primary);

    animation:rotateSlow 1s linear infinite;

}

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

.skeleton{

    background:linear-gradient(
        90deg,
        #eeeeee 25%,
        #f7f7f7 37%,
        #eeeeee 63%
    );

    background-size:400% 100%;

    animation:shimmer 1.4s infinite linear;

}

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

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*=========================================================
REDUCE MOTION
=========================================================*/

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

    *,
    *::before,
    *::after{

        animation:none !important;

        transition:none !important;

    }

}