.book-spine,
.hero-book .face.spine {
    filter: brightness(.82) contrast(1.05);
}

.hero-book3d {
    cursor: pointer;
}

.book-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

    .book-preview-overlay.open {
        display: block;
    }

.book-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.book-preview-modal {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.book-preview-stage {
    position: relative;
    width: min(88vw, 1180px);
    height: min(86vh, 800px);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1800px;
    overflow: visible;
}

.preview-book3d {
    --bookW: min(34vw, 360px);
    width: var(--bookW);
    height: calc(var(--bookW) * 1.47);
    position: relative;
    perspective: 1800px;
    transform-style: preserve-3d;
}

.preview-book {
    --edgeAngle: 90deg;
    --edgeDepth: calc(var(--halfW) - 1px);
    --halfW: calc(var(--bookW) / 2);
    --bookRotY: var(--ry);
    --bookRotX: var(--rx);
    --bookShiftX: 0px;
    --bookOriginX: 50%;
    --pageInsetTop: 3px;
    --pageInsetBottom: 3px;
    --pageInsetOuter: 3px;
    --pageInsetInner: 0px;
    --leafZCloseFront: 10px;
    --leafZCloseBack: -6px;
    --open-rot: 0deg;
    --ry: -18deg;
    --rx: 5deg;
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: translateX(var(--bookShiftX)) rotateY(var(--bookRotY)) rotateX(var(--bookRotX));
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.preview-book {
    transform-origin: var(--bookOriginX) 50%;
}


    .preview-book.is-closed .book-back-cover {
        transform: translateZ(calc(var(--t) / -2)) translateX(8px);
    }


    .preview-book.is-closed,
    .preview-book.is-closing-front,
    .preview-book.is-closing-book {
        --bookOriginX: 50%;
    }

    .preview-book.is-opening,
    .preview-book.is-open,
    .preview-book.is-flipping,
    .preview-book.is-closing-back,
    .preview-book.is-closed-back {
        --bookOriginX: 0%;
    }

    .preview-book.is-opening,
    .preview-book.is-open,
    .preview-book.is-flipping {
        --bookShiftX: calc(var(--halfW) * 0.5);
    }

    .preview-book.is-closing-back,
    .preview-book.is-closed-back {
        --bookShiftX: calc(var(--halfW) * 1.5);
    }


    .preview-book.is-closing-front,
    .preview-book.is-closing-book,
    .preview-book.is-closed {
        --bookShiftX: 0px;
    }

.preview-book {
    --t: 19px;
}

    .preview-book.is-open,
    .preview-book.is-flipping,
    .preview-book.is-opening {
        --t: 7px;
    }

/* pevné časti knihy */
.book-spine,
.book-back-cover,
.book-pages-edge,
.front-cover-hinge,
.book-leaves,
.book-leaf {
    position: absolute;
    transform-style: preserve-3d;
}


.book-back-cover {
    inset: -2px -5px -2px -2px;
    background: linear-gradient( 270deg, rgba(0,0,0,.34) 0px, rgba(0,0,0,.22) 10px, rgba(255,255,255,.05) 16px, rgba(0,0,0,.10) 22px, rgba(0,0,0,0) 34px ), linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.28)), var(--back-cover) center/cover no-repeat;
    transform: translateZ(calc(var(--t) / -2));
}




    .book-back-cover::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to right, transparent 0%, transparent 94%, rgba(0,0,0,.18) 95%, rgba(255,255,255,.12) 97%, rgba(0,0,0,.22) 98%, transparent 99% ), var(--back-cover) center/cover no-repeat;
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }


.book-spine {
    top: 0;
    left: calc(50% - (var(--t) / 2));
    width: var(--t);
    height: 100%;
    transform: rotateY(-90deg) translateX(-4px) translateZ(var(--halfW)) translateZ(1px);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.22), inset 2px 0 4px rgba(255,255,255,.08), inset -2px 0 5px rgba(0,0,0,.18);
    overflow: hidden;
    background: none;
}

    .book-spine::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(0,0,0,.35) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,.02) 48%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.28) 100% ), var(--spine-cover) center/cover no-repeat;
        transform: scaleX(-1);
        transform-origin: center center;
    }

    .book-spine::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 18%, rgba(0,0,0,0) 82%, rgba(0,0,0,.14) 100% );
        pointer-events: none;
    }

