/*=========================================================
    XALTILOLLI 2.0
    MUSEUM
=========================================================*/


/*=========================================================
    CONTENEDOR PRINCIPAL
=========================================================*/

.museumViewer{

    position:relative;

    width:min(var(--museum-scale), var(--museum-width));

    margin-inline:auto;

    display:flex;

    justify-content:center;
    align-items:center;

}


/*=========================================================
    IMAGEN DEL MUSEO
=========================================================*/

#museumImage{

    width:100%;

    display:block;

    object-fit:contain;

    border-radius:var(--museum-radius);

    filter:
        drop-shadow(0 20px 40px rgba(0,0,0,.35));

    transition:

        opacity var(--transition-normal),

        transform var(--transition-normal);

}


/*=========================================================
    ANIMACIÓN DEL CAMBIO DE SALA
=========================================================*/

#museumImage.change{

    opacity:.25;

    transform:scale(1.02);

}


/*=========================================================
    OVERLAY
=========================================================*/

.museumOverlay{

    position:absolute;

    inset:0;

    pointer-events:none;

}


/*=========================================================
    NAVEGACIÓN
=========================================================*/

.navigation{

    width:100%;

    max-width:950px;

    display:grid;

    grid-template-columns:

        70px

        1fr

        70px;

    align-items:center;

    margin-top:var(--space-lg);

}


/*=========================================================
    CENTRO
=========================================================*/

.navigationCenter{

    text-align:center;

}


/*=========================================================
    ETIQUETA
=========================================================*/

.sectionLabel{

    display:block;

    color:var(--color-text-soft);

    font-size:var(--small-size);

    letter-spacing:.18em;

    text-transform:uppercase;

    margin-bottom:.35rem;

}


/*=========================================================
    TITULO
=========================================================*/

#roomTitle{

    min-height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--color-text);

    transition:

        opacity var(--transition-fast),

        transform var(--transition-fast);

}


/*=========================================================
    CAMBIO DE TÍTULO
=========================================================*/

#roomTitle.change{

    opacity:0;

    transform:translateY(15px);

}


/*=========================================================
    DESCRIPCIÓN
=========================================================*/

.roomDescription{

    width:min(900px,100%);

    margin-inline:auto;

}


#roomText{

    text-align:center;

    color:var(--color-text-soft);

    line-height:1.9;

    transition:

        opacity var(--transition-fast),

        transform var(--transition-fast);

}


#roomText.change{

    opacity:0;

    transform:translateY(12px);

}


/*=========================================================
    EFECTO DE LUZ
=========================================================*/

.museumViewer::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-25px;

    width:60%;

    height:45px;

    transform:translateX(-50%);

    background:

        radial-gradient(

            ellipse,

            rgba(255,255,255,.18),

            transparent 70%

        );

    filter:blur(24px);

    opacity:.20;

    pointer-events:none;

}


/*=========================================================
    ENTRADA
=========================================================*/

.museumViewer{

    animation:museumIntro .9s ease;

}


@keyframes museumIntro{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}