/* ==========================================
   CyberShield
   File: css/animation.css
   ========================================== */


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

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}

.fade-in{

    animation:fadeIn 1s ease forwards;

}


/* ==========================
   SLIDE LEFT
========================== */

@keyframes slideLeft{

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

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

}

.slide-left{

    animation:slideLeft 1s ease forwards;

}


/* ==========================
   SLIDE RIGHT
========================== */

@keyframes slideRight{

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

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

}

.slide-right{

    animation:slideRight 1s ease forwards;

}


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

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.7);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

.zoom{

    animation:zoomIn 1s ease;

}


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

@keyframes floating{

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

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

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

}

.float{

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

}


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

@keyframes glow{

    0%{

        box-shadow:

        0 0 5px #00ff99,

        0 0 10px #00ff99;

    }

    50%{

        box-shadow:

        0 0 25px #00ff99,

        0 0 45px #00ff99;

    }

    100%{

        box-shadow:

        0 0 5px #00ff99,

        0 0 10px #00ff99;

    }

}

.glow{

    animation:glow 2s infinite;

}


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

@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }

    100%{
        transform:scale(1);
    }

}

.btn{

    animation:pulse 3s infinite;

}


/* ==========================
   ROTATE
========================== */

@keyframes rotate{

    from{
        transform:rotate(0);
    }

    to{
        transform:rotate(360deg);
    }

}

.rotate{

    animation:rotate 15s linear infinite;

}


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

.hero h1{

    animation:fadeIn 1.2s ease;

}

.hero p{

    animation:fadeIn 1.8s ease;

}

.hero .btn{

    animation:

    fadeIn 2.3s ease,

    pulse 3s infinite;

}


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

.card{

    transition:.35s;

}

.card:hover{

    transform:

    translateY(-12px)

    scale(1.03);

}


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

.card i{

    animation:floating 4s infinite;

}


/* ==========================
   CYBER BORDER
========================== */

@keyframes borderGlow{

    0%{

        border-color:#00ff99;

    }

    50%{

        border-color:#00d9ff;

    }

    100%{

        border-color:#00ff99;

    }

}

.card{

    animation:borderGlow 4s infinite;

}


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

body::before{

    content:"";

    position:fixed;

    top:-100%;

    left:0;

    width:100%;

    height:100%;

    background:

    linear-gradient(

    transparent,

    rgba(0,255,153,.08),

    transparent

    );

    animation:scan 8s linear infinite;

    pointer-events:none;

    z-index:999;

}

@keyframes scan{

    from{

        top:-100%;

    }

    to{

        top:100%;

    }

}


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

.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:

    radial-gradient(

    rgba(0,255,153,.25),

    transparent 70%

    );

    filter:blur(80px);

    animation:floating 6s infinite;

}


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

.navbar{

    animation:fadeIn 1s ease;

}


/* ==========================
   IMAGE HOVER
========================== */

img{

    transition:.4s;

}

img:hover{

    transform:scale(1.05);

}


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

.hero h1{

    text-shadow:

    0 0 10px #00ff99,

    0 0 25px #00ff99,

    0 0 45px #00ff99;

}


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

footer{

    animation:fadeIn 2s;

}


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

.loader{

    width:80px;

    height:80px;

    border:6px solid #222;

    border-top:6px solid #00ff99;

    border-radius:50%;

    animation:rotate 1s linear infinite;

}


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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}


/* ==========================
   BLINK
========================== */

@keyframes blink{

    50%{

        opacity:.3;

    }

}

.blink{

    animation:blink .8s infinite;

}


/* ==========================
   CYBER BACKGROUND PULSE
========================== */

@keyframes bgPulse{

    0%{

        background-color:#030712;

    }

    50%{

        background-color:#06131b;

    }

    100%{

        background-color:#030712;

    }

}

body{

    animation:bgPulse 10s infinite;

}