/* The story reader: a book whose leaves turn (book.js + StPageFlip) and a paper scroll. */

.bk {
  --paper: #f6eedc;
  --paper-ink: #2c1d12;
  --grain: 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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: relative;
  margin: 0.6rem auto 3rem;
  /* A leaf mid-curl reaches past the screen; unclipped, a phone zooms out and the page jumps. */
  overflow-x: clip;
}
.bk[hidden] { display: none; }

.bk-desk {
  display: flex;
  justify-content: center;
  padding: 1.4rem 0 3rem;
}
.bk-stage { position: relative; }

.bk-host {
  position: relative;
  transition: transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1);
  --stack-l: 0;
  --stack-r: 0;
}
/* On a phone book.js reads the taps and sideways swipes; the page still scrolls up and down. */
.bk-host.is-portrait { touch-action: pan-y; cursor: pointer; }

/* The block of leaves seen from the side: thicker on the side holding more of the book. */
.bk-host::before,
.bk-host::after {
  content: "";
  position: absolute;
  top: 0.9%;
  bottom: 0.9%;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, #f4ead4 0 1px, #cfc09e 1px 2px);
  box-shadow: 0 6px 12px rgba(30, 18, 8, 0.25);
  pointer-events: none;
  transition: width 0.6s ease;
}
.bk-host::before {
  right: 100%;
  width: calc(3px + var(--stack-l) * 16px);
  border-radius: 4px 0 0 4px;
}
.bk-host::after {
  left: 100%;
  width: calc(3px + var(--stack-r) * 16px);
  border-radius: 0 4px 4px 0;
}
.bk.closed-r .bk-host::before,
.bk.closed-l .bk-host::after { opacity: 0; }
.bk.closed-r .bk-host::after { width: 14px; }
.bk.closed-l .bk-host::before { width: 14px; }

.bk-cast {
  position: absolute;
  left: 1%;
  right: 1%;
  bottom: -22px;
  height: 40px;
  z-index: -2;
  border-radius: 50%;
  background: rgba(14, 10, 6, 0.55);
  filter: blur(16px);
  pointer-events: none;
  transition: left 0.6s ease, right 0.6s ease;
}
.bk.closed-r .bk-cast { left: 51%; }
.bk.closed-l .bk-cast { right: 51%; }

/* A silk ribbon tucked into the book, its tail hanging below the leaves. */
.bk-ribbon {
  position: absolute;
  top: 55%;
  left: calc(50% + 28px);
  width: 13px;
  height: calc(45% + 44px);
  z-index: -1;
  background: linear-gradient(90deg, #7d6210, #c9a227 40%, #e8cc6a 55%, #9b7a16);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.bk.is-closed .bk-ribbon { opacity: 0; }

/* ---- Leaves ---- */
.bk-page {
  container-type: size;
  background-color: var(--paper);
  background-image: var(--grain), linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0) 40%);
  color: var(--paper-ink);
  overflow: hidden;
}
/* The gutter darkens where the leaf bends into the binding; the fore-edge fades a touch. */
.bk-page.--left {
  background-image:
    linear-gradient(to left, rgba(70, 45, 20, 0.28), rgba(70, 45, 20, 0.08) 5%, rgba(70, 45, 20, 0) 12%),
    linear-gradient(to right, rgba(70, 45, 20, 0.1), rgba(70, 45, 20, 0) 4%),
    var(--grain);
}
.bk-page.--right {
  background-image:
    linear-gradient(to right, rgba(70, 45, 20, 0.28), rgba(70, 45, 20, 0.08) 5%, rgba(70, 45, 20, 0) 12%),
    linear-gradient(to left, rgba(70, 45, 20, 0.1), rgba(70, 45, 20, 0) 4%),
    var(--grain);
}
.bk-page.--portrait.--right,
.bk-page.--portrait.--left {
  background-image:
    linear-gradient(to right, rgba(70, 45, 20, 0.2), rgba(70, 45, 20, 0) 7%),
    var(--grain);
}
html[dir="rtl"] .bk-page.--portrait {
  background-image:
    linear-gradient(to left, rgba(70, 45, 20, 0.2), rgba(70, 45, 20, 0) 7%),
    var(--grain);
}

