/* =========================================================
   PANORAMA DE MERCADO
   @oEvandroSoares

   FASE 4

   Arquivo:
   animations.css

   Animações Premium do Terminal
========================================================= */





/*
=========================================================
ENTRADA DOS COMPONENTES
=========================================================
*/


.fade-in {


    animation:

    fadeIn

    .5s

    ease forwards;



}









@keyframes fadeIn {


    from {


        opacity:

        0;



        transform:

        translateY(10px);



    }



    to {


        opacity:

        1;



        transform:

        translateY(0);



    }



}









/*
=========================================================
ATUALIZAÇÃO DE PREÇO
=========================================================
*/


.price-update {


    animation:

    priceFlash

    .8s

    ease;



}









@keyframes priceFlash {


    0% {


        background:

        rgba(

            45,

            140,

            255,

            .30

        );



    }




    100% {


        background:

        transparent;



    }



}









/*
=========================================================
ALTA
=========================================================
*/


.flash-green {


    animation:

    greenPulse

    1s

    ease;



}









@keyframes greenPulse {


    0% {


        box-shadow:

        0 0 0

        rgba(

            0,

            208,

            132,

            0

        );



    }



    50% {


        box-shadow:

        0 0 20px

        rgba(

            0,

            208,

            132,

            .8

        );



    }



    100% {


        box-shadow:

        0 0 0

        rgba(

            0,

            208,

            132,

            0

        );



    }



}









/*
=========================================================
BAIXA
=========================================================
*/


.flash-red {


    animation:

    redPulse

    1s

    ease;



}









@keyframes redPulse {


    0% {


        box-shadow:

        0 0 0

        rgba(

            255,

            77,

            90,

            0

        );



    }



    50% {


        box-shadow:

        0 0 20px

        rgba(

            255,

            77,

            90,

            .8

        );



    }



    100% {


        box-shadow:

        0 0 0

        rgba(

            255,

            77,

            90,

            0

        );



    }



}









/*
=========================================================
STATUS MERCADO ABERTO
=========================================================
*/


.market-open {


    animation:

    marketPulse

    2s

    infinite;



}









@keyframes marketPulse {


    0% {


        opacity:

        1;



    }




    50% {


        opacity:

        .45;



    }




    100% {


        opacity:

        1;



    }



}









/*
=========================================================
WEBSOCKET CONECTADO
=========================================================
*/


.connection-live {


    animation:

    connectionGlow

    2s

    infinite;



}









@keyframes connectionGlow {


    0% {


        box-shadow:

        0 0 5px

        var(--green);



    }



    50% {


        box-shadow:

        0 0 18px

        var(--green);



    }



    100% {


        box-shadow:

        0 0 5px

        var(--green);



    }



}









/*
=========================================================
ALERTA DE NOTÍCIA
=========================================================
*/


.news-alert {


    animation:

    newsBlink

    1.5s

    infinite;



}









@keyframes newsBlink {


    0% {


        border-color:

        var(--border-color);



    }



    50% {


        border-color:

        var(--yellow);



    }



    100% {


        border-color:

        var(--border-color);



    }



}









/*
=========================================================
EVENTO ECONÔMICO IMPORTANTE
=========================================================
*/


.high-impact {


    animation:

    warningPulse

    1s

    infinite;



}









@keyframes warningPulse {


    0% {


        transform:

        scale(1);



    }



    50% {


        transform:

        scale(1.03);



    }



    100% {


        transform:

        scale(1);



    }



}









/*
=========================================================
CARREGAMENTO
=========================================================
*/


.loading {


    animation:

    loading

    1.2s

    infinite;



}









@keyframes loading {


    0% {


        opacity:

        .3;



    }



    50% {


        opacity:

        1;



    }



    100% {


        opacity:

        .3;



    }



}









/*
=========================================================
SCROLL SUAVE
=========================================================
*/


.slide-up {


    animation:

    slideUp

    .4s

    ease;



}









@keyframes slideUp {


    from {


        transform:

        translateY(20px);



        opacity:

        0;



    }




    to {


        transform:

        translateY(0);



        opacity:

        1;



    }



}









/*
=========================================================
HOVER PREMIUM
=========================================================
*/


.hover-glow {


    transition:

    .3s ease;



}









.hover-glow:hover {


    box-shadow:

    0 0 25px

    rgba(

        45,

        140,

        255,

        .35

    );



}









/*
=========================================================
MODO TERMINAL
=========================================================
*/


.terminal-live {


    animation:

    terminalHeartbeat

    4s

    infinite;



}









@keyframes terminalHeartbeat {


    0% {


        opacity:

        1;



    }



    50% {


        opacity:

        .98;



    }



    100% {


        opacity:

        1;



    }



}