/* =========================================================================
   STAGE — the WebGL canvas owns the viewport.

   The first screen is one object in an empty room. There is no chrome, and
   nothing to scroll to: the wheel belongs to the camera. The library markup
   stays in the document for crawlers and for anyone without WebGL, held
   back until the reader comes out the far side of the book.
   ========================================================================= */

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}

/* The white room belongs to the book only. This stylesheet is linked after
   the library's own theme, so an unconditional body rule here would win and
   leave the shelf's cream type sitting on white. Scope it to the closed
   state and the library gets its dark ground back when it is released. */
body:not(.beyond-open){
  background:#FBFAF7;
  color:#1B1A17;
  font-family:'Newsreader',Georgia,serif;
  overflow:hidden;
}
body{overscroll-behavior:none}

/* the scene */
#stage{
  display:block;
  opacity:0;                      /* book3d.js reveals it on the first frame */
  transition:opacity .55s ease;
  position:fixed; inset:0;
  width:100vw; height:100svh;
  touch-action:none;              /* the book gets the gesture, not the page */
  pointer-events:auto;            /* nothing may sit between cursor and canvas */
  cursor:grab;
  outline:none;
  z-index:1;
}
#stage:active{cursor:grabbing}

/* no WebGL, no script: the words still exist */
.ns{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  margin:0; max-width:32rem; text-align:center; font-size:1.05rem; color:#3A372F;
}

/* =========================================================================
   The library, held back
   ========================================================================= */
.beyond{
  position:fixed; inset:0; z-index:2;
  overflow:hidden;
  opacity:0; pointer-events:none;
  transition:opacity .7s ease;
}
/* Once open, the page grows with the library. Held at 100%, the root stays
   one screen tall and the library's gradient repeats every screen height,
   leaving a hard seam wherever one copy ends and the next begins. */
html:has(> body.beyond-open){height:auto;min-height:100%}
body.beyond-open{overflow:auto;height:auto;min-height:100%}
body.beyond-open .beyond{
  position:static; overflow:visible;
  opacity:1; pointer-events:auto;
  transform:none;
}

/* The library rises out of the dark the scene just faded to, rather than
   cutting in. The canvas is faded by the timeline, so nothing here fights
   the 3-D exit for control of it. */
.beyond{transform:translateY(26px);
  transition:opacity .85s ease, transform 1.05s cubic-bezier(.22,.9,.28,1)}

/* and the books arrive along the shelf instead of all at once */
@keyframes shelf-rise{
  from{opacity:0;transform:translateY(26px) rotate(var(--tilt,0deg)) scale(.97)}
  to  {opacity:1;transform:translateY(0)    rotate(var(--tilt,0deg)) scale(1)}
}
body.beyond-open .vol{animation:shelf-rise .72s cubic-bezier(.22,.9,.28,1) backwards}
body.beyond-open .bay .vol:nth-child(1){animation-delay:.34s}
body.beyond-open .bay .vol:nth-child(2){animation-delay:.42s}
body.beyond-open .bay .vol:nth-child(3){animation-delay:.50s}
body.beyond-open .bay .vol:nth-child(4){animation-delay:.58s}
body.beyond-open .shelf:nth-of-type(n+2) .vol{animation-delay:.62s}

@media (prefers-reduced-motion:reduce){
  .beyond{transform:none;transition:opacity .3s ease}
  body.beyond-open .vol{animation:none}
}

@media (prefers-reduced-motion:reduce){
  .beyond{transition:none}
}