.fire-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #1a0500, #000);
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.ember {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    background: #ff4500;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff4500, 0 0 20px #ff8c00;
    animation: rise linear infinite;
}

@keyframes rise {
    0% {
        bottom: -10px;
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        bottom: 100vh;
        transform: translateX(calc(100px * var(--drift)));
        opacity: 0;
    }
}

.heat-distortion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    backdrop-filter: blur(1px);
    opacity: 0.3;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.01' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.5'/%3E%3C/svg%3E");
    animation: heat-wave 2s infinite linear;
}

@keyframes heat-wave {
    0% {
        transform: translateY(0) scale(1.05);
    }

    50% {
        transform: translateY(-5px) scale(1.05);
    }

    100% {
        transform: translateY(0) scale(1.05);
    }
}

.fire-text {
    color: #ff8c00;
    text-shadow:
        0 0 10px #ff4500,
        0 0 20px #ff0000,
        0 0 40px #800000;
    animation: burn-text 2s infinite alternate;
}

@keyframes burn-text {
    0% {
        text-shadow: 0 0 10px #ff4500, 0 0 20px #ff0000;
    }

    100% {
        text-shadow: 0 0 15px #ff8c00, 0 0 30px #ff4500, 0 0 50px #ff0000;
    }
}