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

body{
    animation:pageFade 1s ease;
}

@keyframes pageFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

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

.hero-content{

    animation:heroUp 1.2s ease;

}

@keyframes heroUp{

    from{

        opacity:0;
        transform:translateY(80px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* ===========================
        BUTTONS
=========================== */

.btn-primary{

    animation:pulse 3s infinite;

}

@keyframes pulse{

    0%{

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

    }

    50%{

        box-shadow:0 0 35px rgba(255,255,255,.30);

    }

    100%{

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

    }

}

.btn-primary:hover{

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

}

.btn-secondary:hover{

    transform:translateY(-6px);

}

/* ===========================
        FLOATING CARDS
=========================== */

.card{

    animation:floatCard 6s ease-in-out infinite;

}

.card:nth-child(2){

    animation-delay:.5s;

}

.card:nth-child(3){

    animation-delay:1s;

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===========================
        ABOUT BOXES
=========================== */

.about-box{

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

}

.about-box:nth-child(2){

    animation-delay:.5s;

}

.about-box:nth-child(3){

    animation-delay:1s;

}

@keyframes boxFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===========================
      HERO TITLE EFFECT
=========================== */

.hero h1{

    animation:textGlow 5s infinite;

}

@keyframes textGlow{

    0%{

        text-shadow:0 0 0px white;

    }

    50%{

        text-shadow:
        0 0 18px rgba(255,255,255,.25);

    }

    100%{

        text-shadow:none;

    }

}

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

nav a{

    transition:.35s;

}

nav a:hover{

    letter-spacing:1px;

}

/* ===========================
      SCROLL REVEAL
=========================== */

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:all 1s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

.hero{

    animation:zoomHero 14s ease-in-out infinite alternate;

}

@keyframes zoomHero{

    from{

        background-size:100%;

    }

    to{

        background-size:108%;

    }

}

/* ===========================
      CTA
=========================== */

.cta{

    position:relative;

    overflow:hidden;

}

.cta::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

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

    border-radius:50%;

    filter:blur(80px);

    left:-120px;
    top:-120px;

    animation:moveGlow 10s linear infinite;

}

@keyframes moveGlow{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(300px,120px);

    }

    100%{

        transform:translate(0,0);

    }

}

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

footer a{

    transition:.3s;

}

footer a:hover{

    color:white;

    padding-left:12px;

}

/* ===========================
       ICON EFFECT
=========================== */

.about-box i{

    transition:.4s;

}

.about-box:hover i{

    transform:rotate(12deg) scale(1.2);

}

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

.logo{

    transition:.35s;

}

.logo:hover{

    transform:scale(1.05);

    letter-spacing:2px;

}

/* ===========================
      SMOOTH TRANSITIONS
=========================== */

section{

    transition:.4s;

}