/* ==========================
   ESCENAS
========================== */

.escena {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);

    display: grid;
    place-items: center;

    padding: 2rem;

    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(4px);
}


/* ==========================
   PERGAMINO
========================== */

#escena-pergamino {
    overflow: hidden;
}

.pergamino {
    position: absolute;

    width: min(80vw, 760px);
    max-height: 82vh;

    object-fit: contain;

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}


/* Estado inicial */

.pergamino--cerrado {
    opacity: 1;
    transform: scale(0.82) rotate(-4deg);
}

.pergamino--abierto {
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
}


/* ==========================
   CONTENIDO
========================== */

.pergamino__contenido {
    position: relative;
    z-index: 2;

    width: min(58vw, 520px);

    padding: 2rem 2.4rem;

    color: #3b2a18;
    text-align: center;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.8s ease 0.35s,
        visibility 0.8s ease 0.35s;
}

.pergamino__texto {
    margin: 0;

    font-size: clamp(1rem, 2.2vw, 1.35rem);
    line-height: 1.6;
}

.pergamino__boton {
    margin-top: 1.8rem;
    padding: 0.7rem 1.6rem;

    color: #3b2a18;
    background: transparent;

    border: 1px solid rgba(59, 42, 24, 0.55);
    border-radius: 999px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}


/* ==========================
   PERGAMINO ABIERTO
========================== */

#escena-pergamino.pergamino-abierto .pergamino--cerrado {
    opacity: 0;
    transform: scale(0.95) rotate(0deg);
    pointer-events: none;
}

#escena-pergamino.pergamino-abierto .pergamino--abierto {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#escena-pergamino.pergamino-abierto .pergamino__contenido {
    opacity: 1;
    visibility: visible;
}

.pergamino__boton--visible {
    opacity: 1;
    visibility: visible;
}

.pergamino__texto p {
    opacity: 0;
    animation: aparecerParrafo 0.3s ease forwards;
}

