/* theater.css — the book look, and theater mode: "the book on the wall".

   An open printed book: two pages (one on a tall screen) of warm paper with a
   fine grain, the spine's shadow falling into the gutter, a highlight along
   each outer edge, a stack of page edges on each side that grows on the left
   as the book is read, and a soft shadow under the whole thing. In theater
   mode everything around it is black, because a projector shows black as no
   light at all and the book then floats on the wall.

   The page turn itself is in reader/stage-book.js; this file only draws the
   parts it moves: .bk-turn darkens a leaf as it turns away from the light,
   .bk-cast is the shadow it throws on the page beneath.                     */

.rd .bk {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: var(--status-room, 0px);
}
.rd .bk-book {
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  perspective: var(--persp, 2400px);
  perspective-origin: 50% 40%;
}
.rd .bk[data-mode="single"] .bk-book { width: var(--page-w); }

/* the shadow the book casts on the desk (or the dark room) */
.rd .bk-under {
  position: absolute; inset: 1.5% -0.6% -1.2% -0.6%;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 18px 46px rgba(0, 0, 0, .34), 0 40px 90px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.rd[data-theater="1"] .bk-under { box-shadow: 0 0 60px rgba(0, 0, 0, .6); }

/* ------------------------------------------------------------------ pages */
.rd .bk-page {
  position: absolute; top: 0;
  width: var(--page-w); height: var(--page-h);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 2;
}
.rd .bk-page[data-side="left"], .rd .bk-page[data-side="under-left"] { left: 0; border-radius: 4px 1px 1px 4px; }
.rd .bk-page[data-side="right"], .rd .bk-page[data-side="under-right"], .rd .bk-page[data-side="spare"] { left: var(--page-w); border-radius: 1px 4px 4px 1px; }
.rd .bk[data-mode="single"] .bk-page { left: 0; border-radius: 1px 4px 4px 1px; }
.rd .bk-page[data-side="spare"], .rd .bk-page[data-side="hidden"] { visibility: hidden; z-index: 0; pointer-events: none; }
.rd .bk-page[data-side^="under"] { z-index: 1; }
.rd .bk-page.is-leaf, .rd .bk-page[data-side="over-single"] { z-index: 3; will-change: transform; }
.rd .bk-page foliate-view { position: absolute; inset: 0; display: block; }
.rd .bk-page { isolation: isolate; }
/* Ink on paper: in the light papers the page is multiplied onto the paper,
   so white in an illustration (or a white box a publisher drew) takes the
   paper's colour and grain instead of showing as a white patch. Blending
   cannot reach through an iframe from inside it, so it is done here. */
.rd:not([data-theme="dusk"]):not([data-theme="night"]):not([data-theme="black"]):not([data-theme="t-night"]) .bk-page foliate-view::part(filter),
.rd[data-fixed="0"]:not([data-theme="dusk"]):not([data-theme="night"]):not([data-theme="black"]):not([data-theme="t-night"]) .fl-page foliate-view::part(filter) { mix-blend-mode: multiply; }
.rd .bk-page.is-blank foliate-view { visibility: hidden; }

/* paper: the theme's page colour with a fine grain, lighter toward the middle */
.rd .bk-paper {
  position: absolute; inset: 0;
  background-color: var(--rd-page);
  background-image:
    radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, .05) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .25  0 0 0 0 .16  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.rd[data-theme="t-night"] .bk-paper, .rd[data-theme="night"] .bk-paper, .rd[data-theme="dusk"] .bk-paper, .rd[data-theme="black"] .bk-paper {
  background-image:
    radial-gradient(120% 90% at 50% 45%, rgba(255, 255, 255, .025), rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .12) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .88  0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* the spine: shade into the gutter, light along the outer edge */
.rd .bk-shade { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.rd .bk-page[data-side="left"] .bk-shade, .rd .bk-page[data-side="under-left"] .bk-shade {
  background:
    linear-gradient(to left, rgba(0, 0, 0, .26) 0, rgba(0, 0, 0, .11) 2.2%, rgba(0, 0, 0, .04) 6%, rgba(0, 0, 0, 0) 13%),
    linear-gradient(to right, rgba(0, 0, 0, .1) 0, rgba(255, 255, 255, .1) .6%, rgba(255, 255, 255, 0) 5%),
    linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, .07));
}
.rd .bk-page[data-side="right"] .bk-shade, .rd .bk-page[data-side="under-right"] .bk-shade, .rd .bk-page[data-side="spare"] .bk-shade {
  background:
    linear-gradient(to right, rgba(0, 0, 0, .24) 0, rgba(0, 0, 0, .1) 2.2%, rgba(0, 0, 0, .035) 6%, rgba(0, 0, 0, 0) 13%),
    linear-gradient(to left, rgba(0, 0, 0, .1) 0, rgba(255, 255, 255, .1) .6%, rgba(255, 255, 255, 0) 5%),
    linear-gradient(to bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, .07));
}
.rd .bk[data-mode="single"] .bk-page .bk-shade {
  background:
    linear-gradient(to right, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .06) 1.8%, rgba(0, 0, 0, 0) 7%),
    linear-gradient(to left, rgba(0, 0, 0, .08) 0, rgba(255, 255, 255, .08) .8%, rgba(255, 255, 255, 0) 5%),
    linear-gradient(to bottom, rgba(0, 0, 0, .04), rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0) 97%, rgba(0, 0, 0, .06));
}

