/* Fire: soft billows + tiny sparks */
#fireContainer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 32vh;
    pointer-events: none;
    z-index: 2000;
    overflow: hidden;
}

.fire-smoke {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    transform-origin: 50% 100%;
    will-change: transform, opacity, filter;
    animation: smoke-rise var(--smoke-dur, 3.2s) ease-out forwards;
}

@keyframes smoke-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(0.65);
        opacity: 0;
    }
    /* Stay invisible while still below / clipping the bottom edge */
    24% {
        opacity: 0;
    }
    38% {
        transform: translate3d(var(--smoke-drift, 12px), -11vh, 0) scale(1);
        opacity: 0.36;
    }
    68% {
        transform: translate3d(calc(var(--smoke-drift, 12px) * -0.8), -20vh, 0) scale(1.35);
        opacity: 0.2;
    }
    100% {
        transform: translate3d(var(--smoke-drift-end, 0px), -32vh, 0) scale(1.85);
        opacity: 0;
    }
}

.fire-spark {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    animation: spark-rise var(--spark-dur, 0.7s) ease-out forwards;
}

@keyframes spark-rise {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0;
    }
    18% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--spark-drift, 0px), -9vh, 0) scale(0.15);
        opacity: 0;
    }
}