/* The menu PDFs, page for page, sized to the screen and lit like the rooftop.
   pages.css carries the type straight from the PDF; nothing here touches it.
   Every page is 1620 × 2880 — poppler's rendering of the printed page — and is
   scaled as a whole, so the type stays exactly where the menu puts it. */

:root{
  --lamp:#EE4823;
  --night:#07080A;
  --gutter:clamp(14px, 3.4vw, 64px);
}

*{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* Every scroll comes to rest somewhere deliberate. A page taller than the
     screen gets a stop per screenful (app.js places them), so locking never
     puts the bottom of a page out of reach. */
  scroll-snap-type:y mandatory;
}
body{
  margin:0;background:var(--night);color:#fff;
  font-family:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:none}

/* ── the room the menu is read in ──────────────────────────────────── */
.room{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.lamp{position:absolute;transition:background-image 900ms ease}
.lamp--key{
  inset:-15% -15% auto -15%;height:82vh;
  background:radial-gradient(52% 100% at 50% 0%, var(--lamp) 0%, transparent 70%);
  opacity:.30;filter:blur(26px);
}
.lamp--floor{
  inset:auto -15% -16% -15%;height:52vh;
  background:radial-gradient(62% 100% at 50% 100%, var(--lamp) 0%, transparent 72%);
  opacity:.17;filter:blur(34px);
}
#motes{position:absolute;inset:0}
#motes canvas{opacity:.42}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;background:rgba(255,255,255,.06)}
.progress span{display:block;height:100%;width:0;background:var(--lamp);transition:width .1s linear, background-color .9s ease}

/* ── the pages ─────────────────────────────────────────────────────── */
#book{
  position:relative;z-index:1;
  padding:var(--gutter) 0 calc(var(--gutter) * 2);
  opacity:0;
}
body.ready #book{opacity:1}

/* Nothing on this page animates into view. The wait happens once, here, while
   the whole menu downloads; after that every page is already drawn and
   scrolling never has to catch up with anything. */
.waiting{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  background:var(--night);
}
.waiting span{
  width:34px;height:34px;
  border:2px solid color-mix(in srgb, #fff 18%, transparent);
  border-top-color:var(--lamp);
  border-radius:50%;
  animation:turn 820ms linear infinite;
}
@keyframes turn{to{transform:rotate(1turn)}}

.pg{
  position:relative;
  display:flex;justify-content:center;
  padding:calc(var(--gutter) * .5) 0;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  scroll-margin-top:calc(var(--gutter) * .5);
}

/* A heading per page, for a reader working through 41 of them without sight of
   the artwork. Clipped rather than hidden, so it stays in the accessibility
   tree. */
.offscreen{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* A resting place one screen further down a page too tall to show at once.
   Without these, locking every page would make the foot of a tall page
   unreachable. */
.stop{
  position:absolute;left:0;width:1px;height:1px;
  pointer-events:none;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  --glow:1;
  /* app.js sets these per page: CSS cannot divide a length by a length */
  --s:0.667;
  --sheet-w:1080px;
  --sheet-h:1920px;
  --page-w:1620px;
  --page-h:2880px;
}

.frame{
  position:relative;
  width:var(--sheet-w);
  height:var(--sheet-h);
  /* the page sits in the room's light and throws a little of it back, more
     brightly when it is the page being read */
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),
             0 0 0 1px rgba(255,255,255,.05),
             0 0 calc(130px * var(--glow)) -46px var(--lamp);
}
.sheet{
  position:absolute;top:0;left:0;
  width:var(--page-w);
  height:var(--page-h);
  transform:scale(var(--s));
  transform-origin:top left;
}
.sheet .art{
  position:absolute;top:0;left:0;
  width:var(--page-w);
  height:var(--page-h);
}
.sheet p{
  position:absolute;margin:0;padding:0;
  white-space:nowrap;
}
/* A line of the menu, and the words in it. Each word is placed at the x the
   PDF places it and tracked out to the width the PDF gives it, which is how
   the type lands back on the artwork exactly where it was set. */
.ln{display:block;white-space:pre;width:max-content;transform-origin:left top}

/* poppler spaces the display type with hard spaces, which wrap badly at the
   right edge of a narrow page; keep every run on its own line */
.sheet p b{font-weight:700}

/* ── odds and ends ─────────────────────────────────────────────────── */
.tail{
  position:relative;z-index:1;
  text-align:center;padding:clamp(40px,7vh,90px) var(--gutter) clamp(50px,8vh,110px);
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.tail svg{width:58px;fill:#fff;opacity:.9}
.tail p{margin:0;max-width:46ch;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55)}

@media (prefers-reduced-motion: reduce){
  #motes{display:none}
  .waiting span{animation:none}
}