/* zt2628 专题页样式 —— 由 build.py 生成，请勿手改（下次构建会覆盖） */
:root { --u: calc(min(100vw, 1680px) / 1680); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* JS 可用时首帧即隐藏待入场元素（由 AnimationEngine 负责显示）；
   加载期锁滚动，保证「页面从顶部开始加载」这一前提成立。 */
html.js [data-anim-key] { opacity: 0; }
html.js.is-booting { overflow: hidden; }

body {
  background: #046A99;
  overflow-x: hidden;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 加载页 ---------- */
#loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000;
  z-index: 9999; display: flex; justify-content: center; align-items: center; }
#loader-content { text-align: center; color: #fff; }
#loading-text { font-size: 24px; margin-bottom: 30px; letter-spacing: 4px; }
.loading-char { display: inline-block; animation: fadeIn 0.8s ease infinite; }
.loading-char:nth-child(2) { animation-delay: 0.2s; }
.loading-char:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeIn { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.loading-dots { display: inline-block; margin-left: 10px; }
.loading-dots span { animation: bounce 1s infinite; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
#loader-progress { width: 200px; height: 4px; background: #333; margin: 20px auto; border-radius: 2px; overflow: hidden; }
#loader-bar { height: 100%; width: 0%; background: #fff; transition: width 0.3s ease; }
#loader-percentage { font-size: 16px; color: #999; margin-top: 10px; }

/* ---------- 版面 ---------- */
.page-container { position: relative; width: 100%; max-width: 1680px; margin: 0 auto; overflow: visible; }
.sections-wrapper { position: relative; width: 100%; }
.psd-section { position: relative; width: 100%; }
.section-1, .section-2 { background: #046A99; }
.section-3 { background: transparent; padding-bottom: calc(20 * var(--u)); z-index: 0; }
/* 仅编辑名单这一条白底横向铺满浏览器，其上方内容保持蓝色 */
.p4-editors-band { position: relative; }
.p4-editors-band::before { content: ""; position: absolute; z-index: -1;
  top: calc(-27 * var(--u)); bottom: calc(-20 * var(--u)); left: calc(50% - 50vw); width: 100vw; background: #FDFEF9; }
.bg-segment { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; object-fit: cover; }
.p-elem { position: absolute; display: block; height: auto;
  user-select: none; -webkit-user-drag: none; }
@media (max-width: 1680px) { .page-container { max-width: none; } }

/* ---------- part2 卡片切换 ---------- */
.p2-cards { position: absolute; left: 0; width: 100%; }
.p2-card { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; }
.p2-card.is-active { opacity: 1; visibility: visible; }
.p2-card.is-anim { animation: p2In 0.5s ease both; }
@keyframes p2In {
  from { opacity: 0; transform: translateY(calc(20 * var(--u))); }
  to { opacity: 1; transform: none; }
}
/* 按钮状态：选中=循环缩放+发光高亮，未选中=变暗+静止（用 filter 变暗，避免与 GSAP 的 opacity 内联样式冲突） */
.p2-btn { cursor: pointer; transform-origin: 50% 50%;
  filter: brightness(0.6) saturate(0.75);
  transition: filter 0.3s ease; }
.p2-btn:hover { filter: brightness(1.35) saturate(1.35); }
.p2-btn.is-active { filter: brightness(1.2) saturate(1.3);
  filter: brightness(1.2) saturate(1.3) drop-shadow(0 0 calc(16 * var(--u)) rgba(91, 212, 216, 0.9));
  animation: p2BtnPulse 1.2s ease-in-out infinite; }
@keyframes p2BtnPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
/* part2 按钮提示语：PSD 无此层，用 HTML 文本；呼吸+微缩放引导点击 */
.p2-tip { position: absolute; text-align: center; font-weight: 600; color: #FFFFFF;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: calc(32 * var(--u)); line-height: 1.45; letter-spacing: calc(2 * var(--u));
  text-shadow: 0 0 calc(20 * var(--u)) rgba(91, 212, 216, 0.95),
               0 0 calc(6 * var(--u)) rgba(91, 212, 216, 0.9);
  animation: p2TipBreath 1.8s ease-in-out infinite; }
@keyframes p2TipBreath {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.03); }
}

/* ---------- part3 图片轮播 ---------- */
.p3-swiper { position: absolute; overflow: hidden; }
.p3-track { display: flex; width: 500%; height: 100%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.p3-slide { flex: 0 0 20%; width: 20%; height: 100%; display: block; }
/* 图注：5 张 PSD 墨迹图叠在同一条 wordBg 上，JS 按当前下标切换 .is-on */
.p3-cap { display: none; }
.p3-cap.is-on { display: block; }
.p3-nav { cursor: pointer; }

/* ---------- part4 展开全文 ---------- */
.p4-blue { position: relative; z-index: 0; background: #046A99;
  padding-top: calc(467 * var(--u)); padding-bottom: calc(112 * var(--u)); }
/* 结语 / 编辑名单：PSD 文字层的墨迹图，随 note 卡片展开一起下移 */
.p4-flow { display: block; }

.note-card { position: relative; width: calc(1185 * var(--u)); margin-left: calc(241 * var(--u)); }
.nc-slice { position: absolute; left: 0; width: 100%;
  background-repeat: no-repeat; background-size: 100% 100%; }
.nc-top { top: 0; height: calc(350 * var(--u)); background-image: url("/zhuanti/img/zt2628_p4_note_notebg_top.png"); }
.nc-mid { top: calc(350 * var(--u)); bottom: calc(106 * var(--u)); background-image: url("/zhuanti/img/zt2628_p4_note_notebg_mid.png"); }
.nc-bot { bottom: 0; height: calc(106 * var(--u)); background-image: url("/zhuanti/img/zt2628_p4_note_notebg_bot.png"); }
.nc-body { position: relative; padding: calc(219 * var(--u)) calc(122 * var(--u)) calc(51 * var(--u)) calc(127 * var(--u)); }

.note-title { font-family: "Songti SC", "STSong", "SimSun", "Noto Serif CJK SC", serif;
  font-weight: 900; font-size: calc(60 * var(--u)); line-height: calc(72 * var(--u));
  color: #000000; text-align: center;
  margin-left: calc(-96 * var(--u)); width: calc(1112 * var(--u)); }
.note-author { margin-top: calc(29 * var(--u)); font-size: calc(30 * var(--u));
  line-height: calc(36 * var(--u)); color: #000000; text-align: center;
  margin-left: calc(-96 * var(--u)); width: calc(1112 * var(--u)); }
.note-text { margin-top: calc(34 * var(--u)); font-size: calc(30 * var(--u));
  line-height: calc(48 * var(--u)); color: #000000; text-indent: calc(60 * var(--u)); }
.note-text p { margin: 0; }
.note-hidden { display: none; }
.note-more-btn { display: block; width: calc(172 * var(--u)); height: calc(98 * var(--u));
  margin: calc(62 * var(--u)) auto 0; padding: 0; border: 0; cursor: pointer;
  background: url("/zhuanti/img/zt2628_p4_note_btn_more.png") no-repeat center / 100% 100%; }