/*
====================================================
XOMA VPN
Animations
====================================================
*/

/*======================================
Плавное появление
======================================*/

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.fade-up{

    opacity:0;

    animation:fadeUp .8s ease forwards;

}

/*======================================
Плавное появление слева
======================================*/

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-left{

    animation:fadeLeft .8s ease forwards;

}

/*======================================
Плавное появление справа
======================================*/

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

.fade-right{

    animation:fadeRight .8s ease forwards;

}

/*======================================
Floating
======================================*/

@keyframes floating{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*======================================
Pulse
======================================*/

@keyframes pulse{

    0%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:.65;

    }

    100%{

        transform:scale(1);

        opacity:1;

    }

}

/*======================================
Glow
======================================*/

@keyframes glow{

    0%{

        box-shadow:

        0 0 0 rgba(78,161,255,.2);

    }

    50%{

        box-shadow:

        0 0 40px rgba(78,161,255,.55);

    }

    100%{

        box-shadow:

        0 0 0 rgba(78,161,255,.2);

    }

}

/*======================================
Signal
======================================*/

@keyframes signal{

    from{

        left:-40%;

    }

    to{

        left:120%;

    }

}

/*======================================
Gradient
======================================*/

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/*======================================
Rotate
======================================*/

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/*==================================================
BACKGROUND ANIMATION
==================================================*/

.background-grid{

    animation:gridMove 30s linear infinite;

}

@keyframes gridMove{

    from{

        background-position:0 0,0 0;

    }

    to{

        background-position:45px 45px,45px 45px;

    }

}

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

.blur-1{

    animation:blobOne 18s ease-in-out infinite;

}

.blur-2{

    animation:blobTwo 24s ease-in-out infinite;

}

@keyframes blobOne{

    0%{

        transform:translate(0,0) scale(1);

    }

    25%{

        transform:translate(40px,60px) scale(1.08);

    }

    50%{

        transform:translate(-30px,90px) scale(.95);

    }

    75%{

        transform:translate(-60px,-20px) scale(1.1);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}

@keyframes blobTwo{

    0%{

        transform:translate(0,0);

    }

    30%{

        transform:translate(-60px,-70px);

    }

    65%{

        transform:translate(70px,-30px);

    }

    100%{

        transform:translate(0,0);

    }

}

/*==================================================
BUTTON SHINE
==================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:70%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transform:skewX(-25deg);

}

.btn:hover::before{

    animation:buttonShine .75s;

}

@keyframes buttonShine{

    from{

        left:-130%;

    }

    to{

        left:170%;

    }

}

/*==================================================
CARD SHINE
==================================================*/

.advantage-card,
.app-card,
.device-card,
.step,
.stat{

    position:relative;

    overflow:hidden;

}

.advantage-card::after,
.app-card::after,
.device-card::after,
.step::after,
.stat::after{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:45%;

    height:100%;

    transform:skewX(-25deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    transition:0s;

}

.advantage-card:hover::after,
.app-card:hover::after,
.device-card:hover::after,
.step:hover::after,
.stat:hover::after{

    animation:shineCard .8s linear;

}

@keyframes shineCard{

    from{

        left:-120%;

    }

    to{

        left:180%;

    }

}

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

.promo-code{

    animation:

        glow 3s ease-in-out infinite;

}

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

.cta-box{

    animation:

        glow 6s ease infinite;

}



/*==================================================
NAV UNDERLINE
==================================================*/

.nav-menu a{

    transition:

        color .3s ease;

}

/*==================================================
SCROLL INDICATOR
==================================================*/

.hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:30px;

    width:2px;

    height:60px;

    background:

        linear-gradient(

            transparent,

            var(--accent),

            transparent

        );

    animation:

        scrollIndicator 2s infinite;

}

@keyframes scrollIndicator{

    0%{

        opacity:0;

        transform:translateY(-12px);

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(18px);

    }

}