*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{overflow:hidden;background:#242321}
.stage{width:100vw;height:100dvh;display:grid;grid-template-columns:clamp(30px,6vw,82px) minmax(0,1400px) clamp(30px,6vw,82px);align-items:center;gap:clamp(0px,1vw,12px);perspective:2800px}
.book{position:relative;width:min(88vw,1400px);aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;transform-style:preserve-3d;filter:drop-shadow(0 28px 28px #0007)}
.physical-page{position:relative;overflow:hidden;background:#111;border:1px solid #666}
.page-flipper{position:absolute;inset:0;cursor:pointer;transform-style:preserve-3d;transition:transform 1.05s cubic-bezier(.2,.7,.2,1)}
.page-flipper.is-back{transform:rotateY(180deg)}
/* FRONT/BACK = STANDARD CONTENT. ENGINE positions faces; content owns no animation. */
.front,.back{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{transform:rotateY(180deg)}
.front>img,.back>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.turn{position:absolute;top:0;width:50%;height:100%;visibility:hidden;z-index:50;background:#eee3c8;transform-style:preserve-3d;pointer-events:none}
.turn-r{right:0;transform-origin:left}.turn-l{left:0;transform-origin:right}.turn.active{visibility:visible}
.turn-r.active{animation:n 1.85s cubic-bezier(.18,.72,.18,1) forwards}.turn-l.active{animation:p 1.65s cubic-bezier(.18,.72,.18,1) forwards}
@keyframes n{to{transform:rotateY(-180deg)}}@keyframes p{to{transform:rotateY(180deg)}}
.book:after{content:"";position:absolute;z-index:100;left:50%;top:0;bottom:0;width:2px;background:#0006;pointer-events:none}
.nav{border:0;background:transparent;color:#fff;font:clamp(46px,6vw,82px)/1 Georgia;cursor:pointer}
@media(max-width:700px){.stage{grid-template-columns:30px minmax(0,1fr) 30px;gap:0}.book{width:calc(100vw - 60px)}}