/* 全站只用三条缓动：出场（起步快、收尾慢，不回弹）、进出（淡入淡出、位移）、慢（大块展开）。
   动画时长也只用四档：.3s 快、.6s 常、1.1s 慢、1.6s 场面。 */
:root {
  --e-chu: cubic-bezier(.16, 1, .3, 1);
  --e-jin: cubic-bezier(.4, 0, .2, 1);
  --e-man: cubic-bezier(.3, .1, .2, 1);
  --t-su: .3s; --t-ji: .6s; --t-man: 1.1s; --t-chang: 1.6s;
}
/* 流转：页和页之间怎么换；网慢、断网、打不开时怎么说。首页、书房、404 共用
   - 新浏览器（Chrome、Edge、Safari 18 以上）：换页时旧页像墨迹淡下去，新页从纸里浮上来，门牌不动
   - 老浏览器：先把旧页淡掉再走，新页进来时自己浮现
   - 往外走（去八字页）：旧页淡成一张空纸再走，回来时恢复原样 */

/* 换页：不再用浏览器的整页换页动画（它要把整页拍成两张图再叠着模糊，页面一重就卡，还会让异步出来的书、月亮晚到）。
   现在只做两件轻的事：离开时旧页淡一下，来了新页从下面浮上来一点；都只动透明度和位置，不加模糊 */
@keyframes lz-qu { to { opacity: 0; } }
@keyframes lz-lai { from { opacity: 0; transform: translateY(8px); } }

/* 老浏览器进门：内容自己浮现（新浏览器交给上面的换页动画，不重复） */
.js .lz-ru { animation: lz-lai .45s var(--e-chu) both; }
/* 离开：不再把旧页淡成一张空白（那样像卡死了）。旧页留着，上面盖一层纸色的骨架，新页一到就整个换掉 */
.lz-kong {
  position: fixed; inset: 0; z-index: 99; display: grid; place-items: center; pointer-events: none;
  background: var(--paper, #EFEAE0); opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s .22s;
}
.lz-zou:not(.lz-man) .lz-kong { opacity: 1; visibility: visible; transition-delay: .12s, 0s; }
.lz-kong-nei { width: min(320px, calc(100vw - 64px)); }
.lz-ming { margin: 0 0 22px; font: 400 14px/1.7 "临听月宋", "Noto Serif SC", "Songti SC", serif; letter-spacing: .3em; color: #6B655C; }
.lz-gu { display: grid; gap: 12px; }
.lz-gu b {
  display: block; height: 9px; border-radius: 5px; width: 100%;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .07) 25%, rgba(var(--ink-rgb), .16) 50%, rgba(var(--ink-rgb), .07) 75%);
  background-size: 240% 100%; animation: lz-gu 1.6s ease-in-out infinite;
}
.lz-gu b:nth-child(2) { width: 82%; animation-delay: .15s; }
.lz-gu b:nth-child(3) { width: 56%; animation-delay: .3s; }
@keyframes lz-gu { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* 一笔墨线进度：点了链接以后在页顶慢慢写过去，快的话根本来不及出现 */
.lz-tiao {
  position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .15), rgba(var(--ink-rgb), .55) 85%, #A8453A);
  transform: scaleX(0); transform-origin: left; opacity: 0;
}
.lz-zou .lz-tiao { opacity: 1; transition: opacity .2s .25s; animation: lz-xie 16s var(--e-chu) .25s both; }
@keyframes lz-xie { 0% { transform: scaleX(0); } 6% { transform: scaleX(.3); } 100% { transform: scaleX(.92); } }

/* 一句提示：页底中间浮出一张小纸条，浅色细线框 */
.lz-ti {
  position: fixed; left: 50%; bottom: 28px; z-index: 101; max-width: calc(100vw - 32px);
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 11px 20px; border: 1px solid rgba(var(--ink-rgb), .16); border-radius: 3px;
  background: rgba(var(--card-rgb), .96); box-shadow: 0 14px 34px -22px rgba(36, 34, 31, .45);
  font: 400 13.5px/1.7 "临听月宋", "Noto Serif SC", "Songti SC", serif; letter-spacing: .06em; color: #3F3B36;
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
  transition: opacity .35s ease, transform .45s var(--e-chu), visibility 0s .45s;
}
.lz-ti.xian { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
/* 断网 / 来网的提醒小图：细线信号弧，断网时一格格闪灭、斜线划过，来网时一格格亮起 */
.lz-tuwai { display: inline-flex; flex: none; margin-right: -6px; }
.lz-tu { width: 22px; height: 22px; fill: none; stroke: #3F3B36; stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
.lz-tu .d { fill: #3F3B36; stroke: none; transform-origin: 12px 19px; }
.lz-tu .xie { stroke: #A8453A; stroke-dasharray: 22; stroke-dashoffset: 22; animation: lz-hua .5s var(--e-chu) .25s forwards; }
.lz-duan.xian { animation: lz-yao .5s ease .05s; }
.lz-duan .h { animation: lz-shan 2.2s ease-in-out infinite; }
.lz-duan .h2 { animation-delay: .2s; } .lz-duan .h3 { animation-delay: .4s; }
.lz-duan .d { fill: #A8453A; animation: lz-xi 2.2s ease-in-out infinite; }
.lz-lai .h { opacity: 0; animation: lz-liang .5s ease forwards; }
.lz-lai .h2 { animation-delay: .15s; } .lz-lai .h3 { animation-delay: .3s; }
.lz-lai .d { animation: lz-xi .6s var(--e-chu); }
@keyframes lz-hua { to { stroke-dashoffset: 0; } }
@keyframes lz-shan { 0%, 100% { opacity: .95; } 50% { opacity: .22; } }
@keyframes lz-xi { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes lz-liang { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes lz-yao { 0%, 100% { margin-left: 0; } 25% { margin-left: -5px; } 55% { margin-left: 4px; } 80% { margin-left: -2px; } }
.lz-ti button {
  padding: 0 0 1px; border: 0; border-bottom: 1px solid rgba(168, 69, 58, .5); background: none; cursor: pointer;
  font: inherit; color: #24221F; letter-spacing: .08em;
}
.lz-ti button + button { border-bottom-color: rgba(var(--ink-rgb), .3); color: #6B655C; }
.lz-ti button:hover { border-bottom-color: #A8453A; }
.lz-ti button:focus-visible { outline: 1px solid #3F3B36; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .lz-kong { transition-duration: .01s; }
  .lz-gu b { animation: none; }
  .lz-zou .lz-tiao { animation: none; transform: scaleX(.6); }
  .lz-ti { transition: opacity .2s, visibility 0s .2s; transform: translate(-50%, 0); }
  .lz-duan.xian { animation: none; }
  .lz-duan .h, .lz-duan .d { animation-duration: 4.4s; }
  .lz-tu .xie { animation: none; stroke-dashoffset: 0; }
  .lz-lai .h { animation-duration: .01s; }
}