/* A story section is a leaf of the book. Choices turn to other leaves. */
body[data-page="reader"][data-page="reader"] main.reading {
  max-width:1120px;
  perspective:1400px;
}
body[data-page="reader"][data-page="reader"] .moment-card {
  position:relative;
  min-height:620px;
  overflow:visible;
  border-radius:4px 14px 14px 4px;
  box-shadow:0 2px 0 color-mix(in srgb,var(--line) 80%,transparent),
    0 5px 0 color-mix(in srgb,var(--cover-bg) 85%,var(--line)),
    0 8px 0 color-mix(in srgb,var(--line) 65%,transparent),
    0 30px 60px rgba(20,35,28,.16);
  transform-style:preserve-3d;
}
body[data-page="reader"][data-page="reader"] .moment-card::after {
  content:"";
  position:absolute;
  top:12px; bottom:12px; right:-7px; width:7px;
  background:repeating-linear-gradient(180deg,var(--cover-bg) 0 2px,var(--line) 2px 3px);
  border-radius:0 3px 3px 0;
  box-shadow:3px 5px 10px rgba(0,0,0,.12);
  pointer-events:none;
}
body[data-page="reader"][data-page="reader"] .moment-visual {
  overflow:hidden;
  border-radius:3px 0 0 3px;
  box-shadow:inset -8px 0 16px rgba(0,0,0,.16);
}
body[data-page="reader"][data-page="reader"] .moment-visual .art {min-height:620px;}
body[data-page="reader"][data-page="reader"] .reading-page,
body[data-page="reader"][data-page="reader"] .reading-page.end {
  min-width:0;
  min-height:620px;
  display:flex;
  flex-direction:column;
  padding:44px 44px 24px;
  background-image:linear-gradient(90deg,rgba(0,0,0,.06),transparent 18px),
    radial-gradient(circle at 92% 2%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 45%);
}
body[data-page="reader"][data-page="reader"] .reading-page .para {
  font-size:calc(20px * var(--reading-scale,1));
  line-height:1.75;
  overflow-wrap:break-word;
}
body[data-page="reader"][data-page="reader"] .reading-page.end .para {
  font-size:calc(20px * var(--reading-scale,1)) !important;
}
body[data-page="reader"][data-page="reader"] .decision {margin-top:30px;}
body[data-page="reader"][data-page="reader"] .choices button {gap:12px;}
body[data-page="reader"][data-page="reader"] .choice-destination {
  flex:none;
  color:var(--warm-ink);
  font:600 12px/1.2 var(--grot);
  white-space:nowrap;
}
body[data-page="reader"][data-page="reader"] .page-folio {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:32px;
  color:var(--muted);
  font:12px/1.5 var(--grot);
  border-top:1px solid var(--line);
}
body[data-page="reader"][data-page="reader"] .page-folio b {font-weight:400;margin:0 5px;}
body[data-page="reader"][data-page="reader"] .page-back {
  min-height:44px;
  padding:8px 2px;
  border:0;
  background:transparent;
  color:var(--accent);
  font:600 12px/1.4 var(--grot);
  cursor:pointer;
}
body[data-page="reader"][data-page="reader"] .page-back:disabled {visibility:hidden;}
body[data-page="reader"][data-page="reader"] .text-size-control {display:flex;align-items:center;gap:10px;}
body[data-page="reader"][data-page="reader"] .text-size-control button {min-width:44px;min-height:44px;}
body[data-page="reader"][data-page="reader"] .text-size-control button:disabled {opacity:.4;cursor:default;}
body[data-page="reader"][data-page="reader"] .text-size-control output {min-width:4ch;text-align:center;font:500 13px/1 var(--grot);}

@keyframes adventure-page-out {
  0% {transform:rotateY(0) translateX(0);opacity:1;filter:brightness(1);}
  70% {opacity:.8;}
  100% {transform:rotateY(-22deg) translateX(-18px);opacity:0;filter:brightness(.8);}
}
@keyframes adventure-page-in {
  from {transform:rotateY(12deg) translateX(12px);opacity:.4;filter:brightness(.9);}
  to {transform:rotateY(0) translateX(0);opacity:1;filter:brightness(1);}
}
body[data-page="reader"][data-page="reader"] .moment-card.page-turning {
  transform-origin:14% 50%;
  animation:adventure-page-out .34s ease-in forwards;
  pointer-events:none;
}
body[data-page="reader"][data-page="reader"] .moment-card.page-arriving {
  transform-origin:14% 50%;
  animation:adventure-page-in .32s ease-out both;
}

@media(max-width:640px) {
  body[data-page="reader"][data-page="reader"] .moment-card {min-height:0;border-radius:5px 10px 10px 5px;}
  body[data-page="reader"][data-page="reader"] .moment-visual {border-radius:4px 4px 0 0;}
  body[data-page="reader"][data-page="reader"] .moment-visual .art {height:170px;min-height:0;}
  body[data-page="reader"][data-page="reader"] .reading-page,
  body[data-page="reader"][data-page="reader"] .reading-page.end {min-height:410px;padding:24px 22px 16px;}
  body[data-page="reader"][data-page="reader"] .reading-page .para,
  body[data-page="reader"][data-page="reader"] .reading-page.end .para {font-size:calc(18px * var(--reading-scale,1)) !important;}
  body[data-page="reader"][data-page="reader"] .page-folio {padding-top:20px;}
  body[data-page="reader"][data-page="reader"] .page-folio span {max-width:50%;text-align:right;}
  body[data-page="reader"][data-page="reader"] .choices button {gap:8px;}
  body[data-page="reader"][data-page="reader"] .choices button svg {display:none;}
}
@media(prefers-reduced-motion:reduce) {
  body[data-page="reader"][data-page="reader"] .moment-card.page-turning,
  body[data-page="reader"][data-page="reader"] .moment-card.page-arriving {animation:none;}
}