/*==================================================================

WILD FOCUS

ANIMATIONS.CSS

==================================================================*/



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

:root{

    --ease:cubic-bezier(.22,.61,.36,1);

    --duration:.8s;

}



/*=========================================================
PAGE LOAD
=========================================================*/

body{

    animation:

    pageFade

    .8s

    ease;

}



@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



/*=========================================================
SECTION ENTRANCE
=========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .8s var(--ease),

    transform .8s var(--ease);

}



.fade-left{

    opacity:0;

    transform:translateX(-60px);

    transition:

    opacity .8s var(--ease),

    transform .8s var(--ease);

}



.fade-right{

    opacity:0;

    transform:translateX(60px);

    transition:

    opacity .8s var(--ease),

    transform .8s var(--ease);

}



.scale-in{

    opacity:0;

    transform:scale(.95);

    transition:

    opacity .8s,

    transform .8s;

}



.is-visible{

    opacity:1;

    transform:none;

}



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

.hero-image img{

    animation:

    heroFloat

    8s

    ease-in-out

    infinite;

}



@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}



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

.scroll-down i{

    animation:

    scrollArrow

    2s

    infinite;

}



@keyframes scrollArrow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}



/*=========================================================
BUTTON SHINE
=========================================================*/

.btn{

    overflow:hidden;

    position:relative;

}



.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

}



.btn:hover::before{

    animation:

    shine

    .9s;

}



@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:120%;

    }

}



/*=========================================================
IMAGE HOVER
=========================================================*/

.service-image img,

.collection-image img,

.story-image img,

.banner-image img{

    transition:

    transform .8s var(--ease);

}



.service-card:hover img,

.collection-card:hover img,

.story-card:hover img,

.banner-grid:hover img{

    transform:scale(1.06);

}



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

.service-card,

.collection-card,

.story-card,

.logo-card{

    transition:

    transform .35s,

    box-shadow .35s;

}



.service-card:hover,

.collection-card:hover,

.story-card:hover{

    transform:translateY(-8px);

}



/*=========================================================
FEATURE ICON
=========================================================*/

.feature-icon{

    transition:

    transform .35s,

    background .35s;

}



.feature-row:hover .feature-icon{

    transform:rotate(10deg);

}



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

nav a{

    position:relative;

}



nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}



nav a:hover::after{

    width:100%;

}



/*=========================================================
SOCIAL ICONS
=========================================================*/

.footer-social a{

    transition:

    transform .3s,

    background .3s;

}



.footer-social a:hover{

    transform:translateY(-4px);

}



/*=========================================================
PROCESS
=========================================================*/

.process-number{

    transition:

    transform .35s,

    background .35s;

}



.process-card:hover .process-number{

    transform:scale(1.08);

}



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

.logo-card img{

    transition:

    transform .35s,

    opacity .35s;

}



.logo-card:hover img{

    transform:scale(1.06);

}



/*=========================================================
BACK TO TOP
=========================================================*/

.back-top{

    transition:

    opacity .35s,

    transform .35s;

}



.back-top:hover{

    transform:translateY(-5px);

}



/*=========================================================
PARALLAX READY
=========================================================*/

.parallax{

    will-change:transform;

}



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

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}