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

/* Global Transition */

*{
    transition:all .3s ease;
}

/* Fade In */

.fade-in{
    animation:fadeIn 1s ease forwards;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Slide Left */

.slide-left{
    animation:slideLeft 1s ease;
}

@keyframes slideLeft{

    from{
        opacity:0;
        transform:translateX(-60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* Slide Right */

.slide-right{
    animation:slideRight 1s ease;
}

@keyframes slideRight{

    from{
        opacity:0;
        transform:translateX(60px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}

/* Zoom */

.zoom{
    animation:zoom 1s ease;
}

@keyframes zoom{

    from{
        opacity:0;
        transform:scale(.7);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

/* Floating */

.float{
    animation:float 3s ease-in-out infinite;
}

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-15px);
    }

    100%{
        transform:translateY(0);
    }

}

/* Rotate */

.rotate:hover{
    transform:rotate(360deg);
}

/* Card Hover */

.card{
    overflow:hidden;
}

.card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

/* Image Hover */

.gallery img{

    transition:.5s;

}

.gallery img:hover{

    transform:scale(1.08);

}

/* Button Animation */

.btn,
.btn2,
button{

    position:relative;

    overflow:hidden;

}

.btn::before,
.btn2::before,
button::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:rgba(255,255,255,.25);

    transition:.5s;

}

.btn:hover::before,
.btn2:hover::before,
button:hover::before{

    left:100%;

}

/* Navbar Hover */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    width:0;

    height:2px;

    background:#ff6b00;

    left:0;

    bottom:-6px;

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* Hero Text */

.hero-content h1{

    animation:heroTitle 1.2s ease;

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content p{

    animation:heroText 1.8s ease;

}

@keyframes heroText{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Pulse */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(255,107,0,.5);

    }

    70%{

        box-shadow:0 0 0 20px rgba(255,107,0,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,107,0,0);

    }

}

/* Bounce */

.bounce{

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-15px);

    }

    60%{

        transform:translateY(-8px);

    }

}

/* Counter Animation */

.counter{

    animation:counterGlow 2s infinite alternate;

}

@keyframes counterGlow{

    from{

        text-shadow:0 0 5px rgba(255,107,0,.2);

    }

    to{

        text-shadow:0 0 20px rgba(255,107,0,.8);

    }

}

/* Footer Icons */

footer a:hover{

    transform:translateY(-6px) scale(1.15);

}

/* Smooth Appear */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}