/* ==========================
   CONTENEDOR DE OBJETOS
========================== */

.habitacion__objetos {
    position: absolute;
    inset: 0;

    z-index: var(--z-objetos);
}


/* ==========================
   IMÁGENES DE LOS OBJETOS
========================== */

.objeto__imagen {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

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

/* Entrada gradual del brillo */

.objeto__imagen--despertando {
    animation: despertar-brillo 1.8s ease forwards;
}

@keyframes despertar-brillo {
    from {
        filter:
            brightness(1)
            drop-shadow(0 0 0 rgba(255, 218, 140, 0))
            drop-shadow(0 0 0 rgba(255, 195, 95, 0));
    }

    to {
        filter:
            brightness(1.15)
            drop-shadow(0 0 10px rgba(255, 218, 140, 0.75))
            drop-shadow(0 0 24px rgba(255, 195, 95, 0.45));
    }
}


/* Pulso continuo después del despertar */

.objeto__imagen--brillo {
    animation: respirar-brillo 2.4s ease-in-out infinite;
}

@keyframes respirar-brillo {
    0%,
    100% {
        filter:
            brightness(1.15)
            drop-shadow(0 0 10px rgba(255, 218, 140, 0.75))
            drop-shadow(0 0 24px rgba(255, 195, 95, 0.45));
    }

    50% {
        filter:
            brightness(1.22)
            drop-shadow(0 0 14px rgba(255, 226, 160, 0.9))
            drop-shadow(0 0 32px rgba(255, 195, 95, 0.55));
    }
}

/* ==========================
   ZONAS INTERACTIVAS
========================== */

.objeto__zona {
    position: absolute;
    z-index: 2;

    padding: 0;
    border: 0;

    background: transparent;
    pointer-events: auto;
}


/* ==========================
   CAJA
========================== */

.objeto__zona--caja {
    top: 61.7%;
    left: 40.3%;

    width: 2.9%;
    height: 6.2%;

    background: transparent;
}

/* ==========================
   LIBRO
========================== */

.objeto__zona--libro {
    top: 68.7%;
    left: 25%;

    width: 2.5%;
    height: 6.8%;

    background: transparent;
}

/* ==========================
   TELESCOPIO
========================== */

.objeto__zona--telescopio {
    top: 40.9%;
    left: 65.8%;

    width: 2.4%;
    height: 4.2%;

    background: transparent;
}

/* ==========================
   CUADRO
========================== */

.objeto__zona--cuadro {
    top: 10%;
    left: 31%;

    width: 12.5%;
    height: 26.4%;

    background: transparent;
}

/* ==========================
   OBJETOS BLOQUEADOS
========================== */

.objeto__zona:disabled {
    pointer-events: none;
}