/* ===========================================================
   三山书院 · 八字神煞流年 · 动态 H5
   5 屏满屏翻页 + 金色粒子 + 入场动画
   =========================================================== */

/* 主标题毛笔字体。
   用 fontTools 子集化过：只保留 h5 页面里出现过的字，
   5.59 MB → 220 KB，手机上首屏加载快得多。
   要改文案后新增了生僻字，重新跑一次子集化即可。 */
@font-face {
  font-family: 'MaShanZheng';
  src: url('fonts/MaShanZheng-subset.woff2') format('woff2');
  font-display: swap;
}

:root {
  --bg-1: #1a0a0c;
  --bg-2: #12080a;
  --bg-3: #080405;
  --gold:      #f0cf82;
  --gold-hi:   #fff8dd;
  --gold-deep: #b98b32;
  --gold-dim:  rgba(226, 186, 108, .32);
  --gold-line: rgba(226, 186, 108, .62);
  --paper:     #f2e0bc;
  --seal:      #c8332b;

  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --kai:  "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", serif;
  --brush: 'MaShanZheng', "Kaiti SC", "STKaiti", "KaiTi", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { height: 100%; }
body {
  height: 100%;
  background: var(--bg-3);
  color: var(--paper);
  font-family: var(--sans);
  line-height: 1.7;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---------- 金色粒子 ---------- */
#dust {
  position: fixed; inset: 0; z-index: 2;
  pointer-events: none;
  opacity: .85;
}

/* ---------- 翻页容器 ---------- */
/* 这里绝不能给 #stage 设 z-index —— 否则 #stage 会自建层叠上下文，
   下面 #dust 的粒子会被整块盖住看不见 */
#stage {
  position: relative;
  height: 100vh; height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#stage::-webkit-scrollbar { display: none; }

.page {
  position: relative;
  height: 100vh; height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: calc(env(safe-area-inset-top) + 40px) 24px calc(env(safe-area-inset-bottom) + 40px);
}
.page::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(130% 80% at 50% 22%, var(--bg-1) 0%, var(--bg-2) 46%, var(--bg-3) 100%);
}
/* 每屏一层金色边框 */
.page::after {
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  inset: 14px;
  border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 6px rgba(0,0,0,.18);
}

.page-inner {
  position: relative; z-index: 4;
  width: 100%; max-width: 560px;
  text-align: center;
}

/* ---------- 背景装饰 ---------- */
.deco { position: absolute; z-index: 1; pointer-events: none; }
.deco svg { display: block; width: 100%; height: 100%; }

.bagua-wrap {
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: 128vw; height: 128vw; max-width: 760px; max-height: 760px;
  opacity: .22;
}
.bagua-wrap svg { stroke: var(--gold); fill: none; }
.bagua-wrap.dim { opacity: .12; top: 46%; }

.mountain { left: 0; right: 0; bottom: 0; height: 42%; opacity: .9; }

/* ---------- 文字 ---------- */
.eyebrow {
  font-family: var(--kai);
  font-size: clamp(13px, 3.5vw, 17px);
  letter-spacing: .34em; text-indent: .34em;
  color: var(--gold); opacity: .9;
}
.eyebrow i, .sub i, .when i { font-style: normal; color: var(--gold-deep); }

.kicker {
  font-family: var(--kai);
  font-size: clamp(13px, 3.6vw, 17px);
  letter-spacing: .5em; text-indent: .5em;
  color: var(--gold); opacity: .85;
  margin-bottom: clamp(14px, 4vw, 22px);
}

.bigtitle {
  font-family: var(--brush);
  font-weight: 400;
  font-size: clamp(44px, 13vw, 76px);
  line-height: 1.28;
  letter-spacing: .04em;
  margin: clamp(20px, 6vw, 34px) 0 0;
}
.bigtitle .line {
  display: block;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 48%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(60, 14, 8, .5);
  filter:
    drop-shadow(0 0 14px rgba(255, 224, 150, .45))
    drop-shadow(0 0 34px rgba(210, 150, 60, .3));
}

