/* ==========================================================
   ANIMATIONS.CSS
   Elegant Architectural Motion
========================================================== */

/* -----------------------------
   Keyframes
------------------------------*/

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

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

@keyframes fadeLeft {

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

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

}

@keyframes fadeRight {

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

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

}

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.92);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

@keyframes float {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

    100% {

        transform: translateY(0px);

    }

}

@keyframes underline {

    from {

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes pulse {

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ---------------------------------------
   Initial State
--------------------------------------- */

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.reveal.show{

    opacity:1;

    transform:none;

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

}

.fade-left.show{

    animation:fadeLeft .9s forwards;

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

}

.fade-right.show{

    animation:fadeRight .9s forwards;

}

.zoom{

    opacity:0;

    transform:scale(.95);

}

.zoom.show{

    animation:zoomIn .9s forwards;

}

/* ---------------------------------------
   Hero
--------------------------------------- */

.hero-tag{

    animation:fadeIn 1s ease;

}

.hero h1{

    animation:fadeUp 1s ease .2s both;

}

.hero-description{

    animation:fadeUp 1s ease .4s both;

}

.hero-buttons{

    animation:fadeUp 1s ease .6s both;

}

/* ---------------------------------------
   Navigation
--------------------------------------- */

nav a{

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    bottom:-6px;

    left:0;

    width:0;

    height:2px;

    background:var(--accent);

    transition:.4s;

}

nav a:hover::after{

    width:100%;

}

/* ---------------------------------------
   Cards
--------------------------------------- */

.project-card{

    overflow:hidden;

    position:relative;

}

.project-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:0;

    background:var(--accent);

    transition:.45s;

}

.project-card:hover::before{

    height:100%;

}

.project-card:hover{

    transform:translateY(-12px);

}

.project-card h3{

    transition:.35s;

}

.project-card:hover h3{

    color:var(--accent);

}

/* ---------------------------------------
   Images
--------------------------------------- */

.gallery img{

    transition:.6s;

    cursor:pointer;

}

.gallery img:hover{

    transform:scale(1.04);

}

.about-image img{

    transition:.8s;

}

.about-image:hover img{

    transform:scale(1.05);

}

/* ---------------------------------------
   Buttons
--------------------------------------- */

.btn-primary,
.btn-secondary{

    position:relative;

    overflow:hidden;

}

.btn-primary::before,
.btn-secondary::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:0;

    height:0;

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

    border-radius:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.btn-primary:hover::before,
.btn-secondary:hover::before{

    width:350px;

    height:350px;

}

/* ---------------------------------------
   Timeline
--------------------------------------- */

.timeline-item{

    transition:.5s;

}

.timeline-item:hover{

    transform:translateX(12px);

}

.timeline-item::before{

    transition:.4s;

}

.timeline-item:hover::before{

    transform:scale(1.4);

}

/* ---------------------------------------
   Contact Cards
--------------------------------------- */

.contact-card{

    transition:.4s;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 50px rgba(0,0,0,.08);

}

/* ---------------------------------------
   Tags
--------------------------------------- */

.tag{

    transition:.35s;

}

.tag:hover{

    transform:translateY(-5px);

}

/* ---------------------------------------
   Floating Elements
--------------------------------------- */

.float{

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

}

.rotate{

    animation:rotateSlow 25s linear infinite;

}

/* ---------------------------------------
   Stagger Animation
--------------------------------------- */

.stagger>*{

    opacity:0;

    transform:translateY(35px);

}

.stagger.show>*:nth-child(1){

    animation:fadeUp .8s forwards .1s;

}

.stagger.show>*:nth-child(2){

    animation:fadeUp .8s forwards .2s;

}

.stagger.show>*:nth-child(3){

    animation:fadeUp .8s forwards .3s;

}

.stagger.show>*:nth-child(4){

    animation:fadeUp .8s forwards .4s;

}

.stagger.show>*:nth-child(5){

    animation:fadeUp .8s forwards .5s;

}

.stagger.show>*:nth-child(6){

    animation:fadeUp .8s forwards .6s;

}

/* ---------------------------------------
   Page Transition
--------------------------------------- */

body{

    animation:fadeIn .8s ease;

}

/* ---------------------------------------
   Selection
--------------------------------------- */

::selection{

    background:var(--accent);

    color:#fff;

}

/* ---------------------------------------
   Scrollbar
--------------------------------------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#ece7de;

}

::-webkit-scrollbar-thumb{

    background:var(--accent);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--accent-light);

}