@import url('./book-opening.css');
/* 概念寓言 · 东方书房。月白天青为纸，松烟为墨，朱砂为印。
   局部正文排版采用赫蹏；章节与边栏节奏参考 Tufte。资源均本地托管。 */
@font-face {
  font-family: "Fable Serif";
  src: url("./fonts/reading-serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f3f3eb;
  --paper-light: #faf9f2;
  --paper-deep: #e9ece1;
  --ink: #283a33;
  --muted: #626c60;
  --line: #d7dbcd;
  --seal: #a6483b;
  --seal-soft: #f1e6db;
  --error: #a03b30;
  --serif-zh: "Fable Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --serif-en: "Fable Serif", Georgia, "Times New Roman", serif;
  --sans: "PingFang SC", "Microsoft YaHei", -apple-system, system-ui, sans-serif;
  --measure: 36rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { position: relative; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.75; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: absolute; inset: 0; border: 9px solid rgba(220,225,211,.42); pointer-events: none; z-index: 5; }
::selection { background: #d9ddcc; color: var(--ink); }
.river-boats { display: block; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.boat-near { transform: translate(800px,810px) scale(.82); opacity: .85; animation: river-near 46s linear -9s infinite; }
.boat-far { transform: translate(983px,778px) scale(.55); opacity: .65; animation: river-far 59s linear -32s infinite; }
.river-skiff { animation: river-rock 6.7s ease-in-out infinite; }
.boat-far .river-skiff { animation-delay: -2.5s; animation-duration: 8.3s; }
@keyframes river-near {
  0% { transform: translate(738px,855px) scale(1); opacity: 0; }
  8% { opacity: .9; }
  25% { transform: translate(785px,818px) scale(.83); }
  50% { transform: translate(820px,785px) scale(.63); opacity: .8; }
  75% { transform: translate(837px,760px) scale(.43); opacity: .55; }
  93% { transform: translate(835px,743px) scale(.27); opacity: 0; }
  100% { transform: translate(835px,741px) scale(.25); opacity: 0; }
}
@keyframes river-far {
  0% { transform: translate(1110px,839px) scale(.88); opacity: 0; }
  8% { opacity: .8; }
  25% { transform: translate(1050px,808px) scale(.72); }
  50% { transform: translate(990px,781px) scale(.55); opacity: .65; }
  75% { transform: translate(938px,761px) scale(.36); opacity: .4; }
  93% { transform: translate(906px,745px) scale(.23); opacity: 0; }
  100% { transform: translate(902px,742px) scale(.21); opacity: 0; }
}
@keyframes river-rock { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(.65px) rotate(.6deg); } }

.book-mist { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.mist-wisp { pointer-events: none; }
.mist-cover-upper { opacity: .5; animation: home-mist-sway 6s ease-in-out -2s infinite alternate; }
.mist-cover-middle { opacity: .58; animation: home-mist-return 7s ease-in-out -2.5s infinite alternate; }
.mist-cover-lower { opacity: .48; animation: home-mist-sway 8s ease-in-out -3s infinite alternate; }
.mist-hill-high { opacity: .45; animation: home-mist-return 7.5s ease-in-out -2.5s infinite alternate; }
.mist-hill-middle { opacity: .55; animation: home-mist-sway 8.5s ease-in-out -3s infinite alternate; }
.mist-hill-low { opacity: .42; animation: home-mist-return 9.5s ease-in-out -3.5s infinite alternate; }
.mist-hill-left { opacity: .46; animation: home-mist-return 7s ease-in-out -2.5s infinite alternate; }
@keyframes home-mist-sway { from { transform: translate(-24px, 0); } to { transform: translate(24px, -2px); } }
@keyframes home-mist-return { from { transform: translate(20px, 0); } to { transform: translate(-20px, 2px); } }
.book-opening-active .book-mist { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .book-mist { display: none; } }