/*==================================================
    L2RAIZ LANDING
    ANIMATIONS.CSS
==================================================*/

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

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

@keyframes fadeUp{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@keyframes glow{

    0%{

        filter:
        drop-shadow(0 0 10px rgba(212,175,55,.15));

    }

    50%{

        filter:

        drop-shadow(0 0 18px rgba(212,175,55,.30))

        drop-shadow(0 0 40px rgba(212,175,55,.15));

    }

    100%{

        filter:
        drop-shadow(0 0 10px rgba(212,175,55,.15));

    }

}

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

@keyframes titleGlow{

    0%{

        text-shadow:

        0 0 8px rgba(255,210,120,.12);

    }

    50%{

        text-shadow:

        0 0 18px rgba(255,210,120,.30),

        0 0 45px rgba(255,210,120,.10);

    }

    100%{

        text-shadow:

        0 0 8px rgba(255,210,120,.12);

    }

}

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

@keyframes shine{

    0%{

        left:-180%;

    }

    100%{

        left:180%;

    }

}

/*=========================================
LIGHT PULSE
=========================================*/

@keyframes lightPulse{

    0%{

        opacity:.45;
        transform:scale(1);

    }

    50%{

        opacity:1;
        transform:scale(1.08);

    }

    100%{

        opacity:.45;
        transform:scale(1);

    }

}

/*=========================================
FOG
=========================================*/

@keyframes fogMove{

    from{

        transform:translateX(-5%);

    }

    to{

        transform:translateX(5%);

    }

}

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

@keyframes backgroundZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}

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

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@keyframes rotateLight{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================
PARTICLES
=========================================*/

@keyframes particlesMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-220px);

    }

}

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

@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

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

@keyframes badgeGlow{

    0%{

        box-shadow:

        0 0 0 rgba(212,175,55,0);

    }

    50%{

        box-shadow:

        0 0 22px rgba(212,175,55,.20);

    }

    100%{

        box-shadow:

        0 0 0 rgba(212,175,55,0);

    }

}

/*=========================================
HERO APPEAR
=========================================*/

@keyframes heroAppear{

    from{

        opacity:0;

        transform:

        translateY(60px)

        scale(.98);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

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

@keyframes footerFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

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

@keyframes rotateGlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================
GOLD SPARKLE
=========================================*/

@keyframes sparkle{

    0%{

        opacity:.3;

        transform:scale(1);

    }

    50%{

        opacity:1;

        transform:scale(1.4);

    }

    100%{

        opacity:.3;

        transform:scale(1);

    }

}

/*=========================================
SHAKE
=========================================*/

@keyframes shake{

    0%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-2px);

    }

    50%{

        transform:translateX(2px);

    }

    75%{

        transform:translateX(-2px);

    }

    100%{

        transform:translateX(0);

    }

}