/*
 * The table of contents, and the 3D book it becomes.
 *
 * Loaded only by the home page. Same structure as the cylinder.css it replaces: the plain list
 * styling ships first because it is what a crawler and a no-JS visitor see, and everything under
 * .book--enhanced is added only once book.js is certain it can drive a WebGL scene -- see book.js's
 * own comment for why the fallback is never a broken half-state.
 */

/* ================================================================
 * 1. The list as it ships (identical contract to the old .toc__list)
 * ================================================================ */

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-inline-size: var(--measure-reading);
  margin-inline: auto;
  border-block-start: 1px solid var(--color-border-subtle);
}

.toc__item { border-block-end: 1px solid var(--color-border-subtle); }

.toc__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: var(--color-text-secondary);
  text-decoration: none;
  line-height: var(--leading-tight);
}

.toc__link:hover { color: var(--color-text); background: var(--color-surface); }

.toc__index {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
}

/* ================================================================
 * 2. The shell
 *
 * The book is the page, not a widget on it -- same opt-in full-bleed layout mode the cylinder used
 * (`shell-home`, applied by book.js only once the scene is actually running).
 * ================================================================ */

.shell-home {
  block-size: 100vh;
  block-size: 100dvh;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shell-home .site-main {
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  padding: 0;
  max-inline-size: none;
  margin-inline: 0;
}

.shell-home .site-footer { display: none; }

.shell-home .book {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
}

/* ================================================================
 * 3. The stage
 * ================================================================ */

.book--enhanced .book__stage {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: hidden;
  touch-action: pinch-zoom;
  background:
    radial-gradient(1100px 620px at 30% -10%, color-mix(in oklab, var(--color-citation) 10%, transparent), transparent 60%),
    radial-gradient(900px 560px at 90% 110%, color-mix(in oklab, var(--color-accent) 14%, transparent), transparent 55%);
}

.book--enhanced .book__stage:focus-visible {
  outline-offset: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset)));
}

.book__canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  touch-action: none;
  cursor: grab;
}

.book--enhanced .book__stage[data-dragging] .book__canvas,
.book__canvas:active { cursor: grabbing; }

/* Shut, the book is a button (book.js's openVideo), so it stops offering to be dragged. Open, the
   only target on it is the pill printed at the foot of each page, and book.js raycasts the pointer
   against the sheet to know when it is over one. */
.book--enhanced .book__stage[data-at-cover] .book__canvas,
.book--enhanced .book__stage[data-on-button] .book__canvas { cursor: pointer; }

/* ---------- the page-turn buttons ---------- */

.book__turn {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: grid;
  place-items: center;
  inline-size: clamp(38px, 5.5vh, 52px);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-surface) 82%, transparent);
  color: var(--color-accent-bright);
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.book__turn svg { inline-size: 52%; block-size: 52%; }

/* Placed by where they go in the book, not by which way they point: the beginning of a Persian book
   is at its right, so `prev` sits at the inline start -- which dir="rtl" resolves to the right of
   the stage -- and `next` at the inline end, on the left. Physical `left`/`right` here would have to
   restate what dir="rtl" already knows. (The rail below goes the other way, deliberately, and says
   why.) */
.book__turn--prev { inset-inline-start: var(--space-4); }
.book__turn--next { inset-inline-end: var(--space-4); }

/* One chevron, drawn pointing toward the inline end. The one that goes back is the mirror of it. */
.book__turn--prev svg { transform: scaleX(-1); }

.book__turn:hover:not(:disabled),
.book__turn:focus-visible {
  transform: translateY(-50%) scale(1.08);
  background: var(--color-surface-raised);
  border-color: var(--color-accent-strong);
}

.book__turn:disabled { opacity: 0.28; cursor: default; }

