/* ==========================================================================
   letter.css — 「一封信」页（利兹与青鸟主题）
   --------------------------------------------------------------------------
   这一页是**独立主题**：蓝天 + 黄昏粉，不用主站的橙黑配色；
   但复用 tokens.css 的间距 / 字号 / 动效阶梯，所以节奏和主站是一套。

   两个插画的主色是从图里取出来的（Pillow 量化）：
     liz-02 的天空蓝 #1EADF9       liz-01 的黄昏粉 #EEC7BC
   ========================================================================== */

:root {
  --liz-sky: #1eadf9; /* 天空蓝（取自第二张图） */
  --liz-sky-deep: #1b6fa8; /* 压深一档，保证小字/链接可读 */
  --liz-pale: #ddf1fa; /* 天空里的浅云 */
  --liz-dusk: #eec7bc; /* 黄昏粉（取自第一张图） */
  --liz-ink: #22333f; /* 深蓝灰，比纯黑柔和 */
  --liz-paper: #ffffff;
  --liz-wash: linear-gradient(180deg, #e8f4fb 0%, #fdf6f3 100%);

  /* --- 「玻璃信纸」的两个旋钮 --------------------------------------------- */
  /* 想更透：把 tint 调到 0（完全通透，只剩边框）；想更实：调到 0.12 */
  --glass-tint: rgba(255, 255, 255, 0.06);
  /* 想背景更清晰：把 blur 调到 0（一点不模糊）；想文字更清楚：调到 4px */
  --glass-blur: 2px;
  --glass-line: rgba(255, 255, 255, 0.78); /* 边框颜色 */

  /* --- 左下角视频窗的宽度（16:9，高度自动是它的 56.25%） ------------------ */
  /* 手机上 44vw ≈ 170px；桌面最大 320px。信纸的底部留白会按这个算出。 */
  --pip-w: min(44vw, 320px);

  /* 信纸用衬线体；真正的字体栈在 tokens.css 的 --font-serif 里，这里只是个别名 */
  --font-letter: var(--font-serif);
}

body.letter-page {
  min-height: 100svh;
  background: var(--liz-wash);
  color: var(--liz-ink);
}

/* ==========================================================================
   整屏壁纸：两张插画铺满整个屏幕，循环淡入淡出
   ========================================================================== */

.liz-stage {
  position: fixed; /* 固定层：信往下滚它也一直在 */
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* 图还没加载出来时的兜底底色（也是两张图之间的过渡色） */
  background: linear-gradient(180deg, #cfe9f8 0%, #f7e9e4 100%);
}

.liz-stage__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* ★ 像壁纸一样铺满整屏。cover 会按屏占比取舍，
     所以每一张图可以用 focus 指定"留住哪一块"（见 config.js 的 slides[].focus） */
  object-fit: cover;
  object-position: var(--liz-focus, 50% 50%);
  opacity: 0;
  transition: opacity 3200ms var(--ease);
}

.liz-stage__img.is-on { opacity: 1; }

/* 屏幕中央加一层柔光：信纸是玻璃的，这层光就是文字的主要衬底 ——
   让字压在亮处更清楚，同时不影响看清背景细节 */
.liz-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 66% 60% at 50% 50%,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0) 74%
  );
}

/* 系统开了「减少动效」→ 换图直接切，不淡入淡出 */
.liz-stage--instant .liz-stage__img { transition: none; }

/* ==========================================================================
   信纸：放在屏幕正中间
   ========================================================================== */

.letter {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center; /* 短信居中；信很长时这一页就自然往下滚 */
  /* 底部多留出视频窗那块地：信纸会被顶上去，不会压住左下角的画面。
     = 画面高（宽 × 56.25%）+ 标题条 38px + 间距 + 安全区 */
  padding: calc(var(--s-6) + env(safe-area-inset-top, 0px)) var(--s-3)
    calc(var(--pip-w) * 0.5625 + 38px + var(--s-4) + env(safe-area-inset-bottom, 0px));
}

