/**
 * FONDO ÉPICO BRUTAL - Thaloria-Global.com
 * Dragón Chino Épico - Imagen de fondo
 * Usa una imagen literal en lugar de gradientes CSS
 */

/* Asegurar que html no tenga fondo que interfiera */
html {
    background: transparent !important;
    background-color: transparent !important;
}

body {
    /* Fondo transparente - sin imagen */
    background-color: transparent;
    background-image: none;
    
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Capa de FUEGO Y LLAMAS INTENSAS del dragón */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* LLAMAS desde la boca - Visibles pero no tapando */
        radial-gradient(ellipse 500px 700px at 50% 12%, 
            rgba(255, 200, 0, 0.5) 0%, 
            rgba(255, 160, 0, 0.45) 15%,
            rgba(255, 120, 0, 0.4) 30%,
            rgba(255, 80, 0, 0.35) 40%,
            rgba(255, 40, 0, 0.3) 50%,
            transparent 65%),
        /* Llamas laterales izquierda */
        radial-gradient(ellipse 400px 600px at 35% 15%, 
            rgba(255, 160, 0, 0.4) 0%, 
            rgba(255, 120, 0, 0.35) 20%,
            rgba(255, 80, 0, 0.3) 35%,
            rgba(255, 40, 0, 0.25) 45%,
            transparent 60%),
        /* Llamas laterales derecha */
        radial-gradient(ellipse 400px 600px at 65% 15%, 
            rgba(255, 160, 0, 0.4) 0%, 
            rgba(255, 120, 0, 0.35) 20%,
            rgba(255, 80, 0, 0.3) 35%,
            rgba(255, 40, 0, 0.25) 45%,
            transparent 60%),
        /* Resplandor del cuerpo del dragón - Visible */
        radial-gradient(ellipse 1600px 2200px at 50% 45%, 
            rgba(255, 100, 0, 0.25) 0%, 
            rgba(255, 80, 0, 0.2) 20%,
            rgba(255, 60, 0, 0.15) 35%,
            rgba(220, 40, 0, 0.12) 50%,
            transparent 65%),
        /* Aura mágica dorada - Visible */
        radial-gradient(circle 700px at 50% 25%, 
            rgba(255, 240, 0, 0.2) 0%, 
            rgba(255, 200, 0, 0.15) 25%,
            rgba(255, 160, 0, 0.12) 40%,
            transparent 65%),
        /* Resplandor de las escamas - Visible */
        radial-gradient(ellipse 1800px 2400px at 50% 50%, 
            rgba(255, 100, 0, 0.12) 0%, 
            rgba(255, 80, 0, 0.1) 25%,
            rgba(255, 60, 0, 0.08) 40%,
            transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: dragonFire 3s ease-in-out infinite, dragonAura 6s ease-in-out infinite, dragonGlow 4s ease-in-out infinite;
    will-change: transform, opacity, filter;
    transform: translateZ(0);
}

@keyframes dragonFire {
    0%, 100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    20% {
        opacity: 0.95;
        transform: scale(1.08) translateY(-15px);
    }
    40% {
        opacity: 1;
        transform: scale(1.05) translateY(-8px);
    }
    60% {
        opacity: 0.95;
        transform: scale(1.08) translateY(-15px);
    }
    80% {
        opacity: 1;
        transform: scale(1.03) translateY(-5px);
    }
}

@keyframes dragonAura {
    0%, 100% {
        filter: brightness(1) hue-rotate(0deg) saturate(1);
    }
    50% {
        filter: brightness(1.15) hue-rotate(8deg) saturate(1.1);
    }
}

@keyframes dragonGlow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.92;
    }
}