/* moving light and shadow for the turn */
.rd .bk-turn, .rd .bk-cast { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; }
.rd .bk-page .bk-turn { background: linear-gradient(90deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .62)); }
.rd .bk-page[data-side="left"] .bk-turn { background: linear-gradient(270deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .62)); }
.rd .bk-page .bk-cast { background: linear-gradient(to right, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .22) 12%, rgba(0, 0, 0, 0) 48%); }
.rd .bk-page[data-side="left"] .bk-cast, .rd .bk-page[data-side="under-left"] .bk-cast { background: linear-gradient(to left, rgba(0, 0, 0, .55) 0, rgba(0, 0, 0, .22) 12%, rgba(0, 0, 0, 0) 48%); }

/* the fold down the middle of the spread */
.rd .bk-spine {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--page-w) - 1px); width: 2px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .28) 6%, rgba(0, 0, 0, .28) 94%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.rd .bk[data-mode="single"] .bk-spine { display: none; }

/* the stacks of page edges outside each cover edge */
.rd .bk-edges {
  position: absolute; top: 0.8%; bottom: 0.8%;
  background: repeating-linear-gradient(to right, var(--rd-page) 0 1.5px, var(--rd-edge-line) 1.5px 2.4px);
  filter: brightness(.92);
  pointer-events: none;
  z-index: 0;
}
.rd .bk-edges-l { right: 100%; width: calc(var(--edge-l, 4) * 1px); border-radius: 4px 0 0 4px; }
.rd .bk-edges-r { left: 100%; width: calc(var(--edge-r, 4) * 1px); border-radius: 0 4px 4px 0; }
.rd .bk[data-mode="single"] .bk-edges-l { display: none; }

/* a ribbon hangs from the top of the page when it is bookmarked */
.rd .bk-ribbon {
  position: absolute; z-index: 6; top: -3px; right: 9%;
  width: max(14px, calc(var(--page-w) * .035)); height: calc(var(--page-h) * .13);
  background: linear-gradient(90deg, #8E2E1F, #B4412C 45%, #9C3524);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  display: none; pointer-events: none;
}
.rd .bk-ribbon.is-on { display: block; }

/* ------------------------------------------------------------------ theater */
.rd[data-theater="1"] { background: #000; --rd-desk: #000; }
.rd[data-theater="1"]:not(.show-cursor) .rd-stage { cursor: none; }
.rd[data-theater="1"] .rd-top, .rd[data-theater="1"] .rd-bottom { display: none; }
.rd[data-theater="1"] foliate-view::part(head), .rd[data-theater="1"] foliate-view::part(foot) { font-size: max(12px, 1.25vh); }

.rd-tstatus {
  position: absolute; z-index: 15; left: 0; right: 0;
  bottom: calc(var(--safe-bottom) + 1.4vh);
  text-align: center;
  font-family: var(--font-ui); font-weight: 700;
  font-size: max(13px, 1.55vh); letter-spacing: .04em;
  color: rgba(234, 222, 200, .26);
  pointer-events: none;
  transition: color 600ms var(--ease), opacity 600ms var(--ease);
  display: none;
  white-space: pre;
}
.rd[data-theater="1"] .rd-tstatus { display: block; }
.rd[data-theater="1"][data-tstatus="off"] .rd-tstatus { opacity: 0; }
.rd-tstatus.is-lit, .rd[data-theater="1"][data-tstatus="off"] .rd-tstatus.is-lit { color: rgba(234, 222, 200, .66); opacity: 1; transition-duration: 160ms; }

.rd-tmenu {
  position: absolute; z-index: 25; left: 50%; translate: -50% 0;
  bottom: calc(6vh + var(--safe-bottom));
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 14px;
  border-radius: 26px;
  background: rgba(16, 15, 13, .9);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.rd-tbtn.btn {
  --btn-bg: transparent; --btn-bd: transparent; --btn-fg: #EDE3D2;
  flex-direction: column; gap: 8px;
  min-width: 104px; min-height: 96px; padding: 10px 12px;
  border-radius: 18px;
  font-size: 1rem; white-space: normal; text-align: center; line-height: 1.15;
}
.rd-tbtn .icon { width: 30px; height: 30px; }
.rd-tbtn:hover, .rd-tbtn:focus-visible { --btn-bg: rgba(255, 255, 255, .1); --btn-bd: var(--sb-sun); outline: none; }
.rd-tbtn:focus-visible { box-shadow: 0 0 0 3px rgba(242, 164, 43, .35); }
@media (max-width: 900px) { .rd-tbtn.btn { min-width: 84px; min-height: 80px; font-size: .9rem; } }

/* While theater mode is on, the page behind the reader stays black too. */
html.rd-theater-on, html.rd-theater-on body { background: #000; }