/* ==========================================================================
   第 12 章 — 老师寄语（新增篇章）
   设计：一张张渐变卡片自动弹入 → 停留 → 淡出 → 下一张，循环播放。
        点击卡片弹出大图看全文。配色沿用站点规范（金 #d4af37 + 深藏青）。
   类的前缀统一 ch12-，避免与其它篇章冲突。
   ========================================================================== */

.ch12-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 4vh 20px 12vh;
  overflow: hidden;
}

/* ---------------------------------------------------------------- 标题区 */
.ch12-head {
  flex: none;
  text-align: center;
  margin-bottom: 3.4vh;
}
.ch12-title {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f0c74a;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(120, 84, 8, 0.45),
    0 0 22px rgba(255, 200, 70, 0.32);
}
/* ch12Shine 已删除：它靠扫 background-position 做流光，而流光正是「金色字一半暗一半亮」的根源之一。现在用纯色 + 描边发光。 */
.ch12-sub {
  margin: 10px 0 0;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.28em;
  color: var(--text-dim);
}

/* ---------------------------------------------------------------- 卡片舞台 */
.ch12-stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

/* ---------------------------------------------------------------- 单张卡片 */
.ch12-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(680px, 88vw);
  max-height: 100%;
  padding: 0 0 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 20px;
  /* --ch12-a / --ch12-b 由 JS 按索引注入的渐变色 */
  background: linear-gradient(158deg, var(--ch12-a, #2a3350), var(--ch12-b, #141a2a));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.16) inset;
  /* 入场前的状态：缩小 + 下移 + 透明 */
  /* 入场前的状态：缩小 + 下移 + 轻微侧倾 + 一点点虚化 → 落位像「甩上来一张卡」 */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) translateY(46px) rotate(-2.4deg);
  filter: blur(6px);
  transition:
    opacity 0.55s ease,
    transform 0.78s cubic-bezier(0.18, 1.24, 0.36, 1),
    filter 0.5s ease;
  will-change: opacity, transform, filter;
  cursor: pointer;
  /* ===== 老师卡片点击（最终方案）=====
     13 张卡片全叠在同一位置，只有当前那张 opacity 是 1。
     历史方案是「基础态 pointer-events:none，只有 .is-in 可点」，但轮播换卡时
     旧卡正在淡出、新卡还没弹到位，于是出现约 0.5 秒「观众明明看着有卡片、
     却一张都点不动」的空档，点下去还会落到旧卡处理器上（弹错老师）。
     现在改成：所有卡片都接收点击，由 JS 判断「点到的这张是不是当前这张」，
     不是就转发给当前那张 —— 看得见就点得动，且永远不会弹错人。 ===== */
  cursor: pointer;
}
/* 弹入到位 */
.ch12-card.is-in {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) translateY(0) rotate(0deg);
  filter: blur(0);
  pointer-events: auto;
}
/* 淡出（让位给下一张） */
.ch12-card.is-out {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92) translateY(-34px) rotate(1.8deg);
  filter: blur(5px);
  transition:
    opacity 0.44s ease,
    transform 0.5s cubic-bezier(0.4, 0, 0.7, 0.2),
    filter 0.42s ease;
}
.ch12-card:hover {
  box-shadow:
    0 32px 84px rgba(0, 0, 0, 0.68),
    0 0 0 1px rgba(255, 255, 255, 0.09) inset,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

/* 顶部彩条：学科专属渐变的浓缩，给卡片一个视觉标识 */
.ch12-card-top {
  flex: none;
  height: 7px;
  background: linear-gradient(90deg, var(--ch12-a, #3a4560), var(--ch12-c, var(--gold)));
}

.ch12-card-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 22px 34px 0;
}

/* 学科徽章 */
.ch12-subject {
  flex: none;
  padding: 7px 22px;
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--ch12-a, #3a4560), var(--ch12-b, #232a3d));
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* 老师名 */
.ch12-name {
  flex: none;
  margin: 12px 0 0;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5);
}

/* 分隔线（中间带小菱形） */
.ch12-rule {
  position: relative;
  flex: none;
  width: 62%;
  height: 1px;
  margin: 14px 0 12px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}
.ch12-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--ch12-c, var(--gold));
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--ch12-c, var(--gold));
}

