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

body{
    animation: fadeIn 1s ease;
}

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

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

.hero-content{
    animation: floating 5s ease-in-out infinite;
}

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

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

.download-btn{

    animation: glow 2s infinite alternate;

}

@keyframes glow{

    from{

        box-shadow:
        0 0 10px #00ff88;

    }

    to{

        box-shadow:
        0 0 30px #00ff88,
        0 0 60px #00ff88;

    }

}

/* ==========================
   SOCIAL ICONS
========================== */

.socials a{

    animation:socialFloat 4s infinite ease-in-out;

}

.socials a:nth-child(2){
    animation-delay:.3s;
}

.socials a:nth-child(3){
    animation-delay:.6s;
}

.socials a:nth-child(4){
    animation-delay:.9s;
}

@keyframes socialFloat{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }

}

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

.logo{

    animation:logoPulse 3s infinite;

}

@keyframes logoPulse{

    0%{

        text-shadow:
        0 0 10px #00ff88;

    }

    50%{

        text-shadow:
        0 0 30px #00ff88,
        0 0 60px #00ff88;

    }

    100%{

        text-shadow:
        0 0 10px #00ff88;

    }

}