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

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@keyframes logoGlow{

    0%{

        text-shadow:
        0 0 12px rgba(0,255,255,.4),
        0 0 30px rgba(0,255,255,.2);

    }

    50%{

        text-shadow:
        0 0 25px rgba(0,255,255,.9),
        0 0 70px rgba(0,255,255,.6);

    }

    100%{

        text-shadow:
        0 0 12px rgba(0,255,255,.4),
        0 0 30px rgba(0,255,255,.2);

    }

}

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

@keyframes buttonGlow{

    0%{

        box-shadow:

        0 0 0 rgba(0,255,255,0);

    }

    50%{

        box-shadow:

        0 0 25px rgba(0,255,255,.55);

    }

    100%{

        box-shadow:

        0 0 0 rgba(0,255,255,0);

    }

}

/* ==========================================================
   HUD PULSE
========================================================== */

@keyframes hudPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================================
   TOAST
========================================================== */

@keyframes toastPop{

    from{

        opacity:0;

        transform:translate(-50%,40px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}/* ==========================================================
   ANIMATIONS
========================================================== */

#logo{

    animation:

    logoGlow 3s infinite ease-in-out;

}

#menuPanel{

    animation:

    fadeIn .8s ease,

    floating 6s ease-in-out infinite;

}

#playButton{

    animation:

    buttonGlow 2.5s infinite;

}

.hudItem{

    animation:

    hudPulse 4s infinite;

}

#gameOverPanel{

    animation:

    fadeIn .35s ease;

}