:root {
    /*  book paper is A series paper ===================== */
    --book-width: 20vw;
    --book-height: calc(var(--book-width) * 1.414);
    --bk_page_w: calc(var(--book-width) - 2vw);
    --bk_page_h: calc(var(--bk_page_w) * 1.414);
    /* offset other   ==================================== */
    --page-depth: 2vw;
    --pg_d: 1.99vw;
    --ipg_d: 0.8vw;
    --ipg_dd: 0.79vw;
    --cover-offset-y: var(--book-height);
    --cover-offset: 0.01vw;
    --pg_x: calc(var(--book-height) - 1.5vw);
    --pg_slope: 5deg;
    --ipg_slop: 15deg;
    --bkscale : 1.6;
}

/*     whole book setting.  =====================*/
.book,
.base_book{
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: calc(var(--book-width) / 2) calc(var(--book-height) / 2);
    scale: 1.5;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 40%;
}

/*.  book cover and paper page    ================ */
.cover {
    width: var(--book-width);
    height: var(--book-height);
    position: absolute;
    box-shadow: inset 0 0 0 0.4vw;
    color: deeppink;
    filter: sepia(0.3);
}

.page {
    width: var(--bk_page_w);
    height: var(--bk_page_h);
    position: absolute;
    box-shadow: inset 0 0 0 0.4vw;
    color: deeppink;
    filter: sepia(0.3);
}

/*.  front and back cover  2 papers for 4 pages =========== */
.front {
    background-color: yellow;
    transform: translate3d(0vw, 0vw, var(--page-depth)) rotateY(calc(var(--pg_slope) * -1));
}

.inn_front {
    background-color: lightblue;
    transform: translate3d(0vw, 0vw, var(--pg_d)) rotateY(calc(var(--pg_slope) * -1)) rotateX(180deg);
}

.back {
    background-color: yellow;
    transform: translate3d(0vw, 0vw, calc(var(--page-depth) * -1)) rotateY(calc(var(--pg_slope) * 1));
}

.inn_back {
    background-color: lightblue;
    transform: translate3d(0vw, 0vw, calc(var(--pg_d) * -1)) rotateY(calc(var(--pg_slope) * 1));
}

.bk_page01 {
    background-color: #00ff00;
    transform: translate3d(0vw, 1vw, var(--ipg_d)) rotateY(calc(var(--pg_slope) * -1));
}

.bk_page02 {
    background-color: #00ffff;
    transform: translate3d(0vw, 1vw, var(--ipg_dd)) rotateY(calc(var(--pg_slope) * -1));
}

.bk_page03 {
    background-color: #00ffff;
    transform: translate3d(0vw, 1vw, calc(var(--ipg_dd) * -1)) rotateY(calc(var(--pg_slope) * 1));
}

.bk_page04 {
    background-color: #00ff00;
    transform: translate3d(0vw, 1vw, calc(var(--ipg_d) * -1)) rotateY(calc(var(--pg_slope) * 1));
}

/*   spine and gutter    */

.spine_gutter {
    position: absolute;
    box-shadow: inset 0 0 0 0.5vw;
    color: deeppink;
    filter: sepia(0.3);
}

.bk_spine {
    width: 3.99vw;
    height: var(--book-height);
    transform: translate3d(-4.4vw, 0vw, 0vw) rotateY(90deg);
    background: #ffffff;
}

.bk_gutter00 {
    width: 3vw;
    height: var(--book-height);
    transform: translate3d(-2.5vw, 0vw, 1.5vw) rotateY(15deg);
    background: #ffffff;
}

.bk_gutter01 {
    width: 3vw;
    height: var(--book-height);
    transform: translate3d(-2.5vw, 0vw, -1.5vw) rotateY(-15deg);
    background: #ffffff;
}

.bk_gutter02 {
    width: 3.45vw;
    height: var(--book-height);
    transform: translate3d(-2.7vw, 0vw, 0.8vw) rotateY(35deg);
    background: #ffffff;
}

.bk_gutter03 {
    width: 3.45vw;
    height: var(--book-height);
    transform: translate3d(-2.7vw, 0vw, -0.8vw) rotateY(-35deg);
    background: #ffffff;
}

/* cover paper spine group */
.paper {
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.spine_group {
    position: absolute;
    width: 4.99vw;
    height: var(--book-height);
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform 0.6s ease;

}

/* cover and page flip  adjest spine and gutter ===============*/
.front_flip {
    transform: translate3d(0.5vw, 0vw, 0.5vw) rotateY(-60deg)
}

.paper_flip{
  transform: translate3d(0.5vw, 0, 0.5vw) rotateY(-45deg)
}
.spine_flip {
    transform: rotateY(-30deg);
}

.flip_norm{
   transform: translate3d(0, 0, 0);
}


/*  call rount  ========================*/
#book_BKstep01,
#book_BKstep02,
#book_BKstep03,
#book_BKstep04,
#book_BKstep05{
    scale: var(--bkscale);
}

/* state process  */
#book_BKstep00 {
    scale: 2;
    /* Match the 'from' keyframe to avoid a jump on load */
    transform: rotateX(0deg) rotateY(0deg);

    /* Essential for 3D child elements */
    transform-style: preserve-3d;

    /* Performance optimization */
    will-change: transform;

    /* Animation shorthand */
    animation: rotateAnimation 20s linear infinite;
}

@keyframes rotateAnimation {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    20% {
        /* To keep it smooth, ensure the X-axis return is also handled */
        transform: rotateX(45deg) rotateY(0deg) rotateZ(0deg);
    }

    60% {
        transform: rotateX(45deg) rotateY(180deg) rotateZ(0deg);
    }

    90% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
}