@media (max-width: 48rem) {
  .book__turn { inline-size: clamp(32px, 5vh, 42px); }
  .book__turn--prev { inset-inline-start: var(--space-2); }
  .book__turn--next { inset-inline-end: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .book__turn:hover:not(:disabled),
  .book__turn:focus-visible { transform: translateY(-50%); }
}

/* ---------- the scrubber ----------
 *
 * A scrollbar, not a slider. What moves is a thumb with a real width sitting in a track, and the
 * filled bar behind it is gone: a fill answers "how far along is this value", which is a question
 * about a setting, when the reader is moving a view. The thumb's own position says the same thing
 * and says it the way every other scrolling surface on the machine does.
 *
 * Its width is fixed rather than proportional to the book, which is the one place this parts
 * company with a real scrollbar: a leaf out of three hundred would be a two-pixel thumb, too small
 * to see and far too small to grab.
 *
 * ---- on the physical `left` throughout ----
 *
 * The rail is read right to left: flip 0 sits at the physical right, against the spine of a Persian
 * book, and the thumb travels left as it opens. That mirroring is done once, in the `1 - f` below,
 * so everything inside the rail is placed with physical `left` and nothing here is logical. Mixing
 * the two is what used to leave the bubble a bubble's width away from the thumb -- under dir="rtl"
 * an inset-inline-start resolves to the right edge, and a physical translate on top of it then
 * pushes the element further from what it was meant to point at, not onto it.
 */

.book__rail {
  /* Written by book.js every frame: 0 shut, 1 at the back board. */
  --book-f: 0;
  /* One thumb width, needed by the thumb and by the bubble that centres on it. In vw rather than a
     percentage so that both calc()s below resolve it against the same thing. */
  --book-thumb: clamp(44px, 7vw, 92px);

  position: absolute;
  inset-inline: var(--space-6);
  inset-block-end: var(--space-4);
  /* Taller than anything it draws: the grab area is the whole band, so the thumb can be slim
     without being fiddly to catch. */
  block-size: 26px;
  display: flex;
  align-items: center;
  touch-action: none;
  user-select: none;
  z-index: 4;
}

/* The whole band, so the cursor does not flick back to `pointer` when a drag crosses the track the
   thumb has just left. */
.book__rail--grabbed,
.book__rail--grabbed * { cursor: grabbing; }

.book__rail-track {
  position: relative;
  inline-size: 100%;
  block-size: 7px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 7%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
  cursor: pointer;
  transition: block-size 0.16s ease, background 0.16s ease;
}

/* Thickens under the pointer, the way an overlay scrollbar does -- quiet while the reader is
   looking at the book, unmistakable the moment they reach for it. */
.book__rail:hover .book__rail-track,
.book__rail--grabbed .book__rail-track {
  block-size: 11px;
  background: rgb(255 255 255 / 12%);
}

.book__rail-thumb {
  position: absolute;
  inset-block: 0;
  left: calc((100% - var(--book-thumb)) * (1 - var(--book-f)));
  inline-size: var(--book-thumb);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--color-accent-bright), var(--color-accent));
  box-shadow:
    0 0 10px color-mix(in oklab, var(--color-accent-bright) 30%, transparent),
    0 1px 3px rgb(0 0 0 / 45%);
  cursor: grab;
  /* No transition on `left`: it is rewritten every animation frame, and easing it would leave the
     thumb trailing the book it is reporting on. */
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.book__rail:hover .book__rail-thumb,
.book__rail--grabbed .book__rail-thumb {
  background: linear-gradient(180deg, #fff, var(--color-accent-bright));
  box-shadow:
    0 0 16px color-mix(in oklab, var(--color-accent-bright) 55%, transparent),
    0 1px 3px rgb(0 0 0 / 45%);
}

/* Centred on the thumb -- the same travel, plus half a thumb, less half of itself. */
.book__rail-bubble {
  position: absolute;
  inset-block-end: calc(100% + 9px);
  left: calc((100% - var(--book-thumb)) * (1 - var(--book-f)) + var(--book-thumb) / 2);
  transform: translateX(-50%) translateY(4px);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.6px;
  color: var(--color-accent-bright);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

/* The tip, so that "this number belongs to that thumb" needs no working out. */
.book__rail-bubble::after {
  content: '';
  position: absolute;
  inset-block-start: 100%;
  left: 50%;
  inline-size: 7px;
  block-size: 7px;
  margin-block-start: -4px;
  margin-left: -4px;
  transform: rotate(45deg);
  background: var(--color-surface-raised);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.book__rail:hover .book__rail-bubble,
.book__rail--grabbed .book__rail-bubble { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 48rem) {
  .book__rail {
    --book-thumb: clamp(40px, 16vw, 72px);
    inset-inline: var(--space-4);
    inset-block-end: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .book__rail-track,
  .book__rail-thumb,
  .book__rail-bubble { transition: none; }
  .book__rail-bubble { transform: translateX(-50%); }
}

/* ================================================================
 * 4. The two openers on the stage
 *
 * There is no visible button on the stage at all. The book itself is the control: pressed anywhere
 * on its closed cover -- and the cover carries a painted «معرفی کتاب» badge saying so -- it opens
 * the introduction film. A floating button beside it was only ever saying twice what one object
 * could say once.
 *
 * Both rules below are scoped to .book--enhanced, which book.js only sets once the canvas is really
 * up. No WebGL, a failed three.js import, or anything thrown in build() leaves the plain contents
 * list standing and both buttons ordinary and visible, which is the whole of the fallback.
 * ================================================================ */

/* The film's opener is hidden the accessible way rather than removed: a tap on a <canvas> is
   reachable by no keyboard and no screen reader, so this stays in the tab order as the labelled way
   into the player -- which is the same player the cover opens. */
.book--enhanced .toc__video[data-video-open] {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

/* The spoken welcome's opener is not hidden but removed, and that is the one real difference between
   them. The cover is a single object and it now opens the film; leaving a second, invisible control
   for a second introduction in the tab order would offer a keyboard reader something the page no
   longer offers anyone else. intro.js and the card it drives are untouched -- they are simply what a
   visitor gets on the paths that never build a book. */
.book--enhanced .toc__cover[data-intro-open] { display: none; }