/* 寄语正文：可滚动，长文不溢出 */
.ch12-text {
  /* 旧写法 flex:1 1 auto + min-height:0 会被上面的徽章/名字/横线压扁，
     正文被截掉 3~13px（班主任那张最长的被切掉一行）。改成按内容自然撑开，
     实在超长（超过 46vh）才出现滚动条，正常寄语一张都不会再切字。 */
  flex: none;
  /* 收窄行距 + 收掉卡片内多余留白后，46vh 足够装下最长的寄语，不用滚动 */
  max-height: 48vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 6px;
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.92;   /* 原来 2.05：最长的班主任那张正文正好放不下，要滚一点 */
  letter-spacing: 0.045em;
  color: rgba(255, 255, 255, 0.94);
  white-space: pre-wrap;
  word-break: break-word;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.36);
}
.ch12-text::-webkit-scrollbar { width: 5px; }
.ch12-text::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; }

/* 署名 */
.ch12-sign {
  flex: none;
  margin-top: 12px;   /* 原来 20px：卡片底部就是被这些间距顶出去的 */
  padding-bottom: 2px;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.6);
}

/* 点开提示 */
.ch12-hint {
  flex: none;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.42);
}

/* ---------------------------------------------------------------- 进度点 */
.ch12-dots {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 3vh;
  min-height: 22px;
}
.ch12-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition: width 0.34s cubic-bezier(0.22, 1, 0.36, 1), background 0.34s;
}
.ch12-dot.on {
  width: 26px;
  background: linear-gradient(90deg, var(--gold-lt), var(--gold));
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.6);
}

/* ---------------------------------------------------------------- 弹窗（看全文）
   要求：弹窗本身就是「展示全部内容」，所以正文不设高度上限、不裁切，
        只在弹窗整体超过一屏时才由 .c-modal 自己滚动。
        动画：弹入（略小 + 下移 → 轻微过冲放大 → 落定）后持续「呼吸」缩放。 */
.ch12-modal-card {
  width: min(680px, 92vw);
  max-height: 88vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
/* 关掉基类的 translateY/scale 过渡，改由关键帧统一接管，避免两套动画打架 */
.c-overlay.open .ch12-modal-card { transform: none; }
.c-overlay.open .ch12-modal-card {
  animation: ch12ModalPop 560ms cubic-bezier(0.18, 1.5, 0.4, 1) both,
             ch12ModalBreath 4.2s ease-in-out 640ms infinite;
}
@keyframes ch12ModalPop {
  0%   { opacity: 0;    transform: translateY(26px) scale(0.86); }
  55%  { opacity: 1;    transform: translateY(0)    scale(1.045); }
  75%  {                transform: translateY(0)    scale(0.992); }
  100% { opacity: 1;    transform: translateY(0)    scale(1); }
}
/* 「大小呼吸」：极轻的放大缩小，做出卡片在呼吸的感觉 */
@keyframes ch12ModalBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.022); }
}

