/* ============================================
   .bg-fire — fundo de brasa animado
   Inspiração: metal incandescente respirando
   ============================================ */

.bg-fire {
    position: relative;
    background-color: var(--background);
    overflow: hidden;
    isolation: isolate;
}

/* Camada 1 — brasa principal (direita, mais quente) */
.bg-fire::before {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: -2;
    background:
        radial-gradient(ellipse 55% 70% at 75% 25%,
            #FFB877 0%,
            #FF7A3D 12%,
            #FF4A1C 25%,
            #E63913 38%,
            #8A2A0E 52%,
            #2A0E05 68%,
            transparent 85%);
    filter: blur(40px);
    animation: fire-drift-1 10s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Camada 2 — brasa secundária (esquerda, mais fria) */
.bg-fire::after {
    content: '';
    position: absolute;
    inset: -20%;
    z-index: -1;
    background:
        radial-gradient(ellipse 45% 60% at 20% 30%,
            #FF7A3D 0%,
            #E63913 18%,
            #8A2A0E 38%,
            #2A0E05 60%,
            transparent 80%);
    filter: blur(50px);
    mix-blend-mode: screen;
    animation: fire-drift-2 10s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

/* Garante que o conteúdo fique acima do fundo */
.bg-fire>* {
    position: relative;
    z-index: 1;
}

/* ============================================
   Animações dessincronizadas (18s, 23s, 31s)
   Números primos relativos = padrão não-repetitivo
   ============================================ */

@keyframes fire-drift-1 {
    0% {
        transform: translate(20%, 0%) scale(1);
        opacity: 0.8;
    }

    25% {
        transform: translate(15%, 5%) scale(1.05);
        opacity: 1;
    }

    50% {
        transform: translate(18%, -5%) scale(0.95);
        opacity: 0.9;
    }

    75% {
        transform: translate(24%, 4%) scale(1.08);
        opacity: 1;
    }

    100% {
        transform: translate(18%, 0%) scale(1.0);
        opacity: 0.92;
    }
}

@keyframes fire-drift-2 {
    0% {
        transform: translate(-5%, -5%) scale(0.9);
        opacity: 0.7;
    }

    30% {
        transform: translate(3%, -2%) scale(1.1);
        opacity: 0.85;
    }

    60% {
        transform: translate(-2%, 5%) scale(0.93);
        opacity: 0.65;
    }

    100% {
        transform: translate(1%, 5%) scale(1.05);
        opacity: 0.8;
    }
}

/* ============================================
   Respeita preferência de movimento reduzido
   (acessibilidade — obrigatório em site sério)
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    .bg-fire::before,
    .bg-fire::after {
        animation: none;
    }
}