/* ==========================================
   CROCHETCRAZE
   ANIMATIONS.CSS
========================================== */


/* ==========================================
GLOBAL TRANSITIONS
========================================== */

*{

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

}



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

.fade-up{

    opacity:0;

    transform:translateY(50px);

    animation:fadeUp .8s forwards;

}

.fade-left{

    opacity:0;

    transform:translateX(-50px);

    animation:fadeLeft .8s forwards;

}

.fade-right{

    opacity:0;

    transform:translateX(50px);

    animation:fadeRight .8s forwards;

}



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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/* ==========================================
SCROLL INDICATOR
========================================== */

.scroll-indicator span::before{

    animation:scroll 1.8s infinite;

}

@keyframes scroll{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    50%{

        opacity:.4;

    }

    100%{

        opacity:0;

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

    }

}



/* ==========================================
BUTTON HOVER
========================================== */

.primary-btn:hover{

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

}

.secondary-btn:hover{

    box-shadow:0 12px 25px rgba(0,0,0,.12);

}



/* ==========================================
COLLECTION CARD
========================================== */

.collection-card{

    transition:.4s;

}

.collection-card:hover{

    transform:translateY(-10px);

}

.collection-card img{

    transition:.6s;

}



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

.feature-box{

    transition:.35s;

}

.feature-box:hover{

    transform:translateY(-12px);

}



/* ==========================================
CONTACT CARD
========================================== */

.contact-card{

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-12px);

}



/* ==========================================
PRODUCT CARD
========================================== */

.product-card{

    transition:.35s;

}

.product-card:hover{

    transform:translateY(-12px);

}



/* ==========================================
FEATURED IMAGE
========================================== */

.featured-image{

    overflow:hidden;

    border-radius:18px;

}

.featured-image img{

    transition:.6s;

}

.featured-image:hover img{

    transform:scale(1.05);

}



/* ==========================================
LOGO
========================================== */

.logo img{

    transition:.4s;

}

.logo:hover img{

    transform:rotate(-8deg) scale(1.08);

}



/* ==========================================
NAV LINKS
========================================== */

.nav-links a{

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#C59D5F;

    transition:.3s;

}

.nav-links a:hover::after{

    width:100%;

}



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

.hero-image{

    animation:heroZoom 14s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}



/* ==========================================
SECTION TITLES
========================================== */

.section-title h2{

    animation:fadeUp 1s;

}



/* ==========================================
CUSTOM ORDER
========================================== */

.custom-order{

    background-size:200%;

    animation:gradientMove 10s linear infinite;

}

@keyframes gradientMove{

    from{

        background-position:left;

    }

    to{

        background-position:right;

    }

}



/* ==========================================
FOOTER LINKS
========================================== */

.footer-links a:hover{

    padding-left:8px;

}



/* ==========================================
SCROLLBAR
========================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#FFF8F3;

}

::-webkit-scrollbar-thumb{

    background:#C59D5F;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#6B4F4F;

}