/**
 * Fondo Cinematográfico Premium - Global
 * Degradado bosque nocturno + textura grano SVG
 * Técnica inspirada en Stripe, Linear, Vercel
 * Usado en todas las páginas del sitio
 */

/* === Gradiente multicapa: bosque nocturno === */
body {
    background-color: #050a12 !important;
    /* Base estática - siempre visible */
    background-image:
        linear-gradient(175deg, #040810 0%, #081020 25%, #0c1428 50%, #0a0e1c 75%, #040810 100%) !important;
    background-size: 100% 100% !important;
    background-attachment: fixed !important;
    /* Stacking context: permite z-index:-1 en auroras sin que desaparezcan detrás del fondo */
    isolation: isolate;
}

/* === Aurora animada - capas flotantes con movimiento MUY visible === */
body > .aurora-layer {
    position: fixed;
    top: -15%;
    left: -15%;
    width: 130%;
    height: 130%;
    pointer-events: none;
    z-index: -1;
    will-change: transform;
}

/* Capa 1: Resplandor volcánico naranja - MUY INTENSO */
.aurora-layer--orange {
    background: radial-gradient(ellipse 90% 70% at 70% 10%, rgba(255, 115, 0, 0.28) 0%, rgba(255, 80, 0, 0.12) 40%, transparent 70%);
    animation: auroraDrift1 14s ease-in-out infinite alternate;
}

/* Capa 2: Nebulosa azul profundo - MUY INTENSO */
.aurora-layer--blue {
    background: radial-gradient(ellipse 80% 80% at 15% 50%, rgba(30, 58, 138, 0.32) 0%, rgba(20, 40, 120, 0.14) 45%, transparent 70%);
    animation: auroraDrift2 18s ease-in-out infinite alternate;
}

/* Capa 3: Acento violeta - MUY INTENSO */
.aurora-layer--violet {
    background: radial-gradient(ellipse 70% 60% at 30% 20%, rgba(124, 58, 237, 0.25) 0%, rgba(139, 92, 246, 0.10) 40%, transparent 65%);
    animation: auroraDrift3 20s ease-in-out infinite alternate;
}

/* Capa 4: Horizonte cálido inferior - MUY INTENSO */
.aurora-layer--warm {
    background: radial-gradient(ellipse 110% 50% at 50% 95%, rgba(234, 88, 12, 0.22) 0%, rgba(255, 115, 0, 0.08) 40%, transparent 65%);
    animation: auroraDrift4 16s ease-in-out infinite alternate;
}

/* Movimientos muy amplios y visibles (120-200px) */
@keyframes auroraDrift1 {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-150px, 80px) scale(1.2); }
    50%  { transform: translate(-60px, 150px) scale(1.08); }
    75%  { transform: translate(120px, 40px) scale(1.3); }
    100% { transform: translate(80px, -100px) scale(1.15); }
}

@keyframes auroraDrift2 {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(180px, -80px) scale(1.22); }
    50%  { transform: translate(100px, 70px) scale(1.1); }
    75%  { transform: translate(-80px, 140px) scale(1.28); }
    100% { transform: translate(-140px, -40px) scale(1.16); }
}

@keyframes auroraDrift3 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(130px, 110px) scale(1.3); }
    66%  { transform: translate(-110px, 50px) scale(1.12); }
    100% { transform: translate(90px, -120px) scale(1.25); }
}

@keyframes auroraDrift4 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-120px, -80px) scale(1.2); }
    100% { transform: translate(130px, -40px) scale(1.12); }
}

/* === Textura grano cinematográfico (SVG inline) === */
body::after {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    background-size: 256px 256px !important;
    opacity: 0.035 !important;
    mix-blend-mode: overlay !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* === Viñeta de profundidad atmosférica === */
body::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(5, 10, 18, 0.5) 100%) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* === Mobile: simplificar para rendimiento === */
@media (max-width: 768px) {
    body {
        background-attachment: scroll !important;
    }

    /* Aurora layers: estáticas en mobile, sin animación pero visibles */
    .aurora-layer--orange {
        background: radial-gradient(ellipse 70% 60% at 75% 15%, rgba(255, 115, 0, 0.12) 0%, transparent 65%);
        animation: none !important;
    }

    .aurora-layer--blue {
        background: radial-gradient(ellipse 60% 50% at 15% 50%, rgba(30, 58, 138, 0.14) 0%, transparent 60%);
        animation: none !important;
    }

    .aurora-layer--violet,
    .aurora-layer--warm {
        display: none !important;
    }

    /* Noise más sutil en mobile */
    body::after {
        opacity: 0.025 !important;
        background-size: 200px 200px !important;
    }
}

/* === Accesibilidad: respetar reduced-motion === */
@media (prefers-reduced-motion: reduce) {
    .aurora-layer--orange,
    .aurora-layer--blue,
    .aurora-layer--violet,
    .aurora-layer--warm {
        animation: none !important;
    }
}