/* ==========================================================
   THE FIRE MONK
   Premium Animation Library
   Version : 1.0
==========================================================*/


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

*{

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

}


/*==========================================================
    HERO BOOK FLOAT
==========================================================*/

.hero-book img{

    animation:
        bookFloat 7s ease-in-out infinite;

}

@keyframes bookFloat{

    0%{

        transform:
            translateY(0px);

    }

    50%{

        transform:
            translateY(-16px);

    }

    100%{

        transform:
            translateY(0px);

    }

}



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

.logo img{

    animation:

        logoFloat 9s ease-in-out infinite;

}

@keyframes logoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0);

    }

}



/*==========================================================
    HERO TEXT
==========================================================*/

.hero-content{

    animation:

        heroFade .9s ease forwards;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:

            translateY(35px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}



/*==========================================================
    BOOK IMAGE APPEAR
==========================================================*/

.hero-book{

    animation:

        heroBook .9s ease .25s both;

}

@keyframes heroBook{

    from{

        opacity:0;

        transform:

            translateX(60px);

    }

    to{

        opacity:1;

        transform:

            translateX(0);

    }

}



/*==========================================================
    BUTTON MICRO INTERACTION
==========================================================*/

.btn-primary:hover,

.btn-secondary:hover{

    transform:

        translateY(-4px)

        scale(1.02);

}



/*==========================================================
    NAVIGATION LINKS
==========================================================*/

.navigation a{

    position:relative;

}

.navigation a::before{

    content:"";

    position:absolute;

    left:50%;

    bottom:-12px;

    width:0;

    height:2px;

    background:var(--clr-gold);

    transform:translateX(-50%);

    transition:.35s;

}

.navigation a:hover::before{

    width:100%;

}



/*==========================================================
    BOOK HOVER
==========================================================*/

.book-grid img,

.hero-book img{

    transition:

        transform .45s ease,

        box-shadow .45s ease;

}

.book-grid img:hover,

.hero-book img:hover{

    transform:

        translateY(-10px)

        scale(1.02);

}



/*==========================================================
    AUTHOR IMAGE
==========================================================*/

.author-grid img{

    transition:

        transform .45s ease;

}

.author-grid img:hover{

    transform:

        scale(1.02);

}



/*==========================================================
    CARD ANIMATION
==========================================================*/

.card{

    transition:

        transform .4s ease,

        box-shadow .4s ease;

}

.card:hover{

    transform:

        translateY(-10px);

}



/*==========================================================
    QUOTE FADE
==========================================================*/

.quote-section blockquote{

    animation:

        quoteFade 1.2s ease;

}

@keyframes quoteFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*==========================================================
    GOLD LINE GROW
==========================================================*/

.section-heading h2::after{

    animation:

        lineGrow 1.2s ease;

}

@keyframes lineGrow{

    from{

        width:0;

    }

    to{

        width:80px;

    }

}



/*==========================================================
    CTA BUTTON PULSE
==========================================================*/

.cta-section .btn-primary{

    animation:

        pulseGlow 4s infinite;

}

@keyframes pulseGlow{

    0%{

        box-shadow:

            0 0 0 rgba(199,154,45,.35);

    }

    50%{

        box-shadow:

            0 0 26px rgba(199,154,45,.55);

    }

    100%{

        box-shadow:

            0 0 0 rgba(199,154,45,.35);

    }

}



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

footer img{

    animation:

        footerFloat 8s ease-in-out infinite;

}

@keyframes footerFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}



/*==========================================================
    FADE-UP PREPARATION
==========================================================*/

.fade-up{

    opacity:0;

    transform:

        translateY(45px);

}

.fade-up.show{

    opacity:1;

    transform:

        translateY(0);

}



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

.fade-left{

    opacity:0;

    transform:

        translateX(-70px);

}

.fade-left.show{

    opacity:1;

    transform:

        translateX(0);

}



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

.fade-right{

    opacity:0;

    transform:

        translateX(70px);

}

.fade-right.show{

    opacity:1;

    transform:

        translateX(0);

}



/*==========================================================
    SCALE IN
==========================================================*/

.scale-in{

    opacity:0;

    transform:

        scale(.92);

}

.scale-in.show{

    opacity:1;

    transform:

        scale(1);

}



/*==========================================================
    STAGGER DELAYS
==========================================================*/

.delay-1{

    transition-delay:.10s;

}

.delay-2{

    transition-delay:.20s;

}

.delay-3{

    transition-delay:.30s;

}

.delay-4{

    transition-delay:.40s;

}

.delay-5{

    transition-delay:.50s;

}



/*==========================================================
    SMOOTH SECTION TRANSITION
==========================================================*/

section{

    transition:

        opacity .7s ease,

        transform .7s ease;

}



/*==========================================================
    IMAGE SHADOW ANIMATION
==========================================================*/

.hero-book img,

.book-grid img,

.author-grid img{

    animation-duration:7s;

}



/*==========================================================
    REDUCED MOTION
==========================================================*/

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

    *{

        animation:none !important;

        transition:none !important;

    }

}