/* =========================================================
   KEY! | BIOME-ASSETS.CSS
   Fondos del hero, transiciones y fallbacks visuales
========================================================= */

body {
    --biome-background-image: none;
    --biome-midground-image: none;
    --biome-foreground-image: none;
    --biome-atmosphere-image: none;

    --biome-background-position: center center;
    --hero-background-opacity: 0.48;
    --hero-background-transition: 1200ms;
}

/* Encuadre recomendado para cada fondo del hero. */
body[data-biome="jungle"] {
    --biome-background-position: center center;
    --hero-background-opacity: 0.70;
}

body[data-biome="sport"] {
    --biome-background-position: center center;
    --hero-background-opacity: 0.80;
}

body[data-biome="ocean"] {
    --biome-background-position: center top;
    --hero-background-opacity: 0.52;
}

body[data-biome="mountain"] {
    --biome-background-position: center center;
    --hero-background-opacity: 0.46;
}

body[data-biome="desert"] {
    --biome-background-position: center center;
    --hero-background-opacity: 0.48;
}

body[data-biome="work"] {
    --biome-background-position: center center;
    --hero-background-opacity: 0.43;
}

body[data-biome="personal"] {
    --biome-background-position: center center;
    --hero-background-opacity: 0.42;
}

.hero__background,
.hero__layer,
.hero__fog,
.hero__fireflies,
.hero__biome-background-stage {
    pointer-events: none;
}


/* =========================================================
   1. ESCENARIO DOBLE PARA EL CROSSFADE
========================================================= */

.hero__biome-background-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
}

/*
   Esta capa oscurece el lado donde vive el texto, para que
   cualquier fotografía conserve buena legibilidad.
*/
.hero__biome-background-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(
            90deg,
            rgba(2, 10, 7, 0.88) 0%,
            rgba(2, 10, 7, 0.66) 28%,
            rgba(2, 10, 7, 0.24) 54%,
            rgba(2, 10, 7, 0.18) 100%
        );
}

/* Viñeta inferior y lateral para integrar la fotografía. */
.hero__biome-background-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.03) 42%,
            rgba(0, 0, 0, 0.62) 100%
        ),
        radial-gradient(
            circle at center,
            transparent 46%,
            rgba(0, 0, 0, 0.20) 100%
        );
}

.hero__biome-background-image {
    position: absolute;
    inset: -2%;
    z-index: 1;

    opacity: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(
        --biome-background-position,
        center center
    );

    filter:
        saturate(0.88)
        contrast(1.04)
        brightness(0.90);

    transform: scale(1.035);

    transition:
        opacity var(--hero-background-transition) ease,
        transform 9s ease,
        filter 700ms ease;
    will-change: opacity, transform;
}

.hero__biome-background-image.is-active {
    opacity: var(--hero-background-opacity);
    transform: scale(1.075);
}


/* =========================================================
   2. ORDEN DE CAPAS DEL HERO
========================================================= */

.hero__layer--sky,
.hero__layer--mountains {
    z-index: 1;
}

.hero__layer--jungle-back {
    z-index: 2;
}

.hero__layer--jungle-middle {
    z-index: 3;
}

.hero__layer--jungle-front {
    z-index: 4;
}

.hero__fog {
    z-index: 5;
}

.hero__fireflies {
    z-index: 6;
}


/* =========================================================
   3. CAPAS COMPLEMENTARIAS
========================================================= */

/*
   Esta capa se conserva como fallback por si JavaScript no
   puede construir el escenario doble. En funcionamiento normal,
   la fotografía principal vive en las dos capas anteriores.
*/
.hero__layer--mountains {
    opacity: 0.34;
    background-image:
        radial-gradient(
            circle at 72% 38%,
            rgba(var(--theme-accent-rgb), 0.12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.18)
        ),
        var(--biome-background-image);
    background-position:
        center,
        center,
        var(--biome-background-position, center center);
    background-repeat: no-repeat;
    background-size: cover;
    transition:
        opacity 650ms ease,
        background-image 650ms ease,
        background-position 650ms ease;
}

/* Árboles, coral, pinos, dunas o elementos intermedios. */
.hero__layer--jungle-back {
    opacity: 0.28;
    background-image: var(--biome-midground-image);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    transition:
        opacity 650ms ease,
        background-image 650ms ease;
}

/* Rayos, niebla, burbujas, polvo o líneas cinéticas. */
.hero__layer--jungle-middle {
    opacity: 0.24;
    mix-blend-mode: screen;
    background-image: var(--biome-atmosphere-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition:
        opacity 650ms ease,
        background-image 650ms ease;
}

/* Elementos cercanos que enmarcan la escena. */
.hero__layer--jungle-front {
    opacity: 0.46;
    background-image: var(--biome-foreground-image);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    transition:
        opacity 650ms ease,
        background-image 650ms ease;
}


/* =========================================================
   4. PERSONAJES Y FALLBACKS
========================================================= */

.hero__character,
.mission-panel__scene {
    isolation: isolate;
}

.hero__character-image,
.mission-panel__character {
    transition:
        opacity 280ms ease,
        transform 450ms ease,
        filter 450ms ease;
}

.hero__character-image.is-changing,
.mission-panel__character.is-changing {
    opacity: 0.28;
    filter:
        blur(3px)
        drop-shadow(0 30px 50px rgba(0, 0, 0, 0.35));
}

.character-placeholder {
    position: absolute;
    z-index: 2;
    place-items: center;
    align-content: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--theme-text-muted);
    pointer-events: none;
}

.character-placeholder:not([hidden]) {
    display: grid;
}

.character-placeholder i {
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--theme-accent);
    opacity: 0.58;
}

.character-placeholder span {
    max-width: 220px;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.character-placeholder--hero {
    inset: 20% 14%;
}

.character-placeholder--mission {
    inset: 18%;
}


/* =========================================================
   5. RESPONSIVE
========================================================= */

@media (max-width: 920px) {
    body {
        --hero-background-opacity: 0.40;
    }

    .hero__biome-background-stage::before {
        background:
            linear-gradient(
                180deg,
                rgba(2, 10, 7, 0.44) 0%,
                rgba(2, 10, 7, 0.18) 42%,
                rgba(2, 10, 7, 0.58) 100%
            );
    }

    .hero__biome-background-image {
        inset: -1%;
    }
}

@media (max-width: 740px) {
    body {
        --hero-background-opacity: 0.34;
    }

    .hero__layer--mountains {
        background-position:
            center,
            center,
            var(--biome-background-position, center center);
    }

    .hero__layer--jungle-back,
    .hero__layer--jungle-front {
        background-position: center bottom;
    }

    .hero__layer--jungle-middle {
        background-position: center;
    }

    .hero__layer--jungle-front {
        opacity: 0.38;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__biome-background-image {
        transition: opacity 220ms linear;
        transform: scale(1.035);
    }

    .hero__biome-background-image.is-active {
        transform: scale(1.035);
    }
}