@keyframes aparecerParrafo {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================
   ESCENA DEL LIBRO
========================== */

.escena--libro {
    overflow: hidden;
}


/* ==========================
   VISOR DEL LIBRO
========================== */

.libro {
    position: relative;

    width: min(94vw, 1100px);
    max-height: 92vh;

    opacity: 0;
    transform: scale(0.9);

    animation: aparecer-libro 1s ease forwards;
}

@keyframes aparecer-libro {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ==========================
   IMAGEN DEL LIBRO
========================== */

.libro__imagen {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;
    max-height: 88vh;

    object-fit: contain;

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


/* ==========================
   CONTENEDOR DE LAS PÁGINAS
========================== */

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

    inset: 0;

    pointer-events: none;
}


/* ==========================
   PÁGINAS
========================== */

.libro__pagina {
    position: absolute;
    top: 14%;

    width: 30%;
    height: 66%;

    padding: 1rem 1.2rem;

    overflow: hidden;

    color: #352618;
    text-align: left;

    pointer-events: auto;
}

.libro__pagina--izquierda {
    left: 22%;
    transform: rotate(-1deg);
}

.libro__pagina--derecha {
    right: 19%;
    transform: rotate(1deg);
}


/* ==========================
   TÍTULO Y TEXTO
========================== */

.libro__titulo {
    margin: 0 0 0.9rem;

    color: #3c2918;

    font-size: clamp(1rem, 1.8vw, 1.45rem);
    font-weight: normal;
    line-height: 1.2;
    text-align: center;
}

.libro__texto {
    font-size: clamp(0.72rem, 1.2vw, 0.95rem);
    line-height: 1.45;
}

.libro__texto p {
    margin: 0 0 1rem;
}

.libro__texto p:last-child {
    margin-bottom: 0;
}


/* ==========================
   CONTROLES DE PÁGINA
========================== */

.libro__control {
    position: absolute;
    z-index: 4;
    top: 50%;

    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    color: #f1dfb8;
    background: rgba(34, 23, 14, 0.78);

    border: 1px solid rgba(216, 181, 106, 0.65);
    border-radius: 50%;

    font-size: 2rem;
    line-height: 1;

    transform: translateY(-50%);

    transition:
        background-color var(--transicion-normal),
        box-shadow var(--transicion-normal),
        transform var(--transicion-normal);
}

.libro__control--anterior {
    left: 2%;
}

.libro__control--siguiente {
    right: 2%;
}

.libro__control:hover {
    background: rgba(87, 58, 30, 0.95);

    box-shadow:
        0 0 14px rgba(216, 181, 106, 0.45),
        0 0 30px rgba(216, 181, 106, 0.2);

    transform:
        translateY(-50%)
        scale(1.08);
}

.libro__control:focus-visible {
    outline: 2px solid var(--color-dorado);
    outline-offset: 4px;
}


/* ==========================
   INDICADOR DE PÁGINAS
========================== */

.libro__indicador {
    position: absolute;
    z-index: 4;

    left: 50%;
    bottom: 7%;

    color: rgba(67, 45, 25, 0.75);

    font-size: 0.9rem;
    font-style: italic;

    transform: translateX(-50%);
}


/* ==========================
   BOTÓN CERRAR
========================== */

.libro__cerrar {
    position: absolute;
    z-index: 4;

    left: 50%;
    bottom: -0.75rem;

    padding: 0.75rem 1.8rem;

    color: var(--color-texto);
    background: rgba(30, 20, 13, 0.92);

    border: 1px solid rgba(216, 181, 106, 0.65);
    border-radius: 999px;

    transform: translateX(-50%);

    transition:
        color var(--transicion-normal),
        background-color var(--transicion-normal),
        box-shadow var(--transicion-normal),
        transform var(--transicion-normal);
}

.libro__cerrar:hover {
    color: #21170e;
    background: var(--color-dorado);

    box-shadow:
        0 0 16px rgba(216, 181, 106, 0.4),
        0 0 34px rgba(216, 181, 106, 0.18);

    transform:
        translateX(-50%)
        translateY(-2px);
}

.libro__cerrar:focus-visible {
    outline: 2px solid var(--color-dorado);
    outline-offset: 4px;
}


/* ==========================
   AJUSTES PARA MÓVIL
========================== */

@media (max-width: 700px) {

    .libro {
        width: 98vw;
    }

    .libro__pagina {
        top: 17%;
        height: 62%;

        padding: 0.7rem 0.8rem;
    }

    .libro__pagina--izquierda {
        left: 11%;
        width: 36%;
    }

    .libro__pagina--derecha {
        right: 11%;
        width: 36%;
    }

    .libro__titulo {
        margin-bottom: 0.6rem;

        font-size: clamp(0.8rem, 3.4vw, 1.1rem);
    }

    .libro__texto {
        font-size: clamp(0.58rem, 2.45vw, 0.82rem);
        line-height: 1.35;
    }

    .libro__texto p {
        margin-bottom: 0.55rem;
    }

    .libro__control {
        width: 38px;
        height: 38px;

        font-size: 1.55rem;
    }

    .libro__control--anterior {
        left: 0;
    }

    .libro__control--siguiente {
        right: 0;
    }

    .libro__cerrar {
        bottom: -1.3rem;

        padding: 0.6rem 1.25rem;

        font-size: 0.85rem;
    }

}

/* ==========================
   ESCENA DEL TELESCOPIO
========================== */

.escena--telescopio {
    padding: 0;

    background: #000;
    backdrop-filter: none;

    overflow: hidden;
}


/* ==========================
   VISOR
========================== */

.telescopio-visor {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;
    background: #000;
}


/* ==========================
   CIELO
========================== */

.telescopio-visor__imagen {
    width: 100%;
    height: 100%;

    object-fit: cover;

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


/* ==========================
   LETRA
========================== */

.telescopio-visor__fragmento {
    position: absolute;
    z-index: 2;

    top: 50%;
    left: 50%;

    width: min(82vw, 760px);

    padding: 1rem 1.5rem;

    color: #f7f0df;

    font-size: clamp(1.25rem, 3vw, 2.25rem);
    line-height: 1.5;
    text-align: center;
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.95),
        0 0 20px rgba(0, 0, 0, 0.8);

    opacity: 0;

    transform: translate(-50%, -50%);

    transition: opacity 1.4s ease;
}

.telescopio-visor__fragmento--visible {
    opacity: 1;
}


/* ==========================
   POSICIONES DESDE EL JSON
========================== */

.telescopio-visor__fragmento--arriba {
    top: 22%;
}

.telescopio-visor__fragmento--abajo {
    top: 78%;
}

.telescopio-visor__fragmento--izquierda {
    left: 31%;

    width: min(42vw, 580px);
}

.telescopio-visor__fragmento--derecha {
    left: 69%;

    width: min(42vw, 580px);
}

.telescopio-visor__fragmento p {
    margin: 0;
}


/* ==========================
   MÓVIL
========================== */

@media (max-width: 700px) {

    .telescopio-visor__fragmento {
        width: 88vw;

        font-size: clamp(1rem, 5vw, 1.45rem);
    }

    .telescopio-visor__fragmento--izquierda,
    .telescopio-visor__fragmento--derecha {
        left: 50%;

        width: 88vw;
    }

}

/* ==========================
   ESCENA DEL RECUERDO
========================== */

.escena--recuerdo {
    padding: 2rem;

    background:
        radial-gradient(
            circle at center,
            rgba(20, 16, 12, 0.45) 0%,
            rgba(0, 0, 0, 0.9) 75%
        );

    backdrop-filter: blur(6px);
}


/* ==========================
   RECUERDO
========================== */

.recuerdo {
    display: grid;
    place-items: center;

    width: min(92vw, 900px);

    text-align: center;

    opacity: 0;
    transform: scale(0.92);

    animation: aparecer-recuerdo 1.6s ease forwards;
}

@keyframes aparecer-recuerdo {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ==========================
   IMAGEN
========================== */

.recuerdo__imagen {
    width: 100%;
    max-height: 78vh;

    object-fit: contain;

    border: 8px solid rgba(198, 159, 91, 0.8);

    box-shadow:
        0 0 22px rgba(216, 181, 106, 0.35),
        0 0 60px rgba(0, 0, 0, 0.8);
}


/* ==========================
   FRASE
========================== */

.recuerdo__frase {
    margin: 1.4rem 0 0;

    color: var(--color-texto);

    font-size: clamp(1rem, 2.4vw, 1.45rem);
    font-style: italic;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.9);
}