.bk-sheet {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8% 10% 5.5%;
}
.bk-head {
  flex: none;
  text-align: center;
  font-size: clamp(10px, 2.6cqw, 13px);
  color: var(--gold-ink);
  letter-spacing: 0.02em;
  padding-bottom: 0.45em;
  margin-bottom: 0.9em;
  border-bottom: 1px solid rgba(138, 109, 18, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-text {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font-family: "Vazirmatn", serif;
  font-size: clamp(14.5px, 3.75cqw, 18.5px);
  line-height: 2.05;
}
html[dir="ltr"] .bk-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(16px, 4.1cqw, 20px);
  line-height: 1.7;
}
.bk-text p {
  margin: 0;
  text-align: justify;
  text-indent: 1.1em;
  overflow-wrap: anywhere;
}
.bk-text p.cont { text-indent: 0; }
.bk-text p.brk { text-align-last: justify; }
.bk-folio {
  flex: none;
  text-align: center;
  padding-top: 0.6em;
  font-size: clamp(11px, 2.8cqw, 14px);
  color: var(--gold-ink);
}
.bk-folio:not(:empty)::before,
.bk-folio:not(:empty)::after {
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1px;
  margin: 0 0.6em;
  vertical-align: middle;
  background: rgba(138, 109, 18, 0.45);
}

/* ---- Covers and endpapers ---- */
.bk-cover {
  background-color: var(--navy);
  background-image:
    var(--grain),
    radial-gradient(120% 90% at 30% 15%, #2c4370 0%, #182a48 45%, #0d1626 100%);
  color: var(--gold);
}
.bk-cover.--right { box-shadow: inset 16px 0 20px -12px rgba(0, 0, 0, 0.7); }
.bk-cover.--left { box-shadow: inset -16px 0 20px -12px rgba(0, 0, 0, 0.7); }
.bk-cover-frame {
  position: absolute;
  inset: 6%;
  border: 2px solid rgba(201, 162, 39, 0.85);
  outline: 1px solid rgba(201, 162, 39, 0.45);
  outline-offset: -9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 10% 9%;
  text-align: center;
}
.bk-cover-frame::before,
.bk-cover-frame::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 6px;
  background: var(--pearls) center / 12px 6px repeat-x;
  opacity: 0.9;
}
.bk-cover-frame::before { top: 5%; }
.bk-cover-frame::after { bottom: 5%; }
.bk-cover-series {
  margin: 0;
  font-size: clamp(11px, 3.3cqw, 15px);
  color: rgba(232, 204, 106, 0.85);
}
.bk-cover-art {
  width: 56%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(13, 22, 38, 0.6), 0 0 0 6px rgba(201, 162, 39, 0.5);
}
.bk-cover-boteh {
  display: block;
  width: 30%;
  aspect-ratio: 77 / 96;
  background: linear-gradient(160deg, #f0d77e, #c9a227 45%, #8a6d12);
  -webkit-mask: var(--boteh) center / contain no-repeat;
  mask: var(--boteh) center / contain no-repeat;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}
.bk-cover--back { display: grid; place-items: center; }
.bk-cover--back .bk-cover-boteh { width: 18%; opacity: 0.7; }
.bk-cover-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 9cqw, 44px);
  line-height: 1.25;
  background: linear-gradient(180deg, #f6e08e, #c9a227 55%, #9b7a16);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.45));
}
.bk-cover-ep {
  margin: 0;
  font-size: clamp(12px, 3.6cqw, 16px);
  color: #e8cc6a;
}
.bk-cover-tap {
  position: absolute;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.45em 1.1em;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.92);
  color: var(--navy);
  font-size: clamp(11px, 3.2cqw, 14px);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  animation: bk-tap 2.2s ease-in-out infinite;
  pointer-events: none;
}
.bk:not(.is-opened) .bk-cover-tap { display: inline-flex; }
.bk.is-opened .bk-cover-tap { display: none; }
@keyframes bk-tap {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(201, 162, 39, 0.55); }
  50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(201, 162, 39, 0); }
}
.bk-cover-author {
  margin: 0;
  font-family: var(--nastaliq);
  font-size: clamp(18px, 6cqw, 28px);
  color: rgba(232, 204, 106, 0.9);
}

.bk-endpaper {
  background-color: var(--lapis);
  background-image: var(--grain);
}
.bk-endpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #d9b84a;
  opacity: 0.15;
  -webkit-mask: var(--boteh) 0 0 / 26px 32px space;
  mask: var(--boteh) 0 0 / 26px 32px space;
}
.bk-endpaper.--right { box-shadow: inset 16px 0 20px -12px rgba(0, 0, 0, 0.6); }
.bk-endpaper.--left { box-shadow: inset -16px 0 20px -12px rgba(0, 0, 0, 0.6); }

