/* --- EXPLOSION FX --- */
@keyframes screenShake {
    0% {
        transform: translate(0, 0);
        filter: brightness(1);
    }

    10% {
        transform: translate(-10px, -10px);
        filter: brightness(2);
    }

    20% {
        transform: translate(10px, 10px);
        filter: brightness(5);
    }

    30% {
        transform: translate(-10px, 10px);
        filter: brightness(8);
    }

    40% {
        transform: translate(10px, -10px);
        filter: brightness(10);
        background: white;
    }

    50% {
        transform: translate(0, 0);
        filter: brightness(8);
    }

    60% {
        transform: translate(-5px, 5px);
        filter: brightness(5);
    }

    80% {
        transform: translate(5px, -5px);
        filter: brightness(2);
    }

    100% {
        transform: translate(0, 0);
        filter: brightness(1);
        background: #f0f0f0;
    }
}

.fx-explosion {
    animation: screenShake 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    position: relative;
    z-index: 999;
    /* Shake everything */
}

.explosion-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0;
    pointer-events: none;
    z-index: 500;
}

.fx-explosion .explosion-flash {
    animation: flashWhite 0.8s ease-out;
}

@keyframes flashWhite {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}