.mc-explosion {
    position: fixed;
    z-index: 11;
    pointer-events: none;
    overflow: hidden;
}

.mc-creeper {
    position: absolute;
    width: 15%;
    left: -20%;
    top: 50%;

    transform: translateY(-50%);

    transition: left 1.2s ease;
}

.mc-flash {
    position: absolute;
    inset: 0;

    background: white;
    opacity: 0;
}

.mc-hole {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

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

    background: #0A0A0A;

    /* blocky shape */
    clip-path: polygon(35% 0%,
                50% 0%,
                50% 5%,
                65% 5%,
                65% 10%,
                75% 10%,
                75% 15%,
                85% 15%,
                85% 25%,
                95% 25%,
                95% 35%,
                100% 35%,
    
                100% 55%,
                95% 55%,
                95% 70%,
                90% 70%,
                90% 80%,
                80% 80%,
                80% 90%,
                70% 90%,
                70% 95%,
                55% 95%,
                55% 100%,
    
                40% 100%,
                40% 95%,
                25% 95%,
                25% 90%,
                15% 90%,
                15% 80%,
                5% 80%,
                5% 70%,
                0% 70%,
    
                0% 50%,
                5% 50%,
                5% 35%,
                10% 35%,
                10% 25%,
                20% 25%,
                20% 15%,
                30% 15%,
                30% 5%,
                35% 5%);

    transition: width 0.5s, height 0.5s;
}