/**
 * book.css
 * The desk scene (closed cover) and the book scene (open two-page spread,
 * page-turn animation, mobile single-page fallback). Depends on the
 * design-system tokens and assets/leather-cover.png.
 */

/* -------- desk / closed cover -------- */
#scene-desk{display:flex;align-items:center;justify-content:center;background-image:var(--texture-wood);background-size:600px 600px;background-color:#1c140c;position:relative;padding:60px 24px}
#scene-desk::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 160px rgba(0,0,0,.45)}
.cover{position:relative;width:380px;height:520px;cursor:pointer;transform:rotate(-1.2deg);filter:drop-shadow(18px 34px 30px rgba(0,0,0,.65));transition:transform 200ms var(--ease-settle)}
.cover:hover{transform:rotate(-1.2deg) translateY(-4px)}
.cover-face{position:absolute;inset:0;background-image:url('../assets/leather-cover.png');background-size:cover;background-position:center;border:1px solid #0f0805;box-shadow:0 0 0 6px #201209, inset 0 0 70px rgba(0,0,0,.55)}
.cover-face::after{content:'';position:absolute;inset:0;background-image:var(--texture-grime);opacity:.4;mix-blend-mode:overlay}
.cover-title{position:absolute;top:36%;left:0;right:0;text-align:center;font-style:italic;font-weight:500;font-size:34px;color:#a68d5c;text-shadow:0 1px 0 rgba(255,235,200,.15),0 -2px 2px rgba(0,0,0,.8)}
.cover-sub{position:absolute;top:52%;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(166,141,92,.6)}
.cover-spine{position:absolute;top:0;bottom:0;left:0;width:30px;background-image:url('../assets/leather-cover.png');background-size:200px 620px;background-position:right center;filter:brightness(.55);box-shadow:inset -6px 0 10px rgba(0,0,0,.6)}
.cover-spine::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,rgba(0,0,0,.55) 0 2px,transparent 2px 130px);pointer-events:none}
.cover-edge{position:absolute;top:0;bottom:0;left:-14px;width:14px;background-image:url('../assets/leather-cover.png');background-size:200px 620px;background-position:left center;filter:brightness(.4);box-shadow:-2px 0 6px rgba(0,0,0,.6)}
.desk-hint{position:absolute;bottom:40px;left:0;right:0;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(230,217,189,.65)}

/* -------- open book: shell + spread + pages -------- */
#scene-book{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px 40px;background:var(--surface-bg);min-height:calc(100vh - 34px)}
.book-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.back-link{background:none;border:none;color:var(--text-secondary);font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.back-link:hover{color:var(--text-primary)}
.spread-wrap{position:relative;display:flex;justify-content:center;width:100%;perspective:3200px}
.book-shell{position:relative;display:flex;align-items:stretch;padding:20px 30px;background-image:url('../assets/leather-cover.png');background-size:cover;background-position:center;box-shadow:var(--shadow-book);border:1px solid #0f0805}
.book-shell::before{content:'';position:absolute;inset:0;background-image:var(--texture-grime);opacity:.4;mix-blend-mode:overlay;pointer-events:none}
.page-edges{position:relative;width:9px;background:repeating-linear-gradient(to bottom,#e9dcbc 0 2px,#cdbea0 2px 4px);box-shadow:inset 0 0 6px rgba(0,0,0,.35)}
.spread{position:relative;display:flex;height:620px;width:960px;box-shadow:var(--shadow-book);background:#241708}
.leaf-static{position:relative;width:50%;height:100%;background:var(--surface-page);background-image:var(--texture-paper);color:var(--text-on-page);overflow:hidden;padding:38px 46px}
.leaf-static.left{border-right:1px solid rgba(0,0,0,.35);box-shadow:inset -14px 0 24px -18px rgba(0,0,0,.5)}
.leaf-static.right{box-shadow:inset 14px 0 24px -18px rgba(0,0,0,.5)}

/* -------- page typography -------- */
.page-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-page-muted);margin-bottom:8px}
.page-h{font-size:23px;font-style:italic;font-weight:500;margin:0 0 10px}
.page-body{font-size:15px;line-height:1.62;text-wrap:pretty}
.page-body p{margin:0 0 14px;text-wrap:pretty}
.page-body.poem{font-style:italic}
.poem-stanza{margin:0 0 20px;line-height:1.9}
.page-body img{width:100%;max-width:260px;display:block;margin:0 auto 14px;filter:sepia(.35) contrast(1.05) brightness(.95);border:1px solid var(--border-on-page);box-shadow:var(--shadow-pixel-sm)}
.page-body .cap{display:block;text-align:center;font-family:var(--font-mono);font-size:10px;color:var(--text-on-page-muted);margin:-10px 0 14px;max-width:280px;margin-left:auto;margin-right:auto;line-height:1.5}
.page-illustrated{height:100%;display:flex;flex-direction:column;justify-content:center}
.plate-credit{font-family:var(--font-mono);font-size:10px;color:var(--text-on-page-muted);margin-top:16px;letter-spacing:.02em;word-break:break-word;overflow-wrap:anywhere}
.plate-credit a{color:var(--rust-500)}
.plate-credit a:hover{color:var(--rust-400)}
.page-num{position:absolute;bottom:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--text-on-page-muted)}
.leaf-static.left .page-num{right:16px}
.leaf-static.right .page-num{left:16px}
.toc-item{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-on-page);font-size:15px;cursor:pointer}
.toc-item:hover{color:var(--accent-primary-active)}
.toc-item span.d{font-family:var(--font-mono);font-size:11px;color:var(--text-on-page-muted)}

/* -------- page-turn (3D flip leaf) -------- */
.turn-zone{position:absolute;top:0;bottom:0;width:64px;cursor:pointer;z-index:30}
.turn-zone.next{right:0}
.turn-zone.prev{left:0}
.flip-leaf{position:absolute;top:0;width:50%;height:100%;z-index:20;pointer-events:none}
.flip-leaf.right{left:50%}
.flip-leaf.left{left:0}
.flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--turn-ms,520ms) cubic-bezier(.4,0,.2,1);transform:rotateY(0deg);will-change:transform}
.flip-inner.turn-fwd{transform:rotateY(-180deg)}
.flip-inner.turn-back{transform:rotateY(180deg)}
.flip-leaf.right .flip-inner{transform-origin:left center}
.flip-leaf.left .flip-inner{transform-origin:right center}
.flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:var(--surface-page);background-image:var(--texture-paper);color:var(--text-on-page);overflow:hidden;padding:38px 46px;box-shadow:0 0 24px rgba(0,0,0,.3);transform:translateZ(0)}
.flip-face.back{transform:rotateY(180deg) translateZ(0)}

/* -------- mobile single-page nav bar -------- */
.mobile-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--surface-panel);border-top:2px solid var(--border-strong);padding:10px 16px;align-items:center;justify-content:space-between;font-family:var(--font-mono);box-shadow:var(--shadow-pixel-md)}
.mobile-nav button{background:var(--surface-panel-raised);color:var(--text-primary);border:1px solid var(--border-default);padding:10px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;min-height:44px}
.mobile-nav button:disabled{opacity:.35}
.mobile-nav span{font-size:11px;color:var(--text-secondary);letter-spacing:.05em;text-transform:uppercase}