/* The room: for people who watched the film. A pre-rendered walk up to a table in the fog, one choice, then the
   booklet in your hands. Everything here sits over the booklet page and gives it back when you pick it up. */
.room { position: fixed; inset: 0; z-index: 40; background: #000; color: var(--ink); font-family: var(--sans); overflow: hidden; }
.room[hidden] { display: none; }
.rv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s linear; }
.rv.on { opacity: 1; }
.room .grain { position: absolute; inset: -50%; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -3%); } 75% { transform: translate(-3%, -6%); } }

/* the way in */
.begin { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; background: #000; cursor: pointer; }
.begin b { font-size: clamp(28px, 4vw, 54px); font-weight: 700; letter-spacing: -.02em; }
.begin span { font-size: 12px; font-weight: 700; color: var(--mute); }
@media (hover: hover) { .begin:hover b { color: var(--orange); } }
.begin[hidden] { display: none; }
/* a phone with Safari's bars still over the page: one swipe up takes them away */
.up { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); display: grid; justify-items: center; gap: 8px;
  font-style: normal; font-size: 11px; font-weight: 700; color: var(--orange); }
.up[hidden] { display: none; }
.up i { width: 2px; height: 22px; background: currentColor; animation: up 1.4s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes up { 0% { transform: translateY(10px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }

/* the choice, set like a dialogue choice in a game: a list on the right, the chosen line on a white bar */
.choice { position: absolute; right: 7vw; top: 56%; display: grid; gap: 4px; min-width: min(430px, 44vw); }
.choice[hidden] { display: none; }
.choice .q { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ink); opacity: .7; }
.opt { position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 18px 11px 12px; text-align: left; color: var(--ink);
  font-size: clamp(13px, 1.25vw, 17px); font-weight: 700; letter-spacing: .01em; background: rgba(0,0,0,.35); border-left: 2px solid rgba(244,243,239,.35);
  opacity: 0; transform: translateX(14px); animation: optIn .5s cubic-bezier(.2,.7,.2,1) forwards; }
.opt:nth-child(3) { animation-delay: .09s; }
.opt kbd { display: inline-grid; place-items: center; width: 22px; height: 22px; font: inherit; font-size: 11px; border: 1.5px solid currentColor; border-radius: 3px; opacity: 0; }
.opt.on { background: var(--ink); color: #0b0b0b; border-left-color: var(--ink); }
.opt.on kbd { opacity: 1; }
.opt.on::after { content: ""; position: absolute; right: -10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--ink); }
.opt.gone { animation: optOut .35s ease forwards; }
@keyframes optIn { to { opacity: 1; transform: none; } }
@keyframes optOut { to { opacity: 0; transform: translateX(-10px); } }

/* ignored */
.void { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; text-align: center; background: #000; }
.void[hidden] { display: none; }
.void p { margin: 0; opacity: 0; transition: opacity 1.4s ease; }
.void p.on { opacity: 1; }
.void .v1 { font-size: clamp(30px, 5.4vw, 76px); font-weight: 700; letter-spacing: -.03em; line-height: .95; color: var(--ink); }
.void .v2 { font-size: 13px; font-weight: 700; color: var(--mute); }

/* phones have to be held sideways */
.turn { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 22px; background: #000; color: var(--ink); text-align: center; }
.turn[hidden] { display: none; }
.turn i { width: 34px; height: 58px; border: 2px solid var(--ink); border-radius: 6px; animation: tilt 2.2s cubic-bezier(.6,0,.3,1) infinite; }
.turn p { margin: 0; font-size: 13px; font-weight: 700; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* reading: the room behind, out of focus; the booklet held in two glass hands */
body.in-room .top, body.in-room .ctrl, body.in-room .table { visibility: hidden; }
body.in-room.reading .top, body.in-room.reading .ctrl, body.in-room.reading .table { visibility: visible; }
body.reading { background: #000 var(--read-bg, none) center / cover no-repeat; }
body.reading .table { animation: settle 1.1s cubic-bezier(.2,.7,.2,1); }
@keyframes settle { from { opacity: 0; transform: translateY(2%) scale(1.02); } }
.hands { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hands img { position: absolute; transition: left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1); }
body:not(.reading) .hands { display: none; }
.choice, .void, .begin { z-index: 5; }
.room .grain { z-index: 6; }

/* phones on their side: the choice tucks into the right edge, smaller */
@media (max-height: 520px) {
  .choice { right: 4vw; top: 50%; min-width: 0; }
  .opt { padding: 7px 14px 7px 9px; gap: 10px; font-size: 11.5px; }
  .opt kbd { display: none; }
  .void .v1 { font-size: 34px; }
}
/* phones on their side, reading: the booklet in the hands fills the height, so the page controls move to the
   empty strip on the right, under "request a seat" */
@media (max-height: 520px) {
  body.reading .top { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); font-size: 11px; }
  body.reading .ctrl { left: auto; right: max(14px, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 40px); bottom: auto;
    flex-direction: column; align-items: flex-end; gap: 10px; font-size: 11px; }
  body.reading .ctrl span { min-width: 0; order: -1; }
  body.reading .top .mark { max-width: 9em; }
}

/* page turns in the room: a full-screen clip over the booklet while a page turns; when it ends it drops under the
   page and stays on its last frame, so the room around the booklet is the rendered one and the crisp page fades in
   over the same picture */
.turnv { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 30; opacity: 0; pointer-events: none; }
.turnv.on { opacity: 1; transition: opacity .12s linear; }
.dbg { position: fixed; left: 8px; bottom: 8px; z-index: 99; margin: 0; font: 10px/1.3 ui-monospace, monospace; color: #7f7; pointer-events: none; white-space: pre; }
.turnv.rest { opacity: 1; z-index: 0; }
body.in-room.reading .table { animation: none; }
body.reading .table, body.reading .hands { transition: opacity .22s ease-out; }
body.reading.turning .table, body.reading.turning .hands { opacity: 0; transition-duration: .14s; }
body.reading .book { pointer-events: none; transition: none; }
body.reading .hands img { transition: none; }