/* ==========================================================
   Nine3 Designs
   Animations
========================================================== */


/* ==========================================================
   Global Transitions
========================================================== */

a,
button,
.btn,
.service-card,
.portfolio-card,
.contact-card,
img{

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

}


/* ==========================================================
   Hero Animations
========================================================== */

.hero-text{

    animation:slideLeft .9s ease both;

}


.hero-image{

    animation:slideRight .9s ease .15s both;

}


.hero-image img{

    animation:floatLogo 5s ease-in-out infinite;

}


/* ==========================================================
   Scroll Reveal
========================================================== */

.hidden{

    opacity:0;

    transform:translateY(40px);

}


.show{

    opacity:1;

    transform:translateY(0);

    transition:
        opacity .8s ease,
        transform .8s ease;

}


/* ==========================================================
   Buttons
========================================================== */

.btn{

    position:relative;

    overflow:hidden;

}


.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transition:.7s ease;

}


.btn:hover::before{

    left:120%;

}


/* ==========================================================
   Cards
========================================================== */

.service-card:hover{

    transform:translateY(-12px) scale(1.02);

}


.portfolio-card:hover{

    transform:translateY(-10px);

}


.contact-card:hover{

    transform:translateY(-8px);

}


/* ==========================================================
   Navigation
========================================================== */

.main-nav a:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   Logo Hover
========================================================== */

.logo img:hover{

    transform:scale(1.04);

}


/* ==========================================================
   Keyframes
========================================================== */

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}


@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes floatLogo{

    0%{

        transform:translateY(0px);

    }

    25%{

        transform:translateY(-8px);

    }

    50%{

        transform:translateY(-14px);

    }

    75%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }



}


/* ==========================================================
   Reduced Motion Accessibility
========================================================== */

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

    *,
    *::before,
    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

    }

}