/* =========================================================
   WRAPPER
   ========================================================= */

.book-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: visible;
    padding-bottom: 30px;
    padding-top: 30px;
    background-color: #E7E5DA;
}


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

.book {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 2 / 1.25;
    perspective: 2500px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    overflow: visible;
    border: 1px solid #ededed;
    color-interpolation: linearRGB;
    box-shadow: -1px 10px 10px #cdcdcd;
}

/* =========================================================
   PAGINE FISSE VISIBILI
   ========================================================= */

.book-base {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    z-index: 1;
}


.book-slot {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}


/* =========================================================
   CONTENUTO PAGINA
   ========================================================= */

.book-page {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
}


/* PAGINA IMMAGINE */

.book-page.page-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
}


/* PAGINA TESTO */

.book-page.page-text {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px;
    box-sizing: border-box;
}


.book-text {
    max-width: 70%;
}


.book-text h2 {
    margin: 0 0 20px;
}


.book-text p {
    margin: 0;
    line-height: 1.6;
}


/* =========================================================
   PIEGA CENTRALE
   ========================================================= */

.book::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(0, 0, 0, 0.12);
    z-index: 50;
    pointer-events: none;
}


/* =========================================================
   FOGLIO CHE GIRA
   ========================================================= */

.turning-page {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 20;
    transform-style: preserve-3d;
    transition:
        transform 0.75s cubic-bezier(.45, .05, .2, 1);
    pointer-events: none;
    will-change: transform;
}


/* AVANTI:
   parte dalla pagina destra */

.turning-page.is-right {
    left: 50%;
    transform-origin: left center;
    transform: rotateY(0deg);
}


/* INDIETRO:
   parte dalla pagina sinistra */

.turning-page.is-left {
    left: 0;
    transform-origin: right center;
    transform: rotateY(0deg);
}


/* =========================================================
   DUE FACCE DEL FOGLIO
   ========================================================= */

.turning-page .page-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}


/* FRONTE */

.turning-page .page-face.front {
    transform: rotateY(0deg);
}


/* RETRO */

.turning-page .page-face.back {
    transform: rotateY(180deg);
}


/* =========================================================
   PICCOLA OMBRA DURANTE LA ROTAZIONE
   ========================================================= */

.turning-page::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    backface-visibility: hidden;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.10);
}



/* =========================================================
   PRELOADER INVISIBILE

   Le immagini rimangono realmente nel DOM.
   In questo modo il browser le tiene già disponibili.
   ========================================================= */

.book-preload {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    left: -99999px;
    top: -99999px;
}

.book-preload img {
    width: 1px;
    height: 1px;
}

.turning-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 30;



    opacity: 0;
    transition: opacity 0.2s ease;
}

.turning-page.is-turning::before {
    opacity: 1;
}