/* 序号：第 N 位 / 共 M 位 */
.ch12-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.ch12-modal-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--gold-lt, #f3dfa2);
}
.ch12-modal-seq {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  border-radius: 999px;
  color: var(--m12-fg, #fff);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.ch12-modal-foot {
  margin-top: 18px;
  padding-top: 12px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-align: right;
  color: var(--m12-fg, #fff);
  opacity: 0.42;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}

.ch12-modal-subject {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--m12-a, #3a4560), var(--m12-b, #232a3d));
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.ch12-modal-name {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--gold-lt);
}
/* 正文：不设 max-height、不设 overflow —— 「展示全部内容」 */
.ch12-modal-text {
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------- 空状态（理论上不会出现，兜底） */
.ch12-empty {
  text-align: center;
  color: var(--text-dim);
}
.ch12-empty-ico { font-size: 44px; opacity: 0.5; display: block; margin-bottom: 14px; }

/* ---------------------------------------------------------------- 窄屏适配 */
@media (max-width: 640px) {
  .ch12-wrap { padding: 3vh 14px 14vh; }
  .ch12-card-inner { padding: 22px 20px 0; }
  .ch12-text { max-height: 36vh; }
  .ch12-head { margin-bottom: 2.4vh; }
}

/* 尊重「减少动态效果」偏好：不做位移动画，只留淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  .ch12-card,
  .ch12-card.is-in,
  .ch12-card.is-out {
    transform: translate(-50%, -50%) !important;
  }
  .ch12-title { animation: none; }
  .ch12-dot { transition: none; }
}
/* ==========================================================================
   追加（后台可配卡片颜色 + 未寄语）——
   · 弹入落定后「缓慢放大推进」，做出镜头推近的感觉
   · 每位老师的卡片颜色由后台选择，JS 注入 --ch12-a/b/c 与 --ch12-fg
   · 老师选择「不寄语」时，卡片照样弹入放大，正文显示「未寄语」
   ========================================================================== */

/* 放大推进：必须写在 .is-in 之后才能覆盖它。
   切出时 JS 会先移除 is-hold 再加 is-out，所以不会互相打架。 */
.ch12-card.is-hold {
  transform: translate(-50%, -50%) scale(1.055) translateY(0);
  transition: transform 3.6s cubic-bezier(0.22, 0.72, 0.28, 1), opacity 0.45s ease;
}

/* 卡片偏浅色时自动改用深色字（JS 按亮度注入 --ch12-fg） */
.ch12-card .ch12-name,
.ch12-card .ch12-text,
.ch12-card .ch12-sign,
.ch12-card .ch12-hint,
.ch12-card .ch12-subject { color: var(--ch12-fg, #fff); }
.ch12-card .ch12-hint { opacity: 0.42; }

/* 「未寄语」占位样式 */
.ch12-card .ch12-nomsg,
.ch12-modal-card .ch12-nomsg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 0 8px;
  text-align: center;
}
.ch12-nomsg-word {
  padding: 10px 26px;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--ch12-fg, var(--m12-fg, #fff));
  border: 1px dashed rgba(255, 255, 255, 0.55);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  animation: ch12NoMsgBreath 3.4s ease-in-out infinite;
}
@keyframes ch12NoMsgBreath {
  0%, 100% { opacity: 0.72; transform: translateY(0); }
  50%      { opacity: 1;    transform: translateY(-4px); }
}
.ch12-nomsg-sub {
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.18em;
  color: var(--ch12-fg, var(--m12-fg, #fff));
  opacity: 0.6;
}

/* 弹窗也套用所选颜色 */
.ch12-modal-card { background: linear-gradient(158deg, var(--m12-a, #2a3350), var(--m12-b, #141a2a)); }
.ch12-modal-card .ch12-modal-subject,
.ch12-modal-card .ch12-modal-name,
.ch12-modal-card .ch12-modal-text { color: var(--m12-fg, #fff); }

/* 手机竖屏：卡片留白收一点，长寄语可滚动 */
@media (max-width: 640px) {
  .ch12-card { width: min(680px, 92vw); }
  .ch12-card-inner { padding: 22px 20px 0; }
  .ch12-card .ch12-text { max-height: 42vh; overflow-y: auto; }
}

/* 系统开启「减少动态效果」时降级：不放大、不呼吸，只淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  .ch12-card, .ch12-card.is-in, .ch12-card.is-out, .ch12-card.is-hold { transition-duration: 0.28s; }
  .ch12-card.is-hold { transform: translate(-50%, -50%) scale(1) translateY(0); }
  .ch12-nomsg-word { animation: none; }
  /* 弹窗只保留轻微淡入，不做缩放/呼吸 */
  .c-overlay.open .ch12-modal-card { animation: ch12ModalFadeOnly 0.28s ease both; }
}
@keyframes ch12ModalFadeOnly {
  0%   { opacity: 0; transform: none; }
  100% { opacity: 1; transform: none; }
}

/* ---- 「点这里看全文」提示：做成明显的胶囊按钮 ----
   原来只是一行 0.42 透明度的小灰字，现场根本注意不到卡片可以点。
   现在加边框 + 底色 + 呼吸动画，让人一眼看出「这是可以点的」。 */
.ch12-hint--tap {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 7px 18px;
  font-size: clamp(11px, 1.02vw, 14px);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 99px;
  backdrop-filter: blur(4px);
  opacity: 1 !important;
  white-space: nowrap;
  animation: ch12TapBreath 2.6s ease-in-out infinite;
  pointer-events: none;        /* 卡片本身负责点击，提示不抢事件 */
}
.ch12-hint-ico {
  font-size: 1.12em;
  line-height: 1;
  animation: ch12TapPoint 2.6s ease-in-out infinite;
}
@keyframes ch12TapBreath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.16); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); background: rgba(255, 255, 255, 0.26); }
}
@keyframes ch12TapPoint {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}

/* 大屏时别让提示太小 */
@media (min-width: 1600px) {
  .ch12-hint--tap { padding: 9px 24px; font-size: 15px; }
}