/* ==================================================
   SHADOW WOLVES MULTIGAMING
   ANIMATIONS.CSS
================================================== */


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

*{

    transition:

        background-color .35s ease,

        color .35s ease,

        border-color .35s ease,

        transform .35s ease,

        opacity .35s ease;

}


/* ==================================================
   FADE ANIMATION
================================================== */

.fade{

    opacity:0;

    transform:translateY(40px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}


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

.hero-background{

    animation:

        heroZoom 18s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.08);

    }

}

.hero-content{

    animation:

        heroContent 1s ease;

}

@keyframes heroContent{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* ==================================================
   BUTTONS
================================================== */

.btn{

    transition:

        transform .3s ease,

        box-shadow .3s ease,

        background .3s ease;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 15px 35px rgba(0,174,239,.25);

}

.btn:active{

    transform:scale(.96);

}


/* ==================================================
   CARDS
================================================== */

.why-card,
.featured-game,
.library-category,
.news-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}

.why-card:hover,
.featured-game:hover,
.library-category:hover,
.news-card:hover{

    transform:translateY(-10px);

}


/* ==================================================
   IMAGES
================================================== */

.about-image img,
.news-image img,
.featured-game img{

    transition:

        transform .7s ease;

}

.about-image:hover img,
.news-card:hover img,
.featured-game:hover img{

    transform:scale(1.06);

}


/* ==================================================
   PLATFORM BADGES
================================================== */

.platform{

    transition:

        transform .3s ease,

        border-color .3s ease,

        background .3s ease;

}

.platform:hover{

    transform:translateY(-4px);

    border-color:rgba(0,174,239,.4);

    background:rgba(0,174,239,.08);

}


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

.section-title small{

    animation:

        pulseGlow 3s infinite;

}

@keyframes pulseGlow{

    0%{

        opacity:.7;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.7;

    }

}


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

.footer-links a{

    transition:

        padding-left .3s ease,

        color .3s ease;

}

.footer-links a:hover{

    padding-left:8px;

}


/* ==================================================
   SCROLL TO TOP
================================================== */

#topButton{

    transition:

        opacity .35s ease,

        transform .35s ease,

        background .35s ease;

}


/* ==================================================
   COOKIE BANNER
================================================== */

.cookie-banner{

    transition:

        transform .45s ease,

        opacity .45s ease;

}


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

.logo img{

    transition:

        transform .4s ease;

}

.logo:hover img{

    transform:rotate(-4deg) scale(1.05);

}


/* ==================================================
   END OF FILE
================================================== */