/* =====================================
   CIPHER
   Animations
===================================== */

/* Background */

.background{

    animation: bgMove 18s ease-in-out infinite alternate;

}

@keyframes bgMove{

    0%{

        transform:scale(1) rotate(0deg);

    }

    50%{

        transform:scale(1.08) rotate(2deg);

    }

    100%{

        transform:scale(1.15) rotate(-2deg);

    }

}

/* Fade */

header,
.hero,
.features,
footer{

    opacity:0;

    animation:fadeUp .8s forwards;

}

.hero{

    animation-delay:.2s;

}

.features{

    animation-delay:.4s;

}

footer{

    animation-delay:.6s;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* Cards */

.card{

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

}

.card:nth-child(2){

    animation-delay:1s;

}

.card:nth-child(3){

    animation-delay:2s;

}

.card:nth-child(4){

    animation-delay:3s;

}

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Buttons */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.45),

            transparent

        );

    transform:skewX(-20deg);

}

.btn:hover::before{

    animation:shine .8s linear;

}

@keyframes shine{

    from{

        left:-120%;

    }

    to{

        left:150%;

    }

}

/* Logo */

.logo h1{

    animation:logoGlow 3s ease-in-out infinite;

}

@keyframes logoGlow{

    0%{

        text-shadow:0 0 5px rgba(59,130,246,.4);

    }

    50%{

        text-shadow:
            0 0 20px rgba(59,130,246,.9),
            0 0 40px rgba(59,130,246,.6);

    }

    100%{

        text-shadow:0 0 5px rgba(59,130,246,.4);

    }

}

/* Hover Glow */

.card:hover{

    box-shadow:

        0 0 20px rgba(59,130,246,.25),

        0 20px 50px rgba(0,0,0,.4);

}

.primary:hover{

    box-shadow:

        0 0 18px rgba(59,130,246,.6);

}

.secondary:hover{

    box-shadow:

        0 0 18px rgba(59,130,246,.45);

}