.flipbook-wrapper{height:100%;flex-direction:column}.flipbook-container,.flipbook-wrapper{width:100%;display:flex;align-items:center;justify-content:center;position:relative}.flipbook-container{height:calc(100% - 40px);perspective:2000px}.flipbook{position:relative;width:auto;max-width:90vw;height:100%;transform-style:preserve-3d;display:flex;justify-content:center}.book-spine{position:absolute;left:50%;top:50%;width:2px;height:100%;background:linear-gradient(90deg,#666,#999,#666);transform:translate(-50%,-50%);z-index:10;box-shadow:0 0 10px rgba(0,0,0,.3);max-height:min(100%,calc(90vw / 1.414))}.spread{width:auto;transform-style:preserve-3d;aspect-ratio:1.414/1;max-height:100%;max-width:calc(100vh * 1.414)}.page,.spread{display:flex;height:100%}.page{width:50%;position:relative;background:transparent;box-shadow:none;overflow:hidden;align-items:center;justify-content:center}.page-left{transform-origin:right center}.page-right{transform-origin:left center}.page-image{width:100%;height:100%;object-fit:contain;display:block;image-rendering:optimizeQuality;-webkit-backface-visibility:hidden;backface-visibility:hidden}.page-cover-image{width:100%;height:100%;object-fit:cover;object-position:center}.cover-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f5f5,#e0e0e0)}.flipping-page-container{position:absolute;top:0;right:0;width:50%;height:100%;z-index:50;transform-style:preserve-3d;pointer-events:none;transform-origin:left center}.flipping-page-container-back{right:auto;left:0;transform-origin:right center}.flipping-page{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform-origin:left center;will-change:transform,filter;backface-visibility:visible}.flipping-page-back{transform-origin:right center}.page-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;overflow:hidden;background:white}.page-face-front{z-index:2}.page-face-back,.page-face-front{box-shadow:0 0 15px rgba(0,0,0,.2)}.page-face-back{transform:rotateY(180deg)}.flipping-page.flip-forward{animation:flipForwardBlur .9s cubic-bezier(.4,0,.2,1) forwards}.flipping-page.flip-back{animation:flipBackBlur .9s cubic-bezier(.4,0,.2,1) forwards}@keyframes flipForwardBlur{0%{transform:rotateY(0deg);filter:blur(0) drop-shadow(2px 0 5px rgba(0,0,0,.2))}15%{transform:rotateY(-30deg);filter:blur(.2px) drop-shadow(3px 0 8px rgba(0,0,0,.25))}30%{transform:rotateY(-60deg);filter:blur(.5px) drop-shadow(4px 0 10px rgba(0,0,0,.3))}40%{transform:rotateY(-80deg);filter:blur(2px) drop-shadow(5px 0 12px rgba(0,0,0,.35))}50%{transform:rotateY(-100deg);filter:blur(3px) drop-shadow(6px 0 15px rgba(0,0,0,.4))}60%{transform:rotateY(-120deg);filter:blur(2px) drop-shadow(5px 0 12px rgba(0,0,0,.35))}70%{transform:rotateY(-140deg);filter:blur(.5px) drop-shadow(4px 0 10px rgba(0,0,0,.3))}85%{transform:rotateY(-160deg);filter:blur(.2px) drop-shadow(3px 0 8px rgba(0,0,0,.25))}to{transform:rotateY(-180deg);filter:blur(0) drop-shadow(2px 0 5px rgba(0,0,0,.2))}}@keyframes flipBackBlur{0%{transform:rotateY(0deg);filter:blur(0) drop-shadow(-2px 0 5px rgba(0,0,0,.2))}15%{transform:rotateY(30deg);filter:blur(.2px) drop-shadow(-3px 0 8px rgba(0,0,0,.25))}30%{transform:rotateY(60deg);filter:blur(.5px) drop-shadow(-4px 0 10px rgba(0,0,0,.3))}40%{transform:rotateY(80deg);filter:blur(2px) drop-shadow(-5px 0 12px rgba(0,0,0,.35))}50%{transform:rotateY(100deg);filter:blur(3px) drop-shadow(-6px 0 15px rgba(0,0,0,.4))}60%{transform:rotateY(120deg);filter:blur(2px) drop-shadow(-5px 0 12px rgba(0,0,0,.35))}70%{transform:rotateY(140deg);filter:blur(.5px) drop-shadow(-4px 0 10px rgba(0,0,0,.3))}85%{transform:rotateY(160deg);filter:blur(.2px) drop-shadow(-3px 0 8px rgba(0,0,0,.25))}to{transform:rotateY(180deg);filter:blur(0) drop-shadow(-2px 0 5px rgba(0,0,0,.2))}}.page-shadow-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.05) 50%,transparent);opacity:0;animation:shadowSweep .9s cubic-bezier(.4,0,.2,1) forwards}@keyframes shadowSweep{0%{opacity:0;transform:translateX(-100%)}30%{opacity:.5;transform:translateX(-30%)}50%{opacity:.8;transform:translateX(0)}70%{opacity:.5;transform:translateX(30%)}to{opacity:0;transform:translateX(100%)}}.nav-button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:white;border:none;border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;z-index:30}.nav-button:hover:not(:disabled){background:rgba(0,0,0,.7)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button-prev{left:2rem}.nav-button-next{right:2rem}.page-indicator{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.5);color:white;padding:.5rem 1rem;border-radius:20px;font-size:14px;text-align:center;z-index:100}@media (max-width:768px){.flipbook-container{height:calc(100% - 100px)}.flipbook{width:100%;max-width:100%;padding:0 5px}.spread{aspect-ratio:unset;width:100%}.page{width:50%}.page-cover-image{object-fit:contain!important;object-position:center!important}.nav-button{position:fixed;bottom:20px;top:auto;width:45px;height:45px;background:rgba(0,0,0,.7);border-radius:50%}.nav-button-prev{left:20px;transform:none}.nav-button-next{right:20px;transform:none}.page-indicator{bottom:75px;font-size:14px;padding:6px 12px}}