/*==========================================================
    TECHYWALK
    animation.css
==========================================================*/


/*==============================
    INITIAL STATE
==============================*/

.logo,
.tagline,
.hero h1,
.description,
.contact-card,
footer{

    opacity:0;

}


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

.logo{

    animation:

    logoReveal 1.2s ease forwards .5s,

    logoFloat 8s ease-in-out infinite 5s,

    logoGlow 5s ease-in-out infinite 5s;

}


@keyframes logoReveal{

0%{

opacity:0;

transform:

translateY(40px)

scale(.92);

filter:

blur(8px)

drop-shadow(0 0 0 rgba(46,141,255,0));

}

100%{

opacity:1;

transform:

translateY(0)

scale(1);

filter:

blur(0)

drop-shadow(0 0 35px rgba(46,141,255,.20));

}

}



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

@keyframes logoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}



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

@keyframes logoGlow{

0%,100%{

filter:

drop-shadow(0 0 25px rgba(46,141,255,.15));

}

50%{

filter:

drop-shadow(0 0 45px rgba(46,141,255,.35));

}

}



/*==============================
    TAGLINE
==============================*/

.tagline{

animation:

fadeUp .8s ease forwards 1.4s;

}



/*==============================
    TITLE
==============================*/

.hero h1{

animation:

fadeUp .8s ease forwards 2.1s;

}



/*==============================
    DESCRIPTION
==============================*/

.description{

animation:

fadeUp .8s ease forwards 2.8s;

}



/*==============================
    CONTACT
==============================*/

.contact-card{

animation:

fadeUp .8s ease forwards 3.5s;

}



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

footer{

animation:

fadeUp .8s ease forwards 4.3s;

}



/*==============================
    FADE UP
==============================*/

@keyframes fadeUp{

0%{

opacity:0;

transform:

translateY(35px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}



/*==============================
    BACKGROUND
==============================*/

.background{

animation:

backgroundZoom 40s linear infinite alternate;

}


@keyframes backgroundZoom{

0%{

transform:scale(1);

}

100%{

transform:scale(1.06);

}

}



/*==============================
    OVERLAY
==============================*/

.overlay{

animation:

overlayPulse 10s ease-in-out infinite;

}


@keyframes overlayPulse{

0%,100%{

opacity:1;

}

50%{

opacity:.75;

}

}



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

.ambient-glow{

animation:

ambientGlow 12s ease-in-out infinite;

}


@keyframes ambientGlow{

0%,100%{

transform:

translate(-50%,-50%)

scale(1);

opacity:.7;

}

50%{

transform:

translate(-50%,-50%)

scale(1.12);

opacity:1;

}

}



/*==============================
    EMAIL CARD
==============================*/

.contact-card{

transition:

.4s ease;

}


.contact-card:hover{

transform:

translateY(-5px)

scale(1.02);

}



/*==============================
    SERVICE HIGHLIGHT
==============================*/

.description span{

transition:.35s;

}


.description span:hover{

text-shadow:

0 0 20px rgba(46,141,255,.45);

}



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

body{

animation:

pageAppear 1s ease;

}


@keyframes pageAppear{

from{

opacity:0;

}

to{

opacity:1;

}

}

/* ==========================================
   LOGO SHINE EFFECT
========================================== */

.logo {
    position: relative;
}

.logo.shine {
    filter:
        brightness(1.12)
        drop-shadow(0 0 45px rgba(46,141,255,.35));
    transition: filter .8s ease;
}