/* ==========================================================================
   Cinematic Effects
   ========================================================================== */

/* Hero Layers Masterpiece */
.hero {
    position: relative;
    overflow: hidden;
    background: var(--color-dark);
}

.hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Dejamos interactuar solo al content layer */
    will-change: transform, opacity;
}

/* Capa 1: Background Profundo */
.hero-bg-deep {
    z-index: 1;
}

/* Capa 2: Atmósfera (Haze) */
.hero-atmosphere {
    z-index: 2;
    background: linear-gradient(to top, rgba(8,8,8,0.8) 0%, rgba(8,8,8,0.2) 60%, rgba(8,8,8,0.6) 100%);
    mix-blend-mode: multiply;
}

/* Capa 3: Iluminación (Bloom y Halos) */
.hero-light-bloom {
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    mix-blend-mode: screen;
}
.bloom-center {
    width: 150vw;
    height: 150vh;
    background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 60%);
    position: absolute;
    top: -20%;
}
.bloom-accent {
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at top center, rgba(201, 162, 39, 0.05) 0%, transparent 70%);
    position: absolute;
    top: 0;
}

/* Capa 4: Midground */
.hero-midground {
    z-index: 4;
}

/* Capa 5: Vignette & Foreground Depth */
.hero-foreground-vignette {
    z-index: 5;
    background: radial-gradient(circle at center, transparent 40%, rgba(4,4,4,0.6) 100%);
    box-shadow: inset 0 0 150px rgba(0,0,0,0.9);
}

/* Capa 6: Contenido */
.hero-layer-content {
    position: relative;
    z-index: 10;
    pointer-events: auto; /* Permitir clicks en botones */
}

/* Oscuridad a Luz (Acto 3) */
.new-beginning-light {
    background: radial-gradient(circle at center, #F8F5F0 0%, #ddd 100%);
}
.new-beginning-light h2 {
    color: var(--color-dark) !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.1);
}