/* =================================================
   BLOQUEO DE SCROLL (SOLO INTRO)
================================================= */
html.isa-lock-scroll,
body.isa-lock-scroll {
    overflow: hidden;
}

/* =================================================
   WRAPPER DEL INTRO
================================================= */
#si-envelope-wrapper {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    min-height: 100svh;

    z-index: 9999999;
    background: transparent;
}

/* =================================================
   CONTENEDOR DEL SOBRE (3D)
================================================= */
#si-envelope {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    perspective: 1400px;
    perspective-origin: center;
}

/* =================================================
   PARTES DEL SOBRE
================================================= */
.si-part {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    backface-visibility: hidden;
    will-change: transform, opacity;

    transition:
        transform 1.25s cubic-bezier(.77,0,.175,1),
        opacity 0.45s ease;
}

/* =================================================
   ESTADO CERRADO
================================================= */
.si-left {
    z-index: 20;
    object-position: right center;
}

.si-right {
    z-index: 30;
    object-position: left center;
    transform-origin: left center;
}

/* =================================================
   APERTURA NORMAL
================================================= */
.si-open .si-left {
    transform: translateX(-120vw);
}

.si-open .si-right {
    transform: translateX(120vw);
}

/* =================================================
   APERTURA 3D
================================================= */
.si-3d-enabled.si-open .si-right {
    transform: rotateY(85deg);
    opacity: 0;

    transition-delay:
        0s,
        1.6s;
}

/* =================================================
   PLIEGUE CENTRAL
================================================= */
#si-envelope::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;

    width: 42px;
    height: 100%;

    transform: translateX(-50%);
    opacity: 0.25;

    z-index: 40;
    pointer-events: none;
}

/* =================================================
   SEGURIDAD MÓVIL
================================================= */
@media (max-width: 768px) {

    #si-envelope-wrapper,
    #si-envelope,
    .si-part {
        height: 100vh;
        min-height: 100vh;
        min-height: 100svh;
    }

}