/* ---- Title page and last page ---- */
.bk-titlepage {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6em;
}
.bk-titlepage h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 8cqw, 40px);
  color: var(--navy);
}
.bk-tp-series,
.bk-tp-ep {
  margin: 0;
  color: var(--gold-ink);
  font-size: clamp(12px, 3.4cqw, 16px);
}
.bk-tp-mark,
.bk-end-mark {
  display: block;
  width: 2.2em;
  aspect-ratio: 77 / 96;
  margin: 0.8em auto;
  background: var(--gold);
  -webkit-mask: var(--boteh) center / contain no-repeat;
  mask: var(--boteh) center / contain no-repeat;
}
.bk-tp-author {
  margin: 0;
  font-family: var(--nastaliq);
  font-size: clamp(18px, 6cqw, 28px);
  color: var(--navy);
}
.bk-page--end .bk-text { display: flex; align-items: center; justify-content: center; }
.bk-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7em;
  text-align: center;
}
.bk-end p { margin: 0; color: var(--gold-ink); font-size: 0.85em; text-indent: 0; }
.bk-end-link {
  display: inline-block;
  padding: 0.5em 1.3em;
  border-radius: 999px;
  background: var(--navy);
  color: #f3e6c8;
  border: 1px solid var(--gold);
  font-weight: 800;
  text-decoration: none;
  line-height: 1.6;
}
.bk-end-link:hover { background: var(--lapis); color: #fff; }
.bk-end-all { color: var(--navy); font-size: 0.85em; }

/* ---- Controls ---- */
.bk-hint {
  margin: 0.8rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.bk-hint[hidden] { display: none; }
.bk-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 34rem;
  margin: 0 auto;
}
.bk-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--navy);
  color: #f3e6c8;
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(14, 22, 38, 0.12);
}
.bk-btn:hover:not(:disabled) { background: var(--lapis); color: #fff; }
.bk-btn:disabled { opacity: 0.3; cursor: default; }
html[dir="ltr"] .bk-btn .bi { display: inline-block; transform: scaleX(-1); }
.bk-pager {
  flex: 1;
  margin: 0;
  text-align: center;
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---- The paper scroll ---- */
.scroll-reader {
  position: relative;
  max-width: 42rem;
  margin: 0.8rem auto 2.6rem;
  padding: 0 14px;
}
.scroll-reader[hidden] { display: none; }
.scroll-rod {
  position: relative;
  z-index: 2;
  display: block;
  height: 24px;
  margin: 0 -14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #b07c4d 0%, #7a4a2c 40%, #4a2b18 75%, #6e4426 100%);
  box-shadow: 0 6px 12px rgba(30, 18, 8, 0.35);
}
.scroll-rod::before,
.scroll-rod::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f3dc8a, #c9a227 45%, #7d6210 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}
.scroll-rod::before { left: -14px; }
.scroll-rod::after { right: -14px; }
.scroll-paper {
  position: relative;
  height: min(72vh, 760px);
  margin: -8px 0;
  padding: 2.2rem 2.4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: #f6eedc;
  background-image: var(--grain, none);
  box-shadow:
    inset 0 18px 18px -14px rgba(60, 38, 16, 0.5),
    inset 0 -18px 18px -14px rgba(60, 38, 16, 0.5),
    inset 10px 0 14px -12px rgba(60, 38, 16, 0.25),
    inset -10px 0 14px -12px rgba(60, 38, 16, 0.25);
  color: #2c1d12;
  font-family: "Vazirmatn", serif;
  font-size: 1.14rem;
  line-height: 2.15;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.scroll-paper:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.scroll-paper::-webkit-scrollbar { width: 8px; }
.scroll-paper::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
html[dir="ltr"] .scroll-paper {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.2rem;
  line-height: 1.85;
}
.scroll-paper p { margin: 0 0 1.1rem; }
.scroll-paper img,
.scroll-paper video,
.scroll-paper iframe { max-width: 100%; height: auto; }
.scroll-reader { --grain: 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='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.25 0 0 0 0 0.12 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (max-width: 760px) {
  .bk-desk { padding: 0.8rem 0 2.4rem; }
  .bk-host::before,
  .bk-host::after { display: none; }
  .bk-ribbon { left: auto; right: 14%; }
  html[dir="rtl"] .bk-ribbon { right: auto; left: 14%; }
  .bk-bar { gap: 0.5rem; }
  .bk-btn { padding: 0.65rem 0.9rem; }
  .bk-btn span { display: none; }
  .scroll-reader { padding: 0 8px; }
  .scroll-rod { margin: 0 -8px; height: 20px; }
  .scroll-rod::before,
  .scroll-rod::after { width: 28px; height: 28px; top: -4px; }
  .scroll-rod::before { left: -10px; }
  .scroll-rod::after { right: -10px; }
  .scroll-paper { height: 70vh; padding: 1.4rem 1.2rem; font-size: 1.06rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-host,
  .bk-host::before,
  .bk-host::after,
  .bk-cast { transition: none; }
  .bk-cover-tap { animation: none; }
}