/* ==========================================================
   婚礼请柬 H5 · 完全参照画板1 / 画板3
   字体映射（源自 AI 源文件解析）：
   Annabelle = 标题花体 / Mistral = 手写体 / STLiti = 数字隶书
   Qimeng = 绮梦手迹 / XBSong = 方正小标宋
   ========================================================== */
@font-face {
  font-family: "Annabelle";
  src: url("../assets/fonts/annabelle.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Mistral";
  src: url("../assets/fonts/mistral.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Qimeng";
  src: url("../assets/fonts/qimeng.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "XBSong";
  src: url("../assets/fonts/xiaobiaosong.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "STLiti";
  src: url("../assets/fonts/stliti.woff2") format("woff2");
  font-display: swap;
}

:root {
  --cream: #ece8e5;        /* 画板1 封面底 */
  --cream-light: #f4f1ee;  /* 画板3 表单底 */
  --maroon: #500d13;       /* 主酒红（画板红块）*/
  --maroon-2: #6e2027;     /* 波浪次层 */
  --brown: #42210b;        /* 棕褐文字（Thank you/标签/按钮字）*/
  --gold: #8f6f42;         /* Haowei & Zeng Min 金棕 */
  --date-brown: #603813;   /* 2026/11.1 小字 */
  --ink: #33272a;          /* 人名近黑 */
  --hand-ink: #2e2c29;     /* 手写深墨 */
  --frame: rgba(117, 76, 36, .55);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: #d9d2cd;
  font-family: "XBSong", "STSongti-SC", serif;
  color: var(--brown);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  background: var(--cream);
  box-shadow: 0 0 30px rgba(0, 0, 0, .18);
  overflow: hidden;
  position: relative;
}

/* ---------- 通用 ---------- */
.script { font-family: "Annabelle", cursive; font-weight: normal; }
.thanks { font-family: "Annabelle", cursive; font-weight: normal; }

/* 入场动效 */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.reveal.on { opacity: 1; transform: none; }

/* ==========================================================
   封面（画板1 上半）
   ========================================================== */
.cover {
  padding: 10px 0 0;
  text-align: center;
}

.thanks {
  font-size: 19px;
  letter-spacing: .06em;
  color: var(--brown);
  padding: 6px 0 10px;
}

/* 圆角细线框 */
.cover-frame {
  position: relative;
  margin: 0 15px;
  border: 1px solid var(--frame);
  border-radius: 16px;
  padding: 30px 18px 42px;
  overflow: hidden;
}
.cover-frame > * { position: relative; z-index: 1; }

/* 背景大水印：Zhang Haowei / Zeng Min */
.watermark {
  position: absolute;
  left: 50%;
  top: 470px;
  transform: translateX(-50%);
  width: max-content;
  font-family: "Annabelle", cursive;
  font-size: 98px;
  line-height: 1.08;
  color: rgba(146, 112, 76, .13);
  pointer-events: none;
  z-index: 0 !important;
}

.title {
  font-size: 50px;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--maroon);
}

.date-sub {
  margin-top: 8px;
  font-family: "Times New Roman", Georgia, serif;
  font-style: italic;
  font-weight: normal;
  font-size: 19px;
  letter-spacing: .14em;
  color: var(--date-brown);
}

.love {
  margin-top: 10px;
  font-family: "Times New Roman", Georgia, serif;
  font-weight: normal;
  font-size: 14.5px;
  letter-spacing: .05em;
  color: var(--maroon);
}

.invite-line {
  margin-top: 20px;
  font-family: "Qimeng", "Kaiti SC", cursive;
  font-size: 27px;
  color: var(--hand-ink);
  letter-spacing: .12em;
}

/* 照片 + 手绘蝴蝶结（照搬画板：卡其相框 + 结扣在照片下缘、飘带垂出框外）*/
.photo-wrap {
  position: relative;
  margin: 24px auto 58px;
  width: 76%;
  background: #cfad8c;
  padding: 13px;
  box-shadow: 0 8px 22px rgba(80, 13, 19, .14);
}
.photo-wrap img { display: block; width: 100%; height: auto; }
img.bow {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateY(65%);
  width: 32%;
  height: auto;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18));
}

/* Haowei & Zeng Min（金棕 Annabelle）*/
.gold-script {
  font-family: "Annabelle", cursive;
  font-size: 21px;
  letter-spacing: .06em;
  color: var(--gold);
}

.names {
  font-family: "XBSong", serif;
  font-size: 31px;
  font-weight: normal;
  color: var(--ink);
  letter-spacing: .1em;
  margin-top: 10px;
}
.names .slash { color: #a4707a; font-weight: normal; margin: 0 8px; }

.rings { width: 116px; margin: 18px auto 10px; display: block; }

.handwrite {
  font-family: "Qimeng", "Kaiti SC", cursive;
  font-size: 29px;
  color: var(--hand-ink);
  letter-spacing: .12em;
}

/* ==========================================================
   波浪衔接
   ========================================================== */
.wave { line-height: 0; background: var(--cream); }
.wave svg { width: 100%; display: block; }
.wave-down svg { height: 96px; }
.wave-up { background: var(--cream-light); }
.wave-up svg { height: 118px; }

/* ==========================================================
   酒红区（画板1 下半 + 画板3 上半）
   ========================================================== */
.red-block {
  background: linear-gradient(180deg, #5a1119, var(--maroon) 55%);
  color: #f3ece4;
  text-align: center;
  padding: 0 30px 60px;
}

.red-block .lg { font-size: 37px; letter-spacing: .03em; display: block; }
.red-block .sm { font-size: 19px; opacity: .92; letter-spacing: .08em; margin-top: 10px; display: block; }
.red-block .nov { margin-top: 2px; font-size: 17px; font-style: italic; letter-spacing: .05em; }

.big-date {
  font-family: "Times New Roman", Georgia, serif;
  font-size: 46px;
  letter-spacing: .04em;
  margin-top: 8px;
  color: #fdfaf5;
}

.lunar {
  margin-top: 26px;
  font-size: 15px;
  letter-spacing: .22em;
  opacity: .95;
}

/* 导航 / 日历按钮：画板上没有，已按"完全参照画板"要求移除 */

/* 画板3 上半：地点 / 时间（与画板1底部红色连续，纯色无缝）*/
.red-block.info { background: var(--maroon); padding: 40px 30px 40px; }

.label {
  font-size: 17px;
  letter-spacing: .3em;
  color: #f3ece4;
  margin-bottom: 20px;
}
.label .en { font-size: 17px; letter-spacing: .04em; margin-left: 10px; color: #c9989e; }
.label.gap { margin-top: 56px; }

.loc-name {
  font-family: "XBSong", serif;
  font-size: 27px;
  line-height: 1.55;
  letter-spacing: .1em;
  color: #fdfaf5;
}
.loc-mid { font-size: 22px; }
.loc-name .num, .time .num { font-family: "Times New Roman", Georgia, serif; letter-spacing: .04em; }

.time {
  font-family: "XBSong", serif;
  font-size: 16px;
  letter-spacing: .18em;
  color: #fdfaf5;
}

/* ==========================================================
   回执（画板3 下半）
   ========================================================== */
.rsvp {
  position: relative;
  background: var(--cream-light);
  padding: 8px 34px 40px;
  text-align: center;
  overflow: hidden;
}
.rsvp > * { position: relative; z-index: 1; }

.wm-rsvp {
  top: 60px;
  font-size: 72px;
  color: rgba(146, 112, 76, .12);
}

.rsvp-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-family: "XBSong", serif;
  font-weight: normal;
  font-size: 21px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--brown);
  margin-top: 26px;
}
.rsvp-title i { flex: 1; max-width: 84px; height: 1px; background: rgba(117, 76, 36, .5); }

.rsvp form { margin-top: 30px; text-align: left; }

.field { display: block; margin-bottom: 22px; }
.field.center { text-align: center; }
.field span {
  display: block;
  font-size: 14px;
  letter-spacing: .18em;
  color: var(--brown);
  margin-bottom: 10px;
}
.field input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #b9a58f;
  border-radius: 10px;
  background: #fdfcfa;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  outline: none;
  -webkit-appearance: none;
}
.field.center input { width: 150px; text-align: center; }
.field input:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(80, 13, 19, .08); }

