/* The book viewer — a newspaper held open at two pages, turned by hand.
 *
 * Nothing here draws a page. The sheets are the same A4 renders the PDF is
 * made from; book_controller lifts them out of the stack they arrive in and
 * deals them into the two leaves below. All this does is put a spine between
 * them, throw a shadow into the fold, and swing a page over when one is
 * turned.
 *
 * Sizing: a sheet is a fixed 210mm however wide the screen is, so the whole
 * spread is scaled down to the room available. --bk-scale is set by the
 * controller; the leaves keep their real size and the transform does the rest.
 */

.bk {
  --bk-leaf-w: 210mm;
  --bk-leaf-h: 297mm;
  --bk-turn: 260ms;
  position: relative;
  width: 100%;
}

.bk[hidden] { display: none; }

/* Where the sheets arrive, and where the ones that aren't on the open spread
   wait. Hidden but still laid out — display:none would make every waiting page
   measure zero, and the overflow check reads those measurements to warn about
   a section holding more than fits. */
.bk-source {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.bk-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  perspective: 2400px;
  /* Height is the scaled height of a page — set by the controller, because it
     depends on the scale it just worked out. */
}

.bk-spread {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: flex-start;
  transform: translateX(-50%) scale(var(--bk-scale, 1));
  transform-origin: top center;
  transform-style: preserve-3d;
}

.bk-leaf {
  position: relative;
  flex: 0 0 auto;
  width: var(--bk-leaf-w);
  height: var(--bk-leaf-h);
  background: #fff;
  box-shadow: 0 18px 45px -20px rgba(33, 29, 24, 0.55);
  transform-style: preserve-3d;
}

/* A sheet arrives with the margin it had in the stack; in a book it fills the
   leaf exactly. */
.bk-leaf > * { margin: 0 !important; }

/* The blank left of the front page and the blank right of the back one. The
   spread stays two pages wide either way, so the paper doesn't change size
   as it's read — the cover simply sits on the right, as a closed paper does. */
.bk-leaf.bk-empty {
  background: none;
  box-shadow: none;
}

/* ── The fold ──────────────────────────────────────────────────────────────
   Two facing pages of one folded sheet: the paper curves away into the spine,
   so both inside edges darken. Drawn over the pages, never over the gutter of
   a cover spread where there's only one page. */
.bk-leaf::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7%;
  pointer-events: none;
  opacity: 0.55;
}
.bk-leaf.bk-empty::before { display: none; }

.bk-leaf-l::before {
  right: 0;
  background: linear-gradient(to right, rgba(33, 29, 24, 0) 0%, rgba(33, 29, 24, 0.13) 100%);
}
.bk-leaf-r::before {
  left: 0;
  background: linear-gradient(to left, rgba(33, 29, 24, 0) 0%, rgba(33, 29, 24, 0.13) 100%);
}

/* The crease itself. */
.bk:not(.bk-cover):not(.bk-back):not(.bk-solo) .bk-spread::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: rgba(33, 29, 24, 0.22);
  pointer-events: none;
}

/* ── Turning ───────────────────────────────────────────────────────────────
   A turn is two halves. The page that's leaving swings up to edge-on, where
   it can't be seen; the spread is swapped underneath; then the same sheet
   comes down on the other side of the spine. Hinged on the spine both times,
   which is what makes it read as one page moving rather than two. */
.bk-turn-away-fwd {
  transform-origin: left center;
  animation: bk-away-fwd var(--bk-turn) ease-in forwards;
  z-index: 3;
}
.bk-turn-in-fwd {
  transform-origin: right center;
  animation: bk-in-fwd var(--bk-turn) ease-out;
  z-index: 3;
}
.bk-turn-away-back {
  transform-origin: right center;
  animation: bk-away-back var(--bk-turn) ease-in forwards;
  z-index: 3;
}
.bk-turn-in-back {
  transform-origin: left center;
  animation: bk-in-back var(--bk-turn) ease-out;
  z-index: 3;
}