.letter__paper {
  position: relative;
  width: min(100%, 680px);
  padding: clamp(26px, 5.5vw, 50px);
  border-radius: 14px;
  /* ★ 玻璃感：几乎不挡背景，只留一圈边框 */
  background: var(--glass-tint);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    /* 上沿一道玻璃高光 */
    0 16px 36px rgba(20, 46, 66, 0.16);
  /* ★ 信纸是玻璃，文字直接压在插画上 —— 所以整张纸内的字都带一圈白色描边
     （紧的一圈保证边缘对比 + 松的一圈柔化）。text-shadow 是继承属性，
     写在纸上，里面所有文字自动都有，新加的字块也不用再单独写一遍。 */
  text-shadow:
    0 1px 3px rgba(255, 255, 255, 0.9),
    0 0 14px rgba(255, 255, 255, 0.7);
  animation: letter-in var(--dur-slow) var(--ease) both;
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.letter__theme {
  font-family: var(--font-mono);
  font-size: var(--fs-deco);
  letter-spacing: var(--ls-deco);
  color: var(--liz-sky-deep);
}

.letter__title {
  margin: var(--s-1) 0 var(--s-4);
  font-size: clamp(26px, 7vw, 34px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   正文的分块排版
   --------------------------------------------------------------------------
   一块一类样式：称呼 / 段落 / 空行 / 独白 / 并列句 / 祝福
   ========================================================================== */

/* 正文底盘：衬线体 + 大行距，读起来像一封真的信 */
.letter__body {
  /* ★ 先把信纸的"空间"留好：内容少也不会显得空，内容多就自然往下长 */
  min-height: 40svh;
  font-family: var(--font-letter);
  font-size: clamp(16px, 4.4vw, 17px);
  line-height: 2.1;
}

/* 称呼：不缩进，字距拉开 */
.letter__to {
  margin: 0 0 var(--s-3);
  font-size: 1.06em;
  letter-spacing: 0.16em;
  text-indent: 0;
}

/* 正文段落：首行缩进两字 */
.letter__p {
  margin: 0 0 var(--s-3);
  text-indent: 2em;
}

/* 空一行：比段落间距更大的停顿 */
.letter__gap { height: var(--s-4); }

/* 独白 / 引用：居中，上下各一条细线，字距拉开 */
.letter__quote {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-2);
  border-top: 1px solid rgba(34, 51, 63, 0.16);
  border-bottom: 1px solid rgba(34, 51, 63, 0.16);
  text-align: center;
  text-indent: 0;
  font-size: 0.95em;
  letter-spacing: 0.12em;
  color: rgba(34, 51, 63, 0.84);
}

/* 并列的几句：左侧一条天空蓝细线；引号里的关键词加粗变色 */
.letter__list {
  margin: var(--s-4) 0;
  padding-left: var(--s-3);
  border-left: 2px solid rgba(30, 173, 249, 0.45);
  list-style: none;
}

.letter__li {
  margin-bottom: var(--s-2);
  text-indent: 0;
  line-height: 1.95;
}

.letter__li:last-child { margin-bottom: 0; }

.letter__key {
  font-weight: 900;
  color: var(--liz-sky-deep);
  letter-spacing: 0.02em;
}

/* 祝福：上方一条细线，居中 + 字距 */
.letter__wish {
  margin: var(--s-6) 0 var(--s-2);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(34, 51, 63, 0.14);
  text-align: center;
  text-indent: 0;
  letter-spacing: 0.12em;
}

/* 占位段落（用（）包起来的那种）淡一点，一眼能看出"这还不是正文"；
   但玻璃信纸上不能太淡，否则被壁纸吃掉 */
.letter__p.is-placeholder { color: rgba(34, 51, 63, 0.55); }

/* 落款：右对齐，和正文拉开一段 */
.letter__sign {
  margin-top: var(--s-6);
  text-align: right;
  font-family: var(--font-letter);
  font-size: var(--fs-small);
  line-height: 2;
  color: rgba(34, 51, 63, 0.85);
}

/* ==========================================================================
   回程：固定在左上角，信再长也随时能点
   ========================================================================== */

.letter__back {
  position: fixed;
  top: calc(var(--s-2) + env(safe-area-inset-top, 0px));
  left: var(--s-2);
  z-index: 2; /* 在壁纸之上 */
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--liz-ink);
  font-size: var(--fs-small);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(20, 46, 66, 0.22);
  transition: transform var(--dur-fast) var(--ease);
}

.letter__back:hover { transform: translateY(-2px); }

/* ==========================================================================
   左下角的视频窗（哔哩哔哩外链播放器）
   --------------------------------------------------------------------------
   进入这一页就自动播放，不跳转、不离开这封信。
   尺寸由 --pip-w 决定（16:9），信纸的底部留白也是按它算的，所以不会互相压住。
   ========================================================================== */

.liz-pip {
  position: fixed;
  left: calc(var(--s-2) + env(safe-area-inset-left, 0px));
  bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  z-index: 2; /* 在壁纸和信纸之上 */
  width: var(--pip-w);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(12, 30, 44, 0.5);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(12, 30, 44, 0.32);
  animation: pip-in 600ms var(--ease) 500ms both;
}

@keyframes pip-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.liz-pip__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1);
  height: 38px;
  padding: 0 6px 0 12px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

.liz-pip__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.liz-pip__toggle {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.liz-pip__toggle:hover { background: rgba(255, 255, 255, 0.3); }

/* 画面：16:9，播放器 iframe 铺满 */
.liz-pip__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b1219;
}

.liz-pip__frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 收起：只留标题条（多数浏览器里音乐仍会继续放） */
.liz-pip.is-collapsed .liz-pip__frame,
.liz-pip.is-collapsed .liz-pip__hint { display: none; }

/* 自动播放的提示：9 秒后自己淡出，不挡画面太久 */
.liz-pip__hint {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(12, 30, 44, 0.6);
  color: rgba(255, 255, 255, 0.94);
  font-size: 11px;
  pointer-events: none;
  animation: pip-hint-out 1.2s var(--ease) 9s forwards;
}

@keyframes pip-hint-out {
  to { opacity: 0; visibility: hidden; }
}

/* ==========================================================================
   桌面端
   ========================================================================== */

@media (min-width: 900px) {
  .letter { padding-inline: var(--s-6); }
}