.book-pages-edgeold {
    top: 3px;
    left: calc(50% - (var(--t) / 2));
    width: var(--t);
    height: calc(100% - 6px);
    transform: rotateY(90deg) translateX(-1px) translateZ(calc(var(--halfW) - 1px));
    background: linear-gradient( to right, rgba(0,0,0,.22) 0%, rgba(248,248,245,1) 18%, rgba(255,255,255,1) 52%, rgba(245,245,240,1) 82%, rgba(0,0,0,.16) 100% );
    box-shadow: inset 1px 0 1px rgba(255,255,255,.35), inset -1px 0 2px rgba(0,0,0,.28), -2px 0 6px rgba(0,0,0,.12);
}

.book-pages-edgep {
    --edgeShiftX: -1px;
    --edgeZ: calc(var(--halfW) - 1px);
    --edgeAngle: 90deg;
    transform-origin: center center;
    transform: rotateY(var(--edgeAngle)) translateX(var(--edgeShiftX)) translateZ(var(--edgeZ));
}

.book-pages-edge {
    top: var(--pageInsetTop);
    left: calc(50% - (var(--t) / 2));
    width: var(--t);
    height: calc(100% - var(--pageInsetTop) - var(--pageInsetBottom));
    background: linear-gradient( to right, rgba(0,0,0,.22) 0%, rgba(248,248,245,1) 18%, rgba(255,255,255,1) 52%, rgba(245,245,240,1) 82%, rgba(0,0,0,.16) 100% );
    box-shadow: inset 1px 0 1px rgba(255,255,255,.35), inset -1px 0 2px rgba(0,0,0,.28), -2px 0 6px rgba(0,0,0,.12);
    --edgeShiftX: -1px;
    --edgeZ: calc(var(--halfW) - 2px);
    --edgeAngle: 90deg;
    --edgeShiftX: 60px;
    --edgeZ: calc(var(--halfW) - 3px);
    --edgeAngle: 73deg;
    transform-origin: center center;
    transform: rotateY(var(--edgeAngle)) translateX(var(--edgeShiftX)) translateZ(var(--edgeZ));
}



.preview-book.is-closing-back .book-pages-edge,
.preview-book.is-closed-back .book-pages-edge {
    --edgeAngle: -90deg;
    --edgeShiftX: 1px;
    visibility: hidden;
}


/* predná obálka */
.front-cover-hinge {
    inset: 0;
    transform-origin: left center;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--t) / 2 - 4px)) rotateY(var(--open-rot));
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
    background: transparent;
    z-index: 20;
}

.front-cover-outside {
    position: absolute;
    inset: -2px -5px -2px -2px;
    transform-origin: left center;
    transform: translateZ(1px) rotateY(0deg);
    z-index: 2;
    background: linear-gradient( to left, transparent 0%, transparent 94%, rgba(0,0,0,.18) 95%, rgba(255,255,255,.12) 97%, rgba(0,0,0,.22) 98%, transparent 99% ), var(--cover) center/cover no-repeat;
    box-shadow: inset -2px 0 6px rgba(0,0,0,.25), 0 20px 44px rgba(0,0,0,.45);
}

.front-cover-inside {
    position: absolute;
    top: var(--pageInsetTop);
    right: var(--pageInsetOuter);
    bottom: var(--pageInsetBottom);
    left: 0px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(90deg, rgba(0,0,0,.03), rgba(255,255,255,0) 18%), #fff center/cover no-repeat;
    transform: rotateY(180deg);
    box-shadow: inset -6px 0 10px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04);
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
}