.rule {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: clamp(16px, 4.5vw, 24px) 0;
}
.rule i { width: clamp(56px, 20vw, 110px); height: 1px;
          background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.rule b { width: 7px; height: 7px; transform: rotate(45deg);
          border: 1px solid var(--gold); display: block; }

.sub {
  font-family: var(--kai);
  font-size: clamp(18px, 5vw, 26px);
  letter-spacing: .14em;
  color: var(--gold-hi);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}
.when {
  margin-top: clamp(14px, 4vw, 22px);
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: .1em;
  color: var(--gold); opacity: .85;
}

/* 缘起页 / 内页大句 */
.quote {
  font-family: var(--kai);
  font-weight: 400;
  font-size: clamp(24px, 7.2vw, 38px);
  line-height: 1.62;
  letter-spacing: .03em;
  color: var(--gold-hi);
  text-shadow: 0 2px 18px rgba(0,0,0,.7);
}
.quote.sm { font-size: clamp(21px, 6.2vw, 32px); }

.answer { margin-top: clamp(6px, 2vw, 10px); }
.answer p {
  font-family: var(--kai);
  font-size: clamp(15px, 4.3vw, 20px);
  line-height: 2.05;
  color: var(--paper); opacity: .92;
}

/* ---------- 六讲 ---------- */
.lessons { list-style: none; margin-top: clamp(18px, 5vw, 28px); text-align: left; }
.lessons li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: clamp(9px, 2.6vw, 13px) 4px;
  border-bottom: 1px solid rgba(226, 186, 108, .16);
}
.lessons li:last-child { border-bottom: 0; }
.lessons b {
  flex: none; width: clamp(26px, 7.5vw, 32px); height: clamp(26px, 7.5vw, 32px);
  line-height: calc(clamp(26px, 7.5vw, 32px) - 2px);
  text-align: center; font-weight: 400;
  border: 1px solid var(--gold-dim); border-radius: 3px;
  color: var(--gold); font-size: clamp(12px, 3.4vw, 15px);
}
.lessons .tx {
  display: block; font-family: var(--kai);
  font-size: clamp(16px, 4.6vw, 21px); color: var(--gold-hi); line-height: 1.45;
}
.lessons em {
  display: block; font-style: normal;
  font-family: var(--sans);
  font-size: clamp(11.5px, 3.2vw, 14px);
  color: var(--paper); opacity: .58; line-height: 1.6; margin-top: 3px;
}

/* ---------- 传承页（内容比六讲多，字号整体压一档防溢出） ---------- */
.lineage .quote.sm    { font-size: clamp(19px, 5.4vw, 27px); }
.lineage .lessons     { margin-top: clamp(12px, 3.5vw, 20px); }
.lineage .lessons li  { padding: clamp(7px, 2vw, 11px) 4px; gap: 10px; }
.lineage .lessons b   { width: clamp(23px, 6.4vw, 28px); height: clamp(23px, 6.4vw, 28px);
                        line-height: calc(clamp(23px, 6.4vw, 28px) - 2px);
                        font-size: clamp(11px, 3vw, 14px); }
/* 字号压到能在 390px 窄屏一行放下「河洛 · 八宅 · 纳气 · 八卦 · 面相风水」 */
.lineage .lessons .tx { font-size: clamp(12.5px, 3.6vw, 16px); line-height: 1.5; }

/* ---------- 主讲 ---------- */
.portrait {
  width: clamp(124px, 34vw, 156px);
  aspect-ratio: 1;
  margin: clamp(8px, 2.5vw, 14px) auto 0;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gold-line);
  box-shadow:
    0 0 0 5px rgba(240, 207, 130, .06),
    0 0 30px rgba(210, 150, 60, .26);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.teacher-line {
  font-family: var(--kai);
  font-size: clamp(14px, 4vw, 18px);
  line-height: 2; color: var(--paper); opacity: .92;
  margin-top: clamp(14px, 4vw, 20px);
}
.teacher-line em { font-style: normal; color: var(--gold); }
.teacher-line .todo { font-family: var(--sans); font-size: .82em; opacity: .55; }

