/* The course opens as a picture book, before any panorama controls or sign-in UI. */
#pictureBook{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:transparent;perspective:2200px;isolation:isolate}
#pictureBook:before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 42%,#705133,#2b2119 68%,#171511);pointer-events:none}
#pictureBook[hidden]{display:none!important}
.book-stage{position:relative;width:min(94vw,calc((100vh - 180px)*1.7778),1680px);aspect-ratio:16/9;transform-style:preserve-3d;margin-top:-60px}
.book-cover,.book-leaf{position:absolute;inset:0;box-sizing:border-box;transform-origin:left center;backface-visibility:hidden;border-radius:5px;box-shadow:0 16px 44px #0007}
.book-cover{z-index:4;border:clamp(16px,2.2vw,32px) solid transparent;border-image:url('../assets/dunhuang-frame-v2.svg') 80 / clamp(16px,2.2vw,32px) / 0 round;background:#f5dfb5;transform:rotateY(0);overflow:hidden}
.book-cover img{display:block;width:100%;height:100%;object-fit:fill}
.book-cover:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 8px 0 16px #55352130;border-left:1px solid #e7c58b80}
.book-leaf{background:linear-gradient(90deg,#b18d5c,#f4dfb4 2%,#fff0cf 50%,#e7c994);border:1px solid #bfa16d;pointer-events:none}
.book-leaf.first{z-index:3;transform:translate(4px,4px)}
.book-leaf.second{z-index:2;transform:translate(8px,8px)}
.book-leaf:after{content:'';position:absolute;inset:8px;border:1px solid #b68a3e45}
.book-enter{position:absolute;top:calc(100% + 28px);left:50%;transform:translateX(-50%);min-width:180px;padding:13px 34px;border:1px solid #ddbd7b;border-radius:7px;background:linear-gradient(#466a5f,#2d4d44);color:#f5e2af;font:600 clamp(18px,2.2vw,24px)/1.3 'Kaiti SC','STKaiti',serif;letter-spacing:.18em;box-shadow:inset 0 0 0 4px #d3ac5e28,0 5px 18px #0004;cursor:pointer;white-space:nowrap}
.book-enter:hover{background:linear-gradient(#577b6e,#365b4f)}
.book-enter:focus-visible{outline:3px solid #f3d58f;outline-offset:5px}
.book-enter:disabled{cursor:wait}
#pictureBook.opening:before{animation:book-room-reveal 2.1s ease forwards}
#pictureBook.opening .book-cover{animation:book-cover-open 1.9s cubic-bezier(.35,.05,.25,1) forwards}
#pictureBook.opening .book-leaf.first{animation:book-leaf-open 1.7s .18s cubic-bezier(.35,.05,.25,1) forwards}
#pictureBook.opening .book-leaf.second{animation:book-leaf-open 1.65s .4s cubic-bezier(.35,.05,.25,1) forwards}
#pictureBook.opening .book-enter{visibility:hidden}
@keyframes book-cover-open{0%{transform:rotateY(0);filter:brightness(1)}65%{opacity:1;filter:brightness(.85)}100%{transform:rotateY(145deg);opacity:0;filter:brightness(.65)}}
@keyframes book-leaf-open{0%{transform:rotateY(0);opacity:1}80%{opacity:.9}100%{transform:rotateY(150deg);opacity:0}}
@keyframes book-room-reveal{0%,20%{opacity:1}80%,100%{opacity:0}}
@media(max-height:500px){.book-stage{width:min(88vw,calc((100vh - 126px)*1.7778));margin-top:-40px}.book-enter{top:calc(100% + 15px);padding:9px 28px;font-size:18px}}
@media(prefers-reduced-motion:reduce){#pictureBook.opening{animation:none;background:transparent}#pictureBook.opening .book-cover,#pictureBook.opening .book-leaf{animation:none;opacity:0}}