/* ==========================================================
   CARD 6 - SMOKE
========================================================== */

/* ==========================================================
   SMOKE BASE
========================================================== */

.smoke{

    position:absolute;

    left:50%;
    top:50%;

    pointer-events:none;
    user-select:none;

    transform-origin:center center;

}

/* ==========================================================
   SMOKE LAYERS
========================================================== */

.smoke-back{

    width:520px;
    opacity:.30;

    animation: smokeBack 10s linear infinite;

}

.smoke-middle{

    width:450px;
    opacity:.55;

    animation: smokeMiddle 8s linear infinite;

}

.smoke-front{

    width:390px;
    opacity:.22;

    animation: smokeFront 12s linear infinite;

}

/* ==========================================================
   BACK SMOKE
========================================================== */

@keyframes smokeBack{

    0%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(0deg)
        scale(.20);

        /*filter:
        brightness(.8)
        drop-shadow(0 0 8px rgba(255,0,0,.20));*/

    }

    20%{

        opacity:.30;

        transform:
        translate(-51%,-49%)
        rotate(45deg)
        scale(1);

    }

    50%{

        opacity:.38;

        transform:
        translate(-49%,-51%)
        rotate(180deg)
        scale(1.05);

        /*filter:
        brightness(1.15)
        drop-shadow(0 0 20px rgba(255,0,0,.45));*/

    }

    100%{

        opacity:.30;

        transform:
        translate(-50%,-50%)
        rotate(360deg)
        scale(1);

        /*filter:
        brightness(.8)
        drop-shadow(0 0 8px rgba(255,0,0,.20));*/

    }

}

/* ==========================================================
   MIDDLE SMOKE
========================================================== */

@keyframes smokeMiddle{

    0%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(0deg)
        scale(.15);

    }

    20%{

        opacity:.55;

        transform:
        translate(-49%,-50%)
        rotate(-60deg)
        scale(.95);

    }

    50%{

        opacity:.70;

        transform:
        translate(-51%,-49%)
        rotate(-180deg)
        scale(1.10);

        /*filter:
        brightness(1.30)
        drop-shadow(0 0 28px rgba(255,40,40,.75));*/

    }

    100%{

        opacity:.55;

        transform:
        translate(-50%,-50%)
        rotate(-360deg)
        scale(1);

        /*filter:
        brightness(.95)
        drop-shadow(0 0 10px rgba(255,0,0,.25));*/

    }

}

/* ==========================================================
   FRONT SMOKE
========================================================== */

@keyframes smokeFront{

    0%{

        opacity:0;

        transform:
        translate(-50%,-50%)
        rotate(0deg)
        scale(.10);

    }

    20%{

        opacity:.22;

        transform:
        translate(-50.5%,-49.5%)
        rotate(30deg)
        scale(.90);

    }

    50%{

        opacity:.35;

        transform:
        translate(-49.5%,-50.5%)
        rotate(180deg)
        scale(1.08);

        /*filter:
        brightness(1.40)
        drop-shadow(0 0 35px rgba(255,60,60,.85));*/

    }

    100%{

        opacity:.22;

        transform:
        translate(-50%,-50%)
        rotate(360deg)
        scale(.95);

        /*filter:
        brightness(.95)
        drop-shadow(0 0 10px rgba(255,0,0,.25));*/

    }

}
/* ==========================================================
   ENERGY BUILD UP
========================================================== */

/*.smoke.energy{

    animation-duration:4s;

    filter:brightness(1.55);

    transition:

        filter .8s ease,
        opacity .8s ease;

}*/