.oath {
  font-family: var(--kai);
  font-size: clamp(15px, 4.4vw, 20px);
  line-height: 2.1;
  color: var(--paper); opacity: .9;
}
.oath .hl { color: var(--gold); }

/* ---------- 报名 ---------- */
.detail {
  margin-top: clamp(16px, 4.5vw, 24px);
  border-top: 1px solid var(--gold-dim);
  border-bottom: 1px solid var(--gold-dim);
  padding: clamp(8px, 2.5vw, 12px) 0;
}
.detail .row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: clamp(7px, 2vw, 10px) 2px; text-align: left;
}
.detail .k {
  flex: none; width: 3.4em; color: var(--gold);
  font-size: clamp(12.5px, 3.5vw, 15px); letter-spacing: .1em;
}
.detail .v {
  font-family: var(--kai);
  font-size: clamp(14px, 3.9vw, 17px);
  color: var(--gold-hi); line-height: 1.6;
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: clamp(14px, 4vw, 20px) auto 0;
  padding: clamp(12px, 3.4vw, 15px) 16px;
  font-family: var(--kai); font-size: clamp(15px, 4.2vw, 19px); letter-spacing: .1em;
  color: var(--gold-hi); text-decoration: none;
  border: 1px solid var(--gold-line); border-radius: 4px;
  background: linear-gradient(180deg, rgba(240,207,130,.14), rgba(240,207,130,.04));
  transition: transform .18s ease, background .25s ease;
}
.btn:active { transform: scale(.985); background: rgba(240,207,130,.2); }
.btn .pin { color: var(--gold); font-size: .85em; }

.signup-form { margin-top: clamp(14px, 4vw, 20px); }
.field {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(226,186,108,.22);
  padding: clamp(9px, 2.6vw, 12px) 2px;
}
.field label {
  flex: none; width: 3.6em; text-align: left;
  font-size: clamp(12.5px, 3.5vw, 15px); letter-spacing: .1em; color: var(--gold);
}
.field input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: none;
  font-family: var(--kai); font-size: clamp(15px, 4.1vw, 18px);
  color: var(--gold-hi);
}
.field input::placeholder { color: rgba(242,224,188,.32); }
.field:focus-within { border-bottom-color: var(--gold); }

.err {
  min-height: 1.4em; margin-top: 10px;
  font-size: clamp(12px, 3.3vw, 14px); color: var(--seal);
  letter-spacing: .04em;
}

.btn-submit {
  font-family: var(--brush);
  font-size: clamp(19px, 5.4vw, 25px);
  letter-spacing: .18em;
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(240,207,130,.2), rgba(120,80,20,.22));
  cursor: pointer;
  -webkit-appearance: none;
}
.btn-submit[disabled] { opacity: .55; }

/* 报名页：二维码居中放大 —— 表单已去掉，报名动作就是长按二维码加助教 */
.enroll { margin-top: clamp(16px, 4.5vw, 24px); text-align: center; }
.enroll .qr {
  width: clamp(158px, 45vw, 208px); margin: 0 auto;
  cursor: zoom-in;
}
.enroll-tip {
  margin-top: clamp(10px, 3vw, 14px);
  font-family: var(--kai); font-size: clamp(14px, 3.9vw, 17px);
  letter-spacing: .06em; color: var(--gold-hi);
}
.enroll-tip i { font-style: normal; color: var(--gold-deep); }
.enroll-sub {
  margin-top: 6px; line-height: 1.7;
  font-size: clamp(11.5px, 3.2vw, 14px); color: var(--paper); opacity: .82;
}

/* 点二维码 → 全屏放大，长按识别更容易 */
#qr-mask {
  position: fixed; inset: 0; z-index: 99;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 4, 5, .9);
}
#qr-mask.on { display: flex; }
#qr-mask .qr-big {
  width: min(76vw, 320px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--gold); border-radius: 8px;
  background: linear-gradient(150deg, #f9e7bb 0%, #eed49a 46%, #d9b45c 100%);
  box-shadow: 0 0 40px rgba(210, 150, 60, .3);
}
#qr-mask .qr-big img {
  width: 100%; height: 100%; object-fit: contain; padding: 7%;
  mix-blend-mode: multiply;
}