/* stack listov */
.book-leaves {
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

.book-leaf {
    inset: 0;
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}




.book-leaf {
    transform: translateZ(var(--leafZ, 0px)) rotateY(0deg);
}

    .book-leaf.turned {
        transform: translateZ(var(--leafZ, 0px)) rotateY(-180deg);
    }

    .book-leaf.is-turning {
        transform: translateZ(var(--leafZ, 0px)) rotateY(var(--leaf-rot, 0deg));
    }


.book-leaf-face {
    position: absolute;
    top: var(--pageInsetTop);
    right: var(--pageInsetOuter);
    bottom: var(--pageInsetBottom);
    left: var(--pageInsetInner);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(180deg, #f8f8f6, #eceae3);
}

    .book-leaf-face.front {
        transform: rotateY(0deg);
        box-shadow: inset 6px 0 10px rgba(0,0,0,.07), inset 0 0 0 1px rgba(0,0,0,.04);
    }

    .book-leaf-face.back {
        transform: rotateY(180deg) translateZ(10px);
        box-shadow: inset -6px 0 10px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04);
    }

/* otvorený stav */
.preview-book.is-opening .front-cover-inside,
.preview-book.is-open .front-cover-inside,
.preview-book.is-flipping .front-cover-inside {
    opacity: 1;
    visibility: visible;
}

.preview-book.is-opening .book-pages-edge,
.preview-book.is-flipping .book-pages-edge,
.preview-book.is-open .book-pages-edge {
    opacity: 0;
    visibility: hidden;
}

.preview-book.is-open .front-cover-hinge,
.preview-book.is-flipping .front-cover-hinge {
    z-index: 8;
}

/* tieň pod knihou */
.preview-book3d::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 78%;
    height: 24px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,.46) 0%, rgba(0,0,0,0) 70%);
    filter: blur(9px);
    opacity: .9;
    pointer-events: none;
}

.book-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 100;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 28px;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(4px);
}

    .book-close:hover {
        background: rgba(255,255,255,0.24);
    }

@media (max-width: 980px) {
    .book-preview-stage {
        width: 100%;
        height: 76vh;
    }

    .preview-book3d {
        --bookW: min(46vw, 290px);
        width: var(--bookW);
        height: calc(var(--bookW) * 1.47);
    }
}

@media (max-width: 700px) {
    .preview-book3d {
        --bookW: min(60vw, 240px);
        width: var(--bookW);
        height: calc(var(--bookW) * 1.47);
    }

    .preview-book {
        --ry: -12deg;
        --rx: 4deg;
    }
}




.preview-book.is-closing-back .book-back-cover,
.preview-book.is-closing-back .book-leaf.last-leaf-closing,
.preview-book.is-closed-back .book-back-cover {
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
}


    /* posledná biela strana */
    .preview-book.is-closing-back .book-leaf.last-leaf-closing.is-turning {
    }

    .preview-book.is-closing-back .book-leaf.last-leaf-closing.is-turning {
        /*  transform: translateY(var(--leafY, 0px)) translateZ(var(--leafZCloseFront)) rotateY(180deg);*/
    }

        .preview-book.is-closing-back .book-leaf.last-leaf-closing.is-turning.swap-behind {
            transform: translateY(var(--leafY, 0px)) translateZ(var(--leafZCloseBack)) rotateY(180deg);
        }


/* zadná obálka sa musí zavrieť ako zadná plocha rovnakého listu */
.preview-book.is-closing-back .book-back-cover,
.preview-book.is-closed-back .book-back-cover {
    transform: translateZ(calc(var(--t) / 2 - 3px)) translateX(2px) translateY(3px) rotateY(-170deg);
}

.preview-book.is-closing-back .book-leaf.last-leaf-closing.is-turning {
    /* transform: translateZ(calc(var(--t) / 2 - 4px)) translateX(6px) translateY(1px)  rotateY(-180deg);*/
}

.preview-book.is-closing-back .book-leaf.last-leaf-closing.is-turning {
    transform: translateY(var(--leafY, 0px)) translateX(8px) translateZ(var(--leafZ, 0px)) rotateY(var(--leaf-rot, 0deg));
    backface-visibility: hidden;
}

.preview-book.is-closing-back .book-leaves {
    visibility: hidden;
}
/* edge sa nesmie pretočiť o 180, ale presunúť na ľavý bok */


.preview-book.is-closed-back {
    --t: 19px;
    --bookRotX: 5deg;
}

    .preview-book.is-closed-back .book-leaves,
    .preview-book.is-closed-back .front-cover-hinge {
        opacity: 0;
        visibility: hidden;
    }

    .preview-book.is-closed-back .book-back-cover {
        opacity: 1;
        visibility: visible;
    }

.preview-book.is-closing-back .book-pages-edge,
.preview-book.is-closing-back .book-back-cover {
    transition: transform 900ms cubic-bezier(.2,.8,.2,1);
    transform-origin: left center;
}

.book-leaf.hide-last-leaf {
    opacity: 0;
    visibility: hidden;
}