/* ==========================================
   LEVY MARTIN
   ANIMATIONS
========================================== */

/* Fade Up */

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* Fade Left */

.fade-left{

    opacity:0;

    transform:translateX(-80px);

    transition:1s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/* Fade Right */

.fade-right{

    opacity:0;

    transform:translateX(80px);

    transition:1s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* Fade */

.fade{

    opacity:0;

    transition:1.2s;

}

.fade.show{

    opacity:1;

}

/* Scale */

.scale{

    opacity:0;

    transform:scale(.9);

    transition:1s ease;

}

.scale.show{

    opacity:1;

    transform:scale(1);

}

/* Hero Text */

.hero-content>*{

    opacity:0;

    transform:translateY(50px);

    animation:heroReveal 1s forwards;

}

.hero-content p{

    animation-delay:.3s;

}

.hero-content h1{

    animation-delay:.6s;

}

.hero-content .btn{

    animation-delay:.9s;

}

@keyframes heroReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Button Hover */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.5s;

}

.btn:hover::before{

    left:100%;

}

/* Product Card */

.product-card{

    transition:.5s;

}

.product-card:hover{

    transform:translateY(-12px);

}

/* Image Zoom */

.product-card img,

.journal img,

.featured img{

    transition:1s;

}

/* Navigation */

.nav-links a{

    transition:.35s;

}

.nav-links a:hover{

    color:#777;

}

/* Footer Links */

.footer-column a{

    transition:.35s;

}

/* Loader */

.loader{

    transition:opacity .8s ease,

               visibility .8s ease;

}

.loader.hide{

    opacity:0;

    visibility:hidden;

}

/* Cursor */

.cursor{

    transition:

        transform .15s linear,

        width .3s,

        height .3s,

        background .3s;

}

.cursor.active{

    width:55px;

    height:55px;

    background:rgba(31,14,10,.08);

}

/* Floating Images */

.product-card img:hover{

    transform:scale(1.06);

}

/* Journal */

.journal article:hover{

    transform:translateY(-8px);

}

.journal article{

    transition:.4s;

}

/* Newsletter */

.newsletter button{

    transition:.4s;

}

.newsletter button:hover{

    transform:translateY(-3px);

}

/* Smooth Appearance */

section{

    animation:sectionFade 1s ease;

}

@keyframes sectionFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* Scroll Indicator */

.scroll-indicator{

    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    width:2px;

    height:70px;

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

    overflow:hidden;

}

.scroll-indicator span{

    position:absolute;

    width:100%;

    height:25px;

    background:white;

    animation:scroll 2s infinite;

}

@keyframes scroll{

    from{

        transform:translateY(-30px);

    }

    to{

        transform:translateY(80px);

    }

}

/*=========================================
VISIBLE STATE
=========================================*/

.product-card,
.journal article{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.product-card.show,
.journal article.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
CUSTOM CURSOR
=========================================*/

.cursor{

    position:fixed;

    width:18px;
    height:18px;

    border:2px solid var(--color-primary);

    border-radius:50%;

    pointer-events:none;

    left:0;
    top:0;

    transform:translate(-50%, -50%);

    transition:

        width .3s ease,
        height .3s ease,
        background .3s ease,
        border .3s ease,
        opacity .3s ease;

    z-index:99999;

}

.cursor.active{

    width:60px;

    height:60px;

    background:rgba(31,14,10,.08);

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

}