/* 全站只用三条缓动：出场（起步快、收尾慢，不回弹）、进出（淡入淡出、位移）、慢（大块展开）。
   动画时长也只用四档：.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-likai body > :not(.lz-tiao):not(.lz-ti) { opacity: 0; transition: opacity .16s ease; }

/* 一笔墨线进度：点了链接以后在页顶慢慢写过去，快的话根本来不及出现 */
.lz-tiao {
  position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(63, 59, 54, .15), rgba(63, 59, 54, .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(63, 59, 54, .16); border-radius: 3px;
  background: rgba(251, 248, 241, .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-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(63, 59, 54, .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-likai body > * { transition: none; }
  .lz-zou .lz-tiao { animation: none; transform: scaleX(.6); }
  .lz-ti { transition: opacity .2s, visibility 0s .2s; transform: translate(-50%, 0); }
}