/* ==========================
   CONTENEDOR DE LA HABITACIÓN
========================== */

.habitacion {
    position: relative;

    width: min(100vw, 150vh);
    aspect-ratio: 3 / 2;

    overflow: hidden;
    background: var(--color-fondo);

    isolation: isolate;
}


/* ==========================
   FONDOS
========================== */

.habitacion__fondo {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}


/* Fondo inicial: habitación sin velas */

.habitacion__fondo--inicial {
    z-index: var(--z-fondo);
    opacity: 1;
}


/* Fondo final: habitación con velas */

.habitacion__fondo--final {
    z-index: calc(var(--z-fondo) + 1);
    opacity: 0;

    transition: opacity 3s ease-in-out;
}


/* Estado final de la habitación */

.habitacion--despierta .habitacion__fondo--final {
    opacity: 1;
}