@keyframes bk-away-fwd { from { transform: rotateY(0deg); } to { transform: rotateY(-92deg); } }
@keyframes bk-in-fwd   { from { transform: rotateY(92deg); } to { transform: rotateY(0deg); } }
@keyframes bk-away-back { from { transform: rotateY(0deg); } to { transform: rotateY(92deg); } }
@keyframes bk-in-back   { from { transform: rotateY(-92deg); } to { transform: rotateY(0deg); } }

/* A page catches the light as it lifts and loses it as it lands. The shade is
   a pseudo-element so it survives the sheet being swapped in and out. */
.bk-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to left, rgba(33, 29, 24, 0.3), rgba(33, 29, 24, 0));
}
.bk-turn-away-fwd::after,
.bk-turn-in-back::after { animation: bk-shade-on var(--bk-turn) ease-in; }
.bk-turn-in-fwd::after,
.bk-turn-away-back::after { animation: bk-shade-off var(--bk-turn) ease-out; }

@keyframes bk-shade-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-shade-off { from { opacity: 1; } to { opacity: 0; } }

/* ── Navigation ────────────────────────────────────────────────────────── */
.bk-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid rgba(33, 29, 24, 0.15);
  background: rgba(255, 255, 255, 0.92);
  color: #4a4239;
  box-shadow: 0 4px 14px -6px rgba(33, 29, 24, 0.45);
  cursor: pointer;
  transition: color 150ms, border-color 150ms, opacity 150ms;
}
.bk-arrow:hover:not(:disabled) { border-color: #a4644f; color: #a4644f; }
.bk-arrow:disabled { opacity: 0; pointer-events: none; }
.bk-arrow-prev { left: 0.5rem; }
.bk-arrow-next { right: 0.5rem; }

.bk-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding-top: 1.25rem;
}

.bk-label {
  font-family: var(--font-ui, ui-sans-serif, system-ui, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #7a6f61;
  white-space: nowrap;
}

.bk-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.bk-dot {
  height: 0.45rem;
  width: 0.45rem;
  border-radius: 9999px;
  border: 0;
  padding: 0;
  background: rgba(33, 29, 24, 0.2);
  cursor: pointer;
  transition: background 150ms, width 150ms;
}
.bk-dot:hover { background: rgba(33, 29, 24, 0.4); }
.bk-dot.is-on { width: 1.15rem; background: #a4644f; }

/* One page to a spread: a phone hasn't the width for two, and a paper of one
   page never had a facing page to begin with. The blank half goes rather than
   pushing the page off to one side. */
.bk-solo .bk-leaf.bk-empty { display: none; }

/* A paper of one page isn't a book — it's just the page. */
.bk-single .bk-bar,
.bk-single .bk-arrow { display: none; }

/* ── As a lightbox ─────────────────────────────────────────────────────────
   The template page and the builders both hand over most of the screen to
   read the paper, rather than trying to fit a spread in a column. */
.bk-box {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  background: rgba(27, 23, 18, 0.88);
  padding: 1.25rem 1rem 1.5rem;
  backdrop-filter: blur(3px);
}
.bk-box[hidden] { display: none; }
.bk-box .bk { margin: auto; max-width: 100%; }
.bk-box .bk-label { color: #e0d2b8; }
.bk-box .bk-dot { background: rgba(251, 249, 244, 0.3); }
.bk-box .bk-dot.is-on { background: #e5bfb1; }

.bk-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 5;
  border-radius: 9999px;
  border: 1px solid rgba(251, 249, 244, 0.25);
  background: none;
  padding: 0.4rem 1.1rem;
  font-family: var(--font-ui, ui-sans-serif, system-ui, sans-serif);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f6f1e7;
  cursor: pointer;
}
.bk-close:hover { border-color: #e5bfb1; color: #e5bfb1; }

.bk-loading {
  font-family: var(--font-ui, ui-sans-serif, system-ui, sans-serif);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e0d2b8;
  text-align: center;
  margin: auto;
}

/* Someone who's asked for less movement gets the page swapped, not swung. */
@media (prefers-reduced-motion: reduce) {
  .bk { --bk-turn: 1ms; }
  .bk-leaf::after { display: none; }
}

/* Printing the page it sits on should give the whole paper, not the spread
   that happens to be open. */
@media print {
  .bk-source {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
  }
  .bk-stage, .bk-bar, .bk-arrow, .bk-close { display: none !important; }
}