/* Book Concept (Figma 20:440): dithered hero + dithered room behind the book. */
body{background:#10110e}
.backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
main{z-index:1}
body.no-webgl{background:#10110e url('assets/room-bg.webp') center/cover fixed}
body.no-webgl:before{content:'';position:fixed;inset:0;background:rgba(50,59,114,.5)}

/* Progressive blur bands at the top and bottom of every frame. */
.blur-band{position:fixed;left:0;right:0;height:200px;z-index:20;pointer-events:none;background:rgba(255,255,255,.01);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.blur-band.top{top:0;-webkit-mask:linear-gradient(#000 30%,transparent);mask:linear-gradient(#000 30%,transparent)}
.blur-band.bottom{bottom:0;-webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%)}

/* Type and chrome from the mockups. */
header{padding:28px 32px}
footer{font-size:14px;letter-spacing:-.28px;line-height:.9;padding:32px}
footer:before,header:before{display:none}
.pill{font-size:14px;line-height:1;gap:4px;padding:10px 10px 10px 14px}
.pill.small{font-size:12px;padding:8px 8px 8px 14px}
.navigation{gap:8px}.navigation button{font-size:14px;text-transform:uppercase}
.navigation button[aria-disabled=true]{opacity:1;color:rgba(255,255,255,.5)}
.progress{gap:8px}.progress button:after{background:rgba(255,255,255,.5)}
.hint{bottom:83px;height:auto;line-height:.9;font-size:16px;letter-spacing:-.32px;color:#fff;text-transform:uppercase}

/* Hero. */
.hero-title{top:21.1%;transform:translateY(-50%);font-family:'General Sans',Arial,sans-serif;font-weight:600;font-size:clamp(60px,11.11vw,200px);line-height:.9;letter-spacing:-.05em;color:#fff}
[data-mode=prologue] .hero-title{opacity:var(--title,1);visibility:visible}
body:not(.lights-on) .hero-title,body:not(.lights-on) .intro-action{opacity:0!important;pointer-events:none}
body.lights-on [data-mode=prologue] .hero-title{animation:title-in 1.2s both}
.intro-action{top:34.6%;bottom:auto;transform:translateY(-50%);z-index:25}
[data-mode=prologue] .intro-action{opacity:var(--title,1)}
[data-mode=prologue] .cover{display:none}
[data-mode=prologue] .page-copy{opacity:var(--copy,0)}
[data-mode=prologue] .spine,[data-mode=prologue] .ambient-sheen{opacity:var(--copy,0)}
body.no-webgl [data-mode=prologue] .stage{opacity:1!important}

/* The book stands in the room. */
.book-shadow{position:absolute;left:3%;right:3%;top:10%;bottom:-6%;border-radius:8%;background:radial-gradient(ellipse at 50% 70%,#05061aaa,transparent 68%);filter:blur(22px);transform:translateZ(-40px);pointer-events:none}
[data-mode=epilogue] .book-shadow{opacity:.6}

/* Goodnight: the book closes and the room goes dark. */
[data-mode=epilogue] .cover{display:block}
[data-mode=epilogue] .left-board{visibility:visible}
[data-mode=epilogue] .base-pages .left{visibility:hidden}
[data-mode=epilogue] .stage.closed .spine,[data-mode=epilogue] .stage.closed .ambient-sheen{visibility:hidden}
[data-mode=epilogue] .ending .end-actions{pointer-events:none}
[data-mode=epilogue].end-ready .ending .end-actions{pointer-events:auto}

/* Preloader (Figma 25:792–25:810): the canvas draws the dithered night gradient and the star;
   the DOM only carries the caption line under it. */
.preloader{position:fixed;inset:0;z-index:80;pointer-events:none}
.pre-line,.pre-link{position:absolute;left:50%;top:calc(50% + 73.5px);translate:-50% -50%;margin:0;white-space:nowrap;font:500 14px/.9 'General Sans',Arial,sans-serif;text-transform:uppercase;color:#fff;text-align:center}
.pre-line{opacity:0;transition:opacity .6s,filter .6s;filter:blur(4px)}
.pre-line.show{opacity:1;filter:none}
.pre-link{pointer-events:auto;border:0;background:none;padding:10px 6px;text-decoration:underline;text-underline-offset:3px;animation:pre-in .8s both}
.pre-link:hover{color:#ffd99b}
.preloader.lit .pre-link,.preloader.lit .pre-line{opacity:0;transition:opacity .4s}
body:not(.lights-on) header,body:not(.lights-on) footer,body:not(.lights-on) .blur-band{opacity:0;pointer-events:none}
header,footer,.blur-band{transition:opacity .8s}
@keyframes pre-in{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}

/* Ending (Figma 25:697). */
.ending{position:absolute;inset:0;z-index:25}
[data-mode=epilogue] .ending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:var(--end,0)}
.ending h2{position:static;transform:none;margin:0;width:min(1375px,calc(100% - 40px));text-align:center;font:600 clamp(52px,9.72vw,180px)/.9 'General Sans',Arial,sans-serif;letter-spacing:-.04em;text-transform:uppercase;color:#fff}
.end-actions{position:static;display:flex;align-items:center;gap:16px;font-size:14px}
.end-actions .text-button{font-size:14px;text-transform:uppercase;text-underline-offset:3px}
[data-mode=epilogue] .stage.gone{visibility:hidden}
[data-mode=epilogue] .navigation,[data-mode=epilogue] .progress{display:none!important}
#chapter.read{font-weight:400;text-transform:uppercase}

@media(max-width:700px){
  .blur-band{height:120px}
  footer{padding:18px 20px;font-size:11px}
  .hero-title{top:22%;font-size:15vw}
  .intro-action{top:33%}
  .hint{font-size:12px;bottom:121px}
  [data-mode=prologue] .stage{inset:100px 0 290px}
  [data-mode=prologue] .mobile-copy{display:grid;opacity:var(--copy,0)}
  .mobile-copy{background:#17132fd9;padding:16px 18px;border-radius:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
}
@media(prefers-reduced-motion:reduce){.pre-line{transition:none}}
[data-mode=epilogue] .cover-title{display:none}