.form-err {
  color: var(--maroon);
  font-size: 13px;
  letter-spacing: .06em;
  margin: -6px 0 12px;
}

/* 提交按钮：米白底 + 深棕字（与画板3一致）*/
.submit {
  width: 100%;
  padding: 13px;
  border: 1px solid #d8cec0;
  border-radius: 10px;
  background: #f2efe9;
  color: var(--brown);
  font-family: "XBSong", serif;
  font-size: 17px;
  letter-spacing: .5em;
  text-indent: .5em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.submit:active { background: #e9e4da; }
.submit[disabled] { opacity: .6; }

.rsvp-ok { padding: 26px 0 10px; }
.ok-emoji { font-size: 40px; }
.ok-title {
  margin-top: 10px;
  font-family: "XBSong", serif;
  font-size: 21px;
  letter-spacing: .3em;
  color: var(--maroon);
}
.ok-text { margin-top: 8px; color: var(--brown); font-size: 14px; letter-spacing: .1em; }

.foot {
  margin-top: 40px;
  font-size: 16px;
  color: #6b2a2a;
  letter-spacing: .06em;
}

/* 桌面端窄屏预览 */
@media (min-width: 500px) {
  body { padding: 24px 0; }
}

/* ==========================================================
   背景音乐飘浮按钮 —— 黑色唱片
   ========================================================== */
.bgm-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 黑胶盘：中心孔 → 酒红标签 → 黑色盘面 */
  background: radial-gradient(circle at 50% 50%,
              #f4f1ee 0 3px,
              var(--maroon) 3px 24%,
              #0a0a0a 24% 100%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .10) inset;
  animation: bgm-spin 4s linear infinite;
  animation-play-state: paused;   /* 暂停态不转，播放时转动 */
}
.bgm-btn.on { animation-play-state: running; }
/* 盘面同心纹路 */
.bgm-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
              rgba(255, 255, 255, .05) 0 1px,
              rgba(0, 0, 0, 0) 1px 4px);
  pointer-events: none;
}
/* 标签上的音符 */
.bgm-btn .bgm-ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #f4f1ee;
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}
@keyframes bgm-spin { to { transform: rotate(360deg); } }