/* Partículas de ENERGÍA MÁGICA y FUEGO intensas */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Partículas doradas sutiles - Reducidas */
        radial-gradient(3px 3px at 45% 20%, rgba(255, 215, 0, 0.3), transparent),
        radial-gradient(3px 3px at 55% 20%, rgba(255, 215, 0, 0.3), transparent),
        radial-gradient(2px 2px at 30% 30%, rgba(255, 140, 0, 0.25), transparent),
        radial-gradient(2px 2px at 70% 30%, rgba(255, 140, 0, 0.25), transparent),
        radial-gradient(3px 3px at 50% 35%, rgba(255, 215, 0, 0.3), transparent),
        radial-gradient(2px 2px at 25% 50%, rgba(255, 140, 0, 0.2), transparent),
        radial-gradient(2px 2px at 75% 50%, rgba(255, 140, 0, 0.2), transparent),
        radial-gradient(3px 3px at 40% 60%, rgba(255, 215, 0, 0.25), transparent),
        radial-gradient(3px 3px at 60% 60%, rgba(255, 215, 0, 0.25), transparent),
        /* Partículas de fuego sutiles - Reducidas */
        radial-gradient(2px 2px at 48% 14%, rgba(255, 69, 0, 0.3), transparent),
        radial-gradient(2px 2px at 52% 14%, rgba(255, 69, 0, 0.3), transparent),
        radial-gradient(2px 2px at 35% 18%, rgba(255, 0, 0, 0.25), transparent),
        radial-gradient(2px 2px at 65% 18%, rgba(255, 0, 0, 0.25), transparent),
        radial-gradient(2px 2px at 50% 25%, rgba(255, 140, 0, 0.2), transparent),
        radial-gradient(2px 2px at 20% 40%, rgba(255, 69, 0, 0.2), transparent),
        radial-gradient(2px 2px at 80% 40%, rgba(255, 69, 0, 0.2), transparent),
        radial-gradient(2px 2px at 50% 55%, rgba(255, 0, 0, 0.2), transparent),
        radial-gradient(2px 2px at 15% 70%, rgba(255, 69, 0, 0.2), transparent),
        radial-gradient(2px 2px at 85% 70%, rgba(255, 0, 0, 0.2), transparent);
    background-size: 
        200% 200%, 180% 180%, 160% 160%, 220% 220%, 190% 190%, 170% 170%, 150% 150%, 210% 210%, 200% 200%, 180% 180%,
        200% 200%, 180% 180%, 160% 160%, 220% 220%, 190% 190%, 170% 170%, 150% 150%, 210% 210%, 200% 200%, 180% 180%;
    background-position: 
        0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 0%, 25% 25%, 75% 75%, 50% 50%, 0% 0%,
        0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 0%, 25% 25%, 75% 75%, 50% 50%, 0% 0%;
    pointer-events: none;
    z-index: 0;
    animation: energyParticles 18s linear infinite;
    opacity: 0.8;
    will-change: background-position;
    transform: translateZ(0);
}

@keyframes energyParticles {
    0% {
        background-position: 
            0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%, 50% 0%,
            0% 0%, 100% 0%, 50% 50%, 0% 100%, 100% 100%;
    }
    100% {
        background-position: 
            100% 100%, 0% 100%, 50% 0%, 100% 0%, 0% 0%, 50% 100%,
            100% 100%, 0% 100%, 50% 0%, 100% 0%, 0% 0%;
    }
}

/* Capa adicional de profundidad y atmósfera épica - Negro rojizo más oscuro */
/* NO usar background-color aquí porque tapa el fondo del dragón */
body {
    /* background-color: #0a0000 !important; */ /* Comentado para que se vea el dragón */
    box-shadow: 
        inset 0 0 400px rgba(255, 100, 0, 0.15),
        inset 0 0 600px rgba(255, 60, 0, 0.1),
        inset 0 0 800px rgba(150, 0, 0, 0.15),
        inset 0 0 1000px rgba(0, 0, 0, 0.5);
}

/* Asegurar que el contenido esté por encima del fondo */
#ArtworkHelper,
#Bodycontainer,
#ContentRow {
    position: relative;
    z-index: 1;
    /* Asegurar que no tengan fondo que tape el dragón */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Cambiar fondos blancos de cajas de contenido a negro rojizo */
.BoxContent,
.Content .BoxContent,
.TableContent,
.TableContentContainer,
.InnerTableContainer,
.TableContainer {
    background-color: rgba(10, 0, 0, 0.9) !important;
    background-blend-mode: multiply;
}

/* Overlay oscuro sobre imágenes de scroll para ocultar fondo blanco */
.BoxContent[style*="scroll.gif"],
.Content .BoxContent[style*="scroll.gif"],
div[style*="scroll.gif"] {
    position: relative !important;
}

.BoxContent[style*="scroll.gif"]::before,
.Content .BoxContent[style*="scroll.gif"]::before,
div[style*="scroll.gif"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 0, 0, 0.85) !important;
    pointer-events: none;
    z-index: 1;
}

.BoxContent[style*="scroll.gif"] > *,
.Content .BoxContent[style*="scroll.gif"] > *,
div[style*="scroll.gif"] > * {
    position: relative;
    z-index: 2;
}

/* Asegurar que todas las cajas tengan fondo negro rojizo */
.Content .Box,
.Content .BoxContent,
#ContentHelper .BoxContent {
    background-color: rgba(10, 0, 0, 0.9) !important;
}

/* Asegurar que el canvas de nieve no tape el fondo del dragón */
#snowCanvas {
    z-index: 9997 !important;
    opacity: 0.6 !important;
}

/* Reducir opacidad de efectos navideños para que no tapen el dragón */
.christmas-star {
    opacity: 0.5 !important;
}

.snowflake {
    opacity: 0.4 !important;
}