/* 报名成功 */
.done { margin-top: clamp(16px, 4.5vw, 22px); }
.done-t {
  font-family: var(--brush); font-size: clamp(21px, 6vw, 28px);
  color: var(--gold-hi);
}
.done-s {
  font-family: var(--kai); font-size: clamp(14px, 3.8vw, 17px);
  color: var(--paper); opacity: .88; margin-top: 10px; line-height: 1.85;
}
.qr {
  width: clamp(140px, 42vw, 190px); aspect-ratio: 1;
  margin: clamp(14px, 4vw, 20px) auto 0;
  /* 金色底 + 图片 multiply 混合：二维码的白色部分透成金色，与整体色调统一，黑码仍可扫 */
  background: linear-gradient(150deg, #f9e7bb 0%, #eed49a 46%, #d9b45c 100%);
  border: 1px solid var(--gold);
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(240, 207, 130, .07), 0 0 22px rgba(210, 150, 60, .22);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.qr img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  padding: 7%;                 /* 留出静区，扫码才稳 */
  mix-blend-mode: multiply;
}

/* ---------- 上滑提示 ---------- */
.swipe {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 34px);
  text-align: center; color: var(--gold); opacity: .8;
}
.swipe span {
  font-family: var(--kai); font-size: clamp(11px, 3.1vw, 13px);
  letter-spacing: .34em; text-indent: .34em;
}
.swipe i {
  display: block; width: 1px; height: 26px; margin: 8px auto 0;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: swipeDown 1.9s ease-in-out infinite;
}
@keyframes swipeDown {
  0%, 100% { transform: translateY(0); opacity: .3; }
  45%      { transform: translateY(9px); opacity: 1; }
}

#hint {
  position: fixed; z-index: 9; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 22px);
  font-family: var(--kai); font-size: 12px; letter-spacing: .3em;
  color: var(--gold); opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
#hint.show { opacity: .55; }

/* ---------- 进度点 ---------- */
#dots {
  position: fixed; z-index: 10; right: 12px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 11px;
}
#dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(226,186,108,.3);
  transition: background .3s ease, transform .3s ease;
}
#dots i.on { background: var(--gold); transform: scale(1.7); }

/* ---------- 音乐按钮 ---------- */
#music-btn {
  position: fixed; z-index: 10;
  top: calc(env(safe-area-inset-top) + 16px); right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,10,12,.55);
  border: 1px solid var(--gold-dim);
  cursor: pointer; -webkit-appearance: none;
  transition: border-color .25s ease;
}
#music-btn[aria-pressed="true"] { border-color: var(--gold); }
#music-btn .bars { display: flex; align-items: flex-end; gap: 2.5px; height: 14px; }
#music-btn .bars i {
  width: 2.5px; height: 4px; background: var(--gold); opacity: .5;
  transition: opacity .25s ease;
}
#music-btn[aria-pressed="true"] .bars i { opacity: 1; animation: eq .9s ease-in-out infinite; }
#music-btn[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: .18s; }
#music-btn[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: .36s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* ---------- 入场动画 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .95s cubic-bezier(.2,.7,.3,1), transform .95s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.page.active .reveal { opacity: 1; transform: none; }

.page.active .reveal.d1 { transition-delay: .12s; }
.page.active .reveal.d2 { transition-delay: .26s; }
.page.active .reveal.d3 { transition-delay: .40s; }
.page.active .reveal.d4 { transition-delay: .54s; }
.page.active .reveal.d5 { transition-delay: .68s; }
.page.active .reveal.d6 { transition-delay: .82s; }

/* 主标题额外一点"逐行落下"的味道 */
.bigtitle .line { transition-duration: 1.15s; }

/* 尊重系统的减少动效设置 */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .swipe i, #music-btn .bars i { animation: none !important; }
  #dust { display: none; }
}

/* 横屏 / 大屏兜底 */
@media (min-height: 900px) {
  .page-inner { max-width: 600px; }
}