/* ==========================================================
   FADE IN
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(50px);

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

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   FADE LEFT
========================================================== */

.fade-left{

    opacity:0;

    transform:translateX(-60px);

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

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/* ==========================================================
   FADE RIGHT
========================================================== */

.fade-right{

    opacity:0;

    transform:translateX(60px);

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

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* ==========================================================
   ZOOM
========================================================== */

.zoom{

    opacity:0;

    transform:scale(.92);

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

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

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

.hero-content>*{

    opacity:0;

    transform:translateY(30px);

    animation:heroReveal .7s forwards;

}

.hero-content>*:nth-child(1){

    animation-delay:.2s;

}

.hero-content>*:nth-child(2){

    animation-delay:.4s;

}

.hero-content>*:nth-child(3){

    animation-delay:.6s;

}

.hero-content>*:nth-child(4){

    animation-delay:.8s;

}

.hero-content>*:nth-child(5){

    animation-delay:1s;

}

.hero-content>*:nth-child(6){

    animation-delay:1.2s;

}

@keyframes heroReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   FLOAT
========================================================== */

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}

.scroll-down{

    animation:float 2.4s ease infinite;

}

/* ==========================================================
   GLOW
========================================================== */

@keyframes glow{

    0%{

        box-shadow:0 0 0 rgba(100,255,218,0);

    }

    50%{

        box-shadow:0 0 30px rgba(100,255,218,.25);

    }

    100%{

        box-shadow:0 0 0 rgba(100,255,218,0);

    }

}

.btn-primary:hover{

    animation:glow .8s;

}

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

.about-card{

    transition:
    transform .35s,
    box-shadow .35s;

}

.about-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.25);

}

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

.stat{

    transition:
    transform .35s,
    background .35s;

}

.stat:hover{

    transform:translateY(-8px);

}

/* ==========================================================
   NAVBAR
========================================================== */

.header{

    animation:navbarDown .8s;

}

@keyframes navbarDown{

    from{

        opacity:0;

        transform:translateY(-30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.btn{

    transition:
    transform .35s,
    background .35s,
    color .35s,
    border .35s;

}

.btn:hover{

    transform:translateY(-3px);

}

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

.hero-social a,

.hero-email a{

    transition:.35s;

}

.hero-social a:hover{

    transform:translateY(-4px);

}

.hero-email a:hover{

    transform:translateX(-4px);

}

/* ==========================================================
   LINE
========================================================== */

.section-title .line{

    transform-origin:left;

    animation:lineGrow 1.2s;

}

@keyframes lineGrow{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}

/* ==========================================================
   PROGRESS BAR
========================================================== */

.progress-bar{

    transition:width .15s linear;

}

/* ==========================================================
   SKILL
========================================================== */

.skills-list li{

    transition:.3s;

}

.skills-list li:hover{

    padding-left:8px;

}

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

body{

    animation:pageLoad .6s;

}

@keyframes pageLoad{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}