/* =========================================================
   📖 CAPA AISLADA — ARRASTRE FÍSICO DE PÁGINA
   Solo actúa durante .book-dragging
   ========================================================= */

#main-content.book-mode.book-dragging {
    isolation: isolate;
    perspective: 1800px;
    perspective-origin: center center;
    overflow: hidden !important;
    background: #fffaf7 !important;
}

/* Mientras no se arrastra, NO alteramos las páginas. */
#main-content.book-mode.book-dragging > .book-page {
    transition: none !important;
    animation: none !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* =========================
   AVANZAR →
   ========================= */

#main-content.book-mode.book-dragging[data-drag-direction="forward"]
> .book-page.book-active {
    transform-origin: left center !important;
    transform:
        perspective(1800px)
        rotateY(
            calc(
                var(--book-drag-progress, 0) * -180deg
            )
        )
        translateZ(
            calc(
                28px * var(--book-drag-progress, 0)
            )
        ) !important;
    z-index: 3 !important;
    opacity: 1 !important;
}

/* Página siguiente debajo. */
#main-content.book-mode.book-dragging[data-drag-direction="forward"]
> .book-page:nth-of-type(n).book-page:not(.book-active) {
    z-index: 1;
}

/* =========================
   RETROCEDER ←
   ========================= */

#main-content.book-mode.book-dragging[data-drag-direction="backward"]
> .book-page.book-active {
    transform-origin: right center !important;
    transform:
        perspective(1800px)
        rotateY(
            calc(
                var(--book-drag-progress, 0) * 180deg
            )
        )
        translateZ(
            calc(
                28px * var(--book-drag-progress, 0)
            )
        ) !important;
    z-index: 3 !important;
    opacity: 1 !important;
}

/* Evitar el destello azul entre páginas. */
#main-content.book-mode.book-dragging,
#main-content.book-mode.book-dragging::before,
#main-content.book-mode.book-dragging::after {
    background-color: #fffaf7 !important;
    background-image: none !important;
}

/* No alteramos imágenes ni componentes internos. */
#main-content.book-mode.book-dragging img,
#main-content.book-mode.book-dragging .section-content {
    filter: none !important;
    animation: none !important;
}

/* En móvil reducimos la perspectiva. */
@media (max-width: 700px) {

    #main-content.book-mode.book-dragging {
        perspective: 1200px;
    }

}


/* =========================================================
   📄 PÁGINA DESTINO
   Visible inmediatamente debajo de la hoja arrastrada
   ========================================================= */

#main-content.book-mode.book-dragging
> .book-page.book-drag-target {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;

    animation: none !important;
    transition: none !important;
    filter: none !important;

    transform:
        none !important;

    z-index: 2 !important;
}


/* La hoja que se está moviendo queda encima. */

#main-content.book-mode.book-dragging
> .book-page.book-active {
    z-index: 3 !important;
}


/* Sombra progresiva sobre la página que se está levantando. */

#main-content.book-mode.book-dragging
> .book-page.book-active::after {
    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    pointer-events: none !important;

    opacity:
        calc(
            var(--book-drag-progress, 0) * .35
        ) !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.04),
            transparent 35%,
            rgba(0,0,0,.18)
        ) !important;

    z-index: 9999 !important;
}


/* Durante el giro NO permitimos que otras animaciones
   de las páginas entren en competencia. */

#main-content.book-mode.book-dragging
> .book-page.book-active,
#main-content.book-mode.book-dragging
> .book-page.book-drag-target {
    animation: none !important;
    transition: none !important;
}


/* =========================================================
   ✨ 3D Y LIMPIEZA DE LA PÁGINA DESTINO
   ========================================================= */

/*
   La página destino debe existir inmediatamente debajo,
   sin ninguna animación propia de entrada.
*/

#main-content.book-mode
> .book-page.book-drag-target,
#main-content.book-mode.book-dragging
> .book-page.book-drag-target,
#main-content.book-mode
> .book-page.book-drag-target .section-content,
#main-content.book-mode.book-dragging
> .book-page.book-drag-target .section-content {
    animation: none !important;
    transition: none !important;
}

/*
   Al soltar y completar el giro, la nueva página se convierte
   en activa sin volver a ejecutar las animaciones de entrada.
*/

#main-content.book-mode
> .book-page.book-drag-completed,
#main-content.book-mode
> .book-page.book-drag-completed .section-content {
    animation: none !important;
    transition: none !important;
}

/*
   Profundidad visual de la hoja.
   La sombra aumenta proporcionalmente al giro.
*/

#main-content.book-mode.book-dragging
> .book-page.book-active {
    filter:
        drop-shadow(
            0
            8px
            calc(
                12px * var(--book-drag-progress, 0)
            )
            rgba(0,0,0,.28)
        ) !important;
}

/*
   Ligera curvatura/sombra sobre la hoja levantada.
*/

#main-content.book-mode.book-dragging
> .book-page.book-active::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    z-index: 9998 !important;

    opacity:
        calc(
            var(--book-drag-progress, 0) * .3
        ) !important;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.18),
            transparent 22%,
            transparent 70%,
            rgba(0,0,0,.22)
        ) !important;

    transform:
        translateZ(1px) !important;
}