.confetti-wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    inset: 0;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.confetti {
    position: absolute;
    z-index: 1;

    width: 8px;
    height: 8px;
    /* note: width and height are overwritten as inline styles */

    background-color: rebeccapurple;
    border-radius: 50%;

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

.cracker {
    position: absolute;
    z-index: 2;

    width: 0px;
    height: 0px;

    --target-width: 64px;
    --target-height: 64px;

    background-color: #aa6622;
    border-radius: 50%;

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

    animation: crackle 700ms linear forwards;
}

@keyframes crackle {
    0% {
        width: 0px;
        height: 0px;

        /* opacity: 1; */
        /* scale: 0; */
    }
    50% {
        width: calc(var(--target-width) * 0.8);
        height: calc(var(--target-height) * 0.8);

        opacity: 1;

        scale: 1.1;
    }
    100% {
        width: var(--target-width);
        height: var(--target-height);

        opacity: 0.1;
        scale: 0.6;

        /* width: 64px; */
        /* height: 64px; */

        /* opacity: 0.5; */
        /* scale: 1; */
    }
}