/* ============================================================
   TEARS ON FIRE — Magazine Reader
   Minimal chrome: the magazine is the only visual object,
   plus a discreet fading page counter beneath it.
   Sits on the site's film-stock background — no panels, no UI.
   ============================================================ */

.tof-reader {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Horizontal padding is the drag gutter — keeps the book's
     interactive edge off the physical screen edge so a page-turn
     drag can't be caught by the browser's edge-swipe gesture. */
  padding: calc(var(--nav-h, 60px) + 1.5rem) 1.25rem 1.5rem;
  /* The solo cover and back cover are centred by translating the
     spread a quarter-width sideways (see below). The back cover's
     +25% pushes the spread's empty right half past the viewport,
     which grew the document and let the whole page scroll ~68px
     sideways on a phone — body{overflow-x:hidden} does not contain
     it, because <html> is the scroll container. `clip` contains it
     here without creating a scroll container of its own, and unlike
     `hidden` it leaves the vertical axis genuinely visible so the
     book's fold shadows still spill out during a turn. */
  overflow-x: clip;
  overflow-y: visible;
}

@media (min-width: 900px) {
  .tof-reader { padding-left: 3rem; padding-right: 3rem; }
}

/* Sized by JS to fit viewport while preserving page aspect */
.tof-reader__book {
  position: relative;
  width: 100%;
  max-width: 100%;
  transition: transform 0.8s var(--ease, ease);
  /* Own the horizontal drag gesture outright — the browser must not
     treat a page-turn drag as scroll or an edge-swipe navigation. */
  touch-action: none;
}

/* Closed book in landscape: the cover occupies the right half of
   the spread area — shift left so it reads as centred, standalone */
.tof-reader__book--cover.tof-reader__book--landscape {
  transform: translateX(-25%);
}

/* Closed on the back cover: StPageFlip renders the trailing solo
   page on the LEFT half instead (mirror of the front cover), so the
   centring shift goes the opposite way. */
.tof-reader__book--back-cover.tof-reader__book--landscape {
  transform: translateX(25%);
}

/* ── Page-stack edges — bound-object thickness ──────────
   Thin stacked-sheet strips just outside the block's left and
   right edges. --stack-progress (0 at the cover → 1 on the last
   page, set by JS) redistributes the apparent thickness from the
   right edge (unread) to the left edge (read) as pages turn.
   Deliberately subtle: a few px, faint cream tonal steps, no 3D. */
.tof-reader__book {
  --stack-progress: 0;
  --stack-max: 7px;
}

.tof-reader__book .stf__block::before {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 100%;
  width: calc(var(--stack-max) * (1 - var(--stack-progress)));
  background: repeating-linear-gradient(
    to right,
    #efece7 0px, #efece7 1px,
    #dcd7d0 1px, #dcd7d0 2px
  );
  box-shadow: 1px 2px 6px rgba(20, 20, 20, 0.12);
  transition: width 0.8s var(--ease, ease);
  pointer-events: none;
}

/* Left edge: pages already read. Hidden entirely while the cover
   is closed (no book body on the left yet). */
.tof-reader__book .stf__block .tof-reader__stack-left {
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: 100%;
  width: calc(var(--stack-max) * var(--stack-progress));
  background: repeating-linear-gradient(
    to left,
    #efece7 0px, #efece7 1px,
    #dcd7d0 1px, #dcd7d0 2px
  );
  box-shadow: -1px 2px 6px rgba(20, 20, 20, 0.12);
  transition: width 0.8s var(--ease, ease);
  pointer-events: none;
}

.tof-reader__book--cover .stf__block .tof-reader__stack-left { width: 0; }

/* Portrait (mobile single page): only the unread edge on the right */
.tof-reader__book:not(.tof-reader__book--landscape) .stf__block .tof-reader__stack-left { width: 0; }

@media (prefers-reduced-motion: reduce) {
  .tof-reader__book .stf__block::before,
  .tof-reader__book .stf__block .tof-reader__stack-left { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tof-reader__book { transition: none; }
}

/* StPageFlip renders pages as blocks — keep imagery clean and
   photographic: no borders, no rounded corners, soft lift only */
.tof-reader__page {
  background-color: #f4f2ef;
  box-shadow: 0 6px 30px rgba(20, 20, 20, 0.18);
  /* Pre-promote to its own GPU layer. Without this, the browser only
     discovers it needs one on the animation's first transform frame —
     that late promotion (plus re-rasterising the blurred box-shadow on
     every rotateY step instead of just re-compositing) is what shows up
     as a dropped-frame "shake" during the turn. */
  will-change: transform;
}

/* The library's own fold-shadow overlays animate transform/opacity every
   frame too — same layer-promotion reasoning applies to them. */
.tof-reader__book .stf__outerShadow,
.tof-reader__book .stf__innerShadow,
.tof-reader__book .stf__hardShadow {
  will-change: transform;
}

/* Inner image layer — StPageFlip owns the outer element's style
   attribute, so imagery lives here */
.tof-reader__page-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Subtle centre-gutter shadow across an open spread (landscape only).
   Complements StPageFlip's dynamic fold shadows. */
.tof-reader__book--landscape .stf__block::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: linear-gradient(
    to right,
    transparent 42%,
    rgba(20, 20, 20, 0.09) 47%,
    rgba(20, 20, 20, 0.26) 50%,
    rgba(20, 20, 20, 0.09) 53%,
    transparent 58%
  );
}

/* Closed book (front or back cover showing solo): no gutter */
.tof-reader__book--cover .stf__block::after,
.tof-reader__book--back-cover .stf__block::after {
  display: none;
}

/* ── Page counter — discreet, fades when idle ─────────── */
.tof-reader__counter {
  margin-top: 1.4rem;
  font-family: var(--font, 'Helvetica Neue', Helvetica, Arial, sans-serif);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--text-muted, #888888);
  text-align: center;
  user-select: none;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.tof-reader__counter--idle { opacity: 0.15; }

@media (prefers-reduced-motion: reduce) {
  .tof-reader__counter { transition: none; }
  .tof-reader__counter--idle { opacity: 1; }
}

/* ── Mobile progress scrubber — hidden on desktop ───────
   Drag the logo along the track to jump anywhere in the issue;
   it also tracks normal page turns automatically (see JS). */
.tof-reader__scrub {
  display: none;
  position: relative;
  height: 24px;
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .tof-reader__scrub { display: block; }
}

.tof-reader__scrub-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: var(--text-muted, #888888);
  opacity: 0.25;
}

.tof-reader__scrub-handle {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  padding: 0;
  border: none;
  background: none;
  transform: translateY(-50%);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}

.tof-reader__scrub-handle:active { cursor: grabbing; }

.tof-reader__scrub-handle img,
.tof-reader__scrub-handle svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.8;
  pointer-events: none;
  fill: currentColor;
}

/* ── Not-found message ────────────────────────────────── */
.tof-reader__missing {
  text-align: center;
  color: var(--text-dim, #555555);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

.tof-reader__missing a {
  text-decoration: underline;
  text-underline-offset: 3px;
}