/* Book Concept v3 (Figma 29:841): Geist type, square buttons, text cards, dithered book. */
@font-face{font-family:Geist;src:url('assets/geist-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/geist-mono-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
:root{--mono:'Geist Mono',ui-monospace,Menlo,monospace;--display:Geist,'General Sans',Arial,sans-serif}

/* Chrome: everything small is Geist Mono Medium, uppercase. */
footer,#chapter,#reading-time,.navigation button,.text-button,.hint,.pre-line,.pre-link,.pill{font-family:var(--mono);font-weight:500}
footer{font-size:14px;letter-spacing:-.28px;line-height:.9;text-transform:uppercase}
#chapter.read{font-weight:500}
.navigation{gap:8px}
.navigation button{font-size:14px;letter-spacing:-.28px;padding:8px 0}
.hint{font-size:16px;letter-spacing:-.32px;line-height:.9;text-transform:uppercase}
.progress button:after{background:rgba(255,255,255,.5)}
.progress button[aria-current=true]:after{background:#fff}

/* Buttons are white rectangles now, no pill radius. */
.pill{border-radius:0;font-size:14px;line-height:1;text-transform:uppercase;gap:4px;padding:10px 10px 10px 14px;color:#10110e;background:#fff}
.pill:hover{background:#ffd9c4;transform:none}
.pill.small{font-size:12px;gap:4px;padding:8px 10px 8px 14px}
#replay{gap:8px}
.end-actions .text-button{font-size:14px;letter-spacing:0;text-decoration:underline;text-underline-offset:3px}
.end-actions>span{font-family:var(--mono);font-size:14px}

/* Big type is Geist Bold, -7% tracking. */
.hero-title{top:13.1%;transform:none;font-family:var(--display);font-weight:700;font-size:clamp(56px,11.11vw,200px);letter-spacing:-.07em;line-height:.9}
.intro-action{top:32.7%;transform:none}
.ending h2{font:700 clamp(48px,9.72vw,180px)/.9 var(--display);letter-spacing:-.07em}

/* Preloader captions. */
.pre-line,.pre-link{font-size:14px;line-height:.9;letter-spacing:0}

/* Reading cards: the lines sit on a white plate in the top-left corner of each page. */
.page-copy{left:2.73cqw;top:2.8cqw;width:auto;max-width:var(--card,32cqw);padding:1.37cqw 2.05cqw;background:rgba(255,255,255,.9);
  font:500 1.71cqw/1.2 var(--mono);letter-spacing:0;color:#4c2516;display:flex;flex-direction:column;gap:1.02cqw;z-index:2}
.page.right .page-copy,.page.right.warm-page .page-copy{color:#2e2f63;left:3.3cqw}
.page-copy p{margin:0}
.page-copy em{font-style:normal;font-weight:500}
.page-copy:empty{display:none}
.cover-inside .page-copy{text-align:left}

/* The book itself is dithered like the room (Figma: Dither, Bayer 16×16, size 2, 3 levels).
   The SVG filter #dither in index.html does the same ordered quantisation on the page art,
   so the white cards and the hit areas above it stay crisp. */
.page{background-image:none!important}
.page:before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:var(--art);background-size:inherit;background-position:inherit;background-repeat:no-repeat;filter:url(#dither)}
.cover-front{background:none}
.cover-front:before{content:'';position:absolute;inset:0;border-radius:inherit;background:url('assets/cover.webp') center/100% 100%;filter:url(#dither)}
.cover-inside{background:none}
.depth-art,.paper-art,.paper-character img{filter:url(#dither)}
.book.shadow-light .page{filter:none}
.book.shadow-light .page:before{filter:brightness(1.12) saturate(.8) url(#dither)}

@media(max-width:700px){
  footer{font-size:11px}
  .hero-title{top:20%;font-size:14.5vw}
  .intro-action{top:32%}
  .hint{font-size:12px}
}
/* The second line of chapter three appears only after the rabbit is given. */
.page-copy .gift-line{display:none}
.gift-given .page-copy .gift-line{display:block;animation:card-line .7s both}
@keyframes card-line{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Typing effect (type.js): caret is an inverted block, the rest is laid out but invisible. */
.tw-rest{color:transparent}
.tw-scr{opacity:.7}
.tw-cur{background:currentColor;box-shadow:0 0 0 .5px currentColor}
.hero-cursor{font:500 12px/16px var(--mono);text-transform:uppercase}

/* Hints sit above the blur bands and stay sharp. */
.hint{z-index:32;text-shadow:0 1px 0 rgba(16,17,14,.35)}

/* Cards are typed in when a spread settles, so they are hidden while pages move. */
[data-mode=prologue] .page-copy{opacity:0!important}
.book.busy .page-copy,.turning-leaf .page-copy{opacity:0}

/* Big headings never break inside a word. */
.hero-title,.ending h2{white-space:nowrap}

/* Pop-up layers: dithered like the pages, lifted higher, with a dithered contact shadow. */
.depth-art,.depth-flat .depth-art,.star-lamp .depth-art,.nightlight-on .star-lamp .depth-art{filter:url(#dither)}
.depth-scene.raised .depth-art{filter:drop-shadow(0 7px 6px rgba(36,21,39,.38)) url(#dither)}
.depth-scene.raised .star-lamp .depth-art{filter:drop-shadow(0 0 10px #ffd08b88) url(#dither)}
.nightlight-on .depth-scene.raised .star-lamp .depth-art{filter:drop-shadow(0 0 26px #ffe1a1) brightness(1.15) url(#dither)}
.bed-left{--lift:34px}.bed-right{--lift:52px}.sleeping-bed{--lift:28px}.sleeping-friends{--lift:60px}.star-lamp{--lift:74px}
.depth-scene.raised .depth-layer.near{transform:translate3d(calc(var(--depth-x,0px)*var(--response)),calc(var(--depth-y,0px)*var(--response) - 6px),calc(var(--lift) + 22px));transition:transform .6s cubic-bezier(.22,1,.36,1)}
/* While a page is still landing, the layers on that side wait for it. */
.depth-scene.raised.lead-right .bed-left,.depth-scene.raised.lead-left .bed-right{transform:translate3d(0,0,0);transition:none}
.paper-character img{filter:url(#dither)}
.paper-scene.raised .paper-character img{filter:drop-shadow(0 7px 6px rgba(36,21,39,.35)) url(#dither)}
.paper-shadow{display:none}

/* Every interactive spot gets the same small pixel marker, so the hints have something to point at. */
.hotspot:after,.depth-hit:after{content:'+';position:absolute;right:auto;bottom:auto;left:50%;top:0;translate:-50% -50%;display:grid;place-items:center;
  width:22px;height:22px;border:0;border-radius:0;background:#fff;color:#10110e;font:500 14px/1 var(--mono);box-shadow:0 0 0 3px rgba(16,17,14,.18);
  animation:marker 1.6s steps(2,jump-none) infinite;pointer-events:none}
.depth-hit{overflow:visible}
.hotspot:hover:after,.depth-hit:hover:after{background:#ffd9c4}
.book.busy .depth-hit:after,.book.busy .hotspot:after{display:none}
@keyframes marker{0%,60%{opacity:1}61%,100%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.hotspot:after,.depth-hit:after{animation:none}}
.rewinding .ending{opacity:0!important;transition:opacity .7s}
.paper-scene:not(.given) .paper-character.rabbit:after{content:'+';position:absolute;left:50%;top:0;translate:-50% -50%;display:grid;place-items:center;width:22px;height:22px;background:#fff;color:#10110e;font:500 14px/1 var(--mono);animation:marker 1.6s steps(2,jump-none) infinite;pointer-events:none}
/* In the ending the closed cover already wears the painted cover from the film, so nothing swaps mid-flight. */
[data-mode=epilogue] .cover-front:before{background-image:url('assets/book-face.webp')}
.preloader.lit .pre-link,.preloader.lit .pre-line{animation:pre-out .35s forwards}
@keyframes pre-out{to{opacity:0;filter:blur(3px)}}
[data-mode=epilogue] .cover-front{border-radius:1% 2.2% 2.2% 1%}

/* v5 fixes */
.pre-line,.pre-line.show{opacity:1;filter:none;transition:none}
.tw-cur{background:none;box-shadow:none}
.hotspot:after,.depth-hit:after,.paper-scene:not(.given) .paper-character.rabbit:after{display:none!important}
.depth-scene.driven .depth-layer{transition:none!important}
.bed-left,.sleeping-bed,.sleeping-friends{--pop:var(--pop-l,1)}
.bed-right,.star-lamp{--pop:var(--pop-r,1)}
/* no dark rims around the dithered pages: boards and spine in page colours */
.book-board{background:#e7c9a4;box-shadow:0 3px 0 #cfae8a,0 6px 0 #a88866,0 22px 40px #0003}
.spine{background:linear-gradient(90deg,transparent,#3b241c14,transparent)}
.page{border:0}

/* v6 */
.page:before{border-radius:0}
.cover-front{overflow:hidden}
.cover-front:before{border-radius:0}
body:not(.chrome-on) .intro-action{opacity:0;pointer-events:none}
.intro-action{transition:opacity .5s}
/* Pop-ups are hinged at the bottom of the page like real paper cut-outs: at rest they stand exactly
   over their printed art (no depth offset, so nothing drifts or sticks out); when a page turns they
   fold down onto the page and the next ones swing up. */
.depth-layer{transform-origin:50% 100%}
.depth-scene.raised .depth-layer{transform:translate3d(calc(var(--depth-x,0px)*var(--response)*.4),0,1px) rotateX(calc((1 - var(--pop,1))*86deg))}
.depth-scene.raised .depth-layer.near{transform:translate3d(calc(var(--depth-x,0px)*var(--response)*.4),-4px,1px) rotateX(-7deg);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.depth-scene.raised .depth-art{filter:drop-shadow(0 5px 4px rgba(36,21,39,.32)) url(#dither)}
/* v7: the invitation is typed in, never blurred in */
.pre-link{animation:none!important;filter:none!important}
body.lights-on .intro-action{transition:opacity .6s .2s}
/* v8: pop-ups sit exactly on their art and lift off the paper once a spread has landed */
.depth-scene.raised .depth-layer,.depth-scene.raised .depth-layer.near{transform:none!important}
.depth-scene.raised .depth-art{animation:lift .7s cubic-bezier(.22,1,.36,1) both}
.depth-scene.raised .bed-right .depth-art,.depth-scene.raised .star-lamp .depth-art{animation-delay:.08s}
@keyframes lift{0%{translate:0 0;filter:url(#dither)}45%{translate:0 -7px}100%{translate:0 -3px}}
.depth-scene.raised .depth-layer.near .depth-art{translate:0 -6px;transition:translate .4s}
.paper-scene,.depth-scene{z-index:7}
/* v8: nothing dark may peek around the rounded page corners or the spine */
.book-shadow{top:32%;bottom:-5%;left:6%;right:6%;opacity:.7}
.page.left,.page.right{box-shadow:none!important}
.page:after{display:none}
.book-board{box-shadow:0 3px 0 #d9b993,0 6px 0 #c4a27c,0 20px 34px #1b14302e}
.paper-block{box-shadow:1px 1px 0 #f1dec2,2px 3px 0 #e2c9a8,3px 5px 0 #ead3b2,4px 7px 0 #dcc2a0;background:#ecd6b4}
.turning-leaf .face{box-shadow:none}
.face:after{background:linear-gradient(90deg,#0001,transparent 30%,#fff1)}
/* v9: the closed book must look like the painted one in the film — no board or page block sticking out */
[data-mode=epilogue] .right-board,[data-mode=epilogue] .paper-block,[data-mode=epilogue] .book-shadow{opacity:0;transition:opacity .4s}
/* v10 */
/* cards: plain block flow, so the typing spans never become separate flex rows */
.page-copy{display:block}
.page-copy p{margin:0 0 1.02cqw}.page-copy p:last-child{margin-bottom:0}
/* the button is present the moment the light comes on (its label types in) */
body:not(.chrome-on) .intro-action{opacity:0}
body.chrome-on .intro-action{opacity:1;transition:none}
/* title and button scroll up and away while the book opens */
[data-mode=prologue] .hero-title{opacity:1!important;translate:0 calc((1 - var(--title,1)) * -46vh)}
[data-mode=prologue] .intro-action{opacity:1;translate:0 calc((1 - var(--title,1)) * -46vh)}
body:not(.chrome-on) [data-mode=prologue] .intro-action{opacity:0}
/* no blurred shadow line under the book */
.book-board{box-shadow:0 2px 0 #d9b993,0 4px 0 #c9a882}
.book-shadow{display:none}
/* v11: the ending keeps the book open on its last spread; the film closes it */
[data-mode=epilogue] .cover{display:none!important}
[data-mode=epilogue] .base-pages .left{visibility:visible!important}
[data-mode=epilogue] .page-copy{opacity:var(--ep-cards,1)!important}
[data-mode=epilogue] .right-board,[data-mode=epilogue] .paper-block{opacity:1}
.lbl{display:inline-block;white-space:pre;text-align:left}
.blur-band{display:none!important}
/* the typed label must not pick up the old ".pill span" arrow size */
.pill .lbl,.pre-link .lbl{font-size:inherit;line-height:inherit;letter-spacing:inherit}
.pill.small span.lbl,.pill span.lbl{font-size:inherit;line-height:inherit;letter-spacing:inherit}
@media(hover:hover) and (pointer:fine){#experience.hero-cursor-active .book,#experience.hero-cursor-active .stage{cursor:none}}
.navigation button[aria-disabled=true]{pointer-events:none;color:rgba(255,255,255,.4)}
/* Hidden pop-up/hotspot buttons of the first spread must not catch the pointer on the hero. */
[data-mode=prologue] .stage{pointer-events:none}
/* WebKit/Safari resolves the SVG filter's user space against the wrong box for elements that are
   not composited (the right page came out blank); a compositing layer gives it its own space. */
.base-pages .page:before,.cover-front:before{transform:translateZ(0)}
/* The turning leaf: its faces hide their backs, so nothing inside may open its own 3D layer
   (WebKit/Safari would show the mirrored back page through the front one). */
.turning-leaf .page,.turning-leaf .page:before,.turning-leaf .page-copy{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.turning-leaf .page:before{transform:none}
.pre-link .lbl{text-decoration:underline;text-underline-offset:3px}
.safari .face .page:before,.safari .depth-art,.safari .paper-art,.safari .paper-character img,.safari .depth-scene.raised .depth-art,.safari .paper-scene.raised .paper-character img{filter:none!important}
.safari .page:before,.safari .cover-front:before,.safari .depth-art,.safari .paper-art,.safari .paper-character img,.safari .depth-scene.raised .depth-art,.safari .paper-scene.raised .paper-character img,.safari .book.shadow-light .page:before{filter:none!important}
.safari .cover-front:before{background-image:url('assets/d/cover.webp')}