@charset "UTF-8";

:root{
  /* 两张参考图都是 941 × 1672 */
  --frame-w:min(100vw, calc(100dvh * 0.5628));
  --frame-h:min(100dvh, calc(100vw / 0.5628));
  --lh:clamp(27px, calc(var(--frame-h) * 0.0404), 38px);
  --ink:#453a2a;
  --ink-soft:#6a5c46;
  --ink-cold:#6b6458;
  --ease:cubic-bezier(.22,.61,.36,1);
  --hand:"LXGW WenKai","霞鹜文楷","Kaiti SC","STKaiti","KaiTi","楷体",serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
html{-webkit-text-size-adjust:100%}
body{
  overflow:hidden;background:#191208;color:var(--ink);
  font-family:var(--hand);
  -webkit-tap-highlight-color:transparent;
}
button{font-family:inherit;color:inherit;cursor:pointer}

/* ── 舞台 ─────────────────────────────────────────── */
.book{position:fixed;inset:0;overflow:hidden;touch-action:pan-y}
/* 各层都声明 pan-y：竖向留给信纸滚动，横向手势一律交给翻页 */
.leaf,.frame,.blur,.sheet-scroll{touch-action:pan-y}
.leaf{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;transform:translateX(0);
  transition:transform .62s var(--ease),opacity .45s ease,visibility 0s .62s;
  will-change:transform;
}
.leaf.on{
  opacity:1;visibility:visible;z-index:2;
  transition:transform .62s var(--ease),opacity .45s ease,visibility 0s;
}
.leaf.from-right{transform:translateX(100%)}
.leaf.from-left{transform:translateX(-100%)}
.leaf.out-left{transform:translateX(-100%);opacity:1;visibility:visible;z-index:3}
.leaf.out-right{transform:translateX(100%);opacity:1;visibility:visible;z-index:3}
.leaf.no-anim{transition:none!important}

.blur{
  position:absolute;inset:-10%;
  background-size:cover;background-position:center;
  filter:blur(38px) brightness(.44) saturate(1.05);
  transform:scale(1.08);
}
.frame{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--frame-w);height:var(--frame-h);overflow:hidden;
  box-shadow:0 26px 64px rgba(0,0,0,.58);
}
.frame img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

/* 封面：只有画面，一个纯图形的左滑提示，几秒后自己消失 */
.swipe-cue{
  position:absolute;z-index:5;right:6%;bottom:calc(34px + env(safe-area-inset-bottom));
  width:34px;height:1px;background:rgba(255,244,220,.55);pointer-events:none;
  animation:cueFade 4.6s ease forwards;
}
.swipe-cue::before{
  content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;
  border-left:1px solid rgba(255,244,220,.7);border-bottom:1px solid rgba(255,244,220,.7);
  transform:rotate(45deg);
}
@keyframes cueFade{0%{opacity:0}14%{opacity:.85}68%{opacity:.85}100%{opacity:0}}

/* ── 信纸 ─────────────────────────────────────────── */
/* 把原图横线压淡，留出干净的手写区；折痕、水渍、毛边都留着 */
.sheet-wash{
  position:absolute;left:6.6%;top:15%;width:86.8%;height:70.6%;
  border-radius:5px;pointer-events:none;
  background:rgba(240,227,196,.36);
  box-shadow:inset 0 0 46px rgba(122,92,52,.10);
}
.sheet-scroll{
  position:absolute;left:11%;top:19%;width:78%;height:62%;
  overflow-y:auto;overflow-x:hidden;
  padding:var(--lh) 8px calc(var(--lh)*2) 8px;
  background-image:repeating-linear-gradient(
    to bottom,transparent 0,transparent calc(var(--lh) - 1px),
    rgba(96,86,68,.22) calc(var(--lh) - 1px),rgba(96,86,68,.22) var(--lh));
  background-attachment:local;
  background-position:0 calc(var(--lh) - 6px);
  scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);
}
.sheet-scroll::-webkit-scrollbar{display:none}
.page-in{max-width:100%}
/* 一页只留一个手写页题，不编号、不画标签 */
.page-title{
  margin:0 0 var(--lh);
  font-size:19px;line-height:var(--lh);font-weight:400;
  letter-spacing:.17em;text-indent:.17em;text-align:center;
  color:#3d3222;text-shadow:0 0 1px rgba(70,56,36,.10);
}
.prose p{
  margin:0 0 var(--lh);
  font-size:16px;line-height:var(--lh);letter-spacing:.035em;
  color:var(--ink);text-align:left;text-indent:2em;
  text-shadow:0 0 1px rgba(70,56,36,.10);
}

/* 每页末尾那道缝：读到页底才裂开 */
.seam-wrap{position:relative;padding-left:16px}
.seam-wrap::before{
  content:"";position:absolute;left:1px;top:2px;bottom:2px;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(92,78,58,.62) 18%,rgba(92,78,58,.52) 82%,transparent);
  transform:scaleY(0);transform-origin:top;transition:transform 1.15s var(--ease);
}
.seam-wrap .seam{color:var(--ink);transition:color 1.1s ease,letter-spacing 1.1s ease}
.leaf.cracked .seam-wrap::before{transform:scaleY(1)}
.leaf.cracked .seam-wrap .seam{color:var(--ink-cold);letter-spacing:.05em}
.leaf.cracked .sheet-wash{
  background:rgba(238,225,194,.42);
  box-shadow:inset 0 0 46px rgba(122,92,52,.10),inset -26px 0 38px -30px rgba(48,44,40,.65);
}

/* 第二十页：一整页空白，只有那一句 */
.blank .sheet-wash{background:rgba(240,227,196,.24)}
.final-in{
  position:absolute;left:11%;top:19%;width:78%;height:62%;
  display:flex;align-items:center;justify-content:center;padding-bottom:6%;
}
.final-in p{
  margin:0;font-size:clamp(18px,2.3vw,25px);line-height:2.1;
  letter-spacing:.2em;text-indent:.2em;text-align:center;color:#4c4130;
}

/* ── 音乐：只剩一个极淡的小音符 ───────────────────── */
.music{
  position:fixed;z-index:40;top:calc(14px + env(safe-area-inset-top));right:14px;
  width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid rgba(255,242,214,.8);
  background:rgba(24,16,10,.84);backdrop-filter:blur(6px);
  box-shadow:0 2px 14px rgba(0,0,0,.5);
  color:#f8eacb;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s,border-color .3s,box-shadow .3s;
}
.music:hover{border-color:rgba(255,240,210,.7)}
.music.playing{box-shadow:0 0 0 4px rgba(255,240,210,.07)}
.music.muted{color:rgba(248,234,203,.6)}

@media (max-width:720px){
  .page-title{font-size:17px}
  .prose p{font-size:15px;letter-spacing:.02em}
  .sheet-scroll{padding-left:6px;padding-right:6px}
  .seam-wrap{padding-left:13px}
  .final-in p{font-size:18px;letter-spacing:.14em}
  .music{top:calc(10px + env(safe-area-inset-top));right:10px;width:32px;height:32px}
  .swipe-cue{right:7%;bottom:calc(26px + env(safe-area-inset-bottom))}
}

/* 竖屏手机：让照片铺满整屏，文字按被裁切后的画面重新收进纸里 */
@media (max-aspect-ratio:9/16){
  :root{
    --frame-w:max(100vw, calc(100dvh * 0.5628));
    --frame-h:max(100dvh, calc(100vw / 0.5628));
  }
  .sheet-scroll{left:15%;width:70%;top:20%;height:60%}
  .final-in{left:15%;width:70%;top:20%;height:60%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}