/* 赤耘生活帮 · 邀请 V2 — A 开麦 / B 庆典暖红 */

/* ---------- 字体：仅本地 ---------- */
@font-face {
  font-family: "Noto Serif SC Local";
  src: url("assets/fonts/noto-serif-sc-900.woff2?v=7bcbc76cacb4") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC Local";
  src: url("assets/fonts/noto-sans-sc.woff2?v=e7a454d17136") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed Local";
  src: url("assets/fonts/barlow-condensed-600.woff2?v=ec1f9f5f64fa") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 基础 ---------- */
[hidden] { display: none !important; }

:root {
  --serif: "Noto Serif SC Local", "Noto Serif SC", "Songti SC", serif;
  --sans: "Noto Sans SC Local", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --num: "Barlow Condensed Local", "Barlow Condensed", "Arial Narrow", sans-serif;
  --col: 560px;
  --pad: 20px;
  --gap-root: 112px;          /* 照片间供根系穿行的空隙 90–130 */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html[data-direction="A"] {
  --bg: #EDF2F7;
  --ink: #14243B;
  --muted: #4E5D72;
  --accent: #FF6A1F;
  --accent-ink: #B8420A;     /* 小字橙，对底色 ≥4.5 */
  --root: #2E7A57;
  --vine: #2E7A57;
  --hi: #FFC93C;
  --surface: #FFFFFF;
  --line: rgba(20, 36, 59, .14);
  --ok: #2E7A57;
  --err: #B42318;
  --focus: #14243B;
}
/* B：整页同一套暖红 / 香槟金；底色亮度全程与首屏相近，正文、次要文字对各阶段底色 ≥4.5 */
html[data-direction="B"] {
  --bg: #A62A2C;
  --ink: #FFF4DD;
  --muted: #FFF0DB;
  --accent: #FFE2A3;
  --accent-ink: #FFE2A3;
  --root: #FFD58A;
  --vine: #FFD894;           /* 主干/叶/生长头，随阶段由 motion.js 在同一金色族内改写 */
  --hi: #FFC15E;
  --surface: #8B2429;
  --line: rgba(255, 226, 163, .26);
  --ok: #FFEBB0;
  --err: #FFC2AE;
  --focus: #FFE2A3;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main, .topbar {
  max-width: var(--col);
  margin-inline: auto;
}
main { position: relative; padding-bottom: calc(48px + var(--safe-b)); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
p, h1, h2, figure, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  padding: 10px 16px; min-height: 44px;
  background: var(--ink); color: var(--bg);
  border-radius: 8px; text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: 12px; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--pad) 6px;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; text-decoration: none;
  font-weight: 500; font-size: 15px; letter-spacing: .04em;
}
.brand__logo {
  width: 36px; height: 36px; object-fit: contain;
  filter: url(#logo-knockout);
}
.switcher {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 2px 4px; max-width: 58%;
}
.switcher__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.switcher__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font-size: 14px; text-decoration: none; border-radius: 999px; white-space: nowrap;
  color: var(--muted);
}
.switcher__link[aria-current="page"] {
  color: var(--ink); font-weight: 500;
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.switcher__note {
  flex-basis: 100%; text-align: right;
  font-size: 13px; line-height: 1.3; color: var(--muted);
}

/* ---------- 开场 ---------- */
.opening {
  position: relative;
  display: flex; flex-direction: column;
  padding: 4px var(--pad) 0;
}
.hero__kicker {
  font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: .12em;
}
.hero__title { font-family: var(--serif); }
.hero__line { display: block; }
.hero__date { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.hero__date-num {
  font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); line-height: 1; letter-spacing: .01em;
}
.hero__event { font-size: 15px; font-weight: 500; }
.hero__lede { font-size: 16px; color: var(--muted); }
.hero__jump {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  font-weight: 500; font-size: 16px; text-decoration: none;
  align-self: flex-start;
  transition: transform .2s ease, background-color .2s ease;
}
.hero__jump::after { content: "↓"; font-family: var(--num); font-size: 18px; }
.hero__jump:active { transform: translateY(1px); }

/* A：照片在前，900 大字落在照片下沿外 */
html[data-direction="A"] .bloom { display: none; }
html[data-direction="A"] .photo--opening { order: 1; margin: 6px 0 0; }
html[data-direction="A"] .opening__hero[data-hero-for="A"] { order: 2; margin-top: 18px; }
html[data-direction="A"] .opening__meta { order: 3; }
html[data-direction="A"] .photo--opening .photo__caption { margin-top: 8px; }
html[data-direction="A"] .photo--opening .photo__line { display: none; }
html[data-direction="A"] .hero__kicker { display: none; }
html[data-direction="A"] .hero__title {
  font-weight: 900; font-size: clamp(34px, 10.4vw, 52px);
  line-height: 1.05; letter-spacing: -.02em;
}
html[data-direction="A"] .hero__line:last-child { padding-left: .9em; }
html[data-direction="A"] .opening__meta {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 14px; row-gap: 8px; margin-top: 14px;
}
html[data-direction="A"] .hero__date { grid-column: 1 / -1; }
html[data-direction="A"] .hero__date-num { font-size: 44px; color: var(--accent); }
html[data-direction="A"] .hero__event { color: var(--ink); }
html[data-direction="A"] .hero__lede { grid-column: 1; }
html[data-direction="A"] .hero__jump {
  grid-column: 2; grid-row: 2;
  background: var(--accent); color: #1B0E05;
}
html[data-direction="A"] .hero__jump:hover { background: #FF7F3D; }
html[data-direction="A"] .opening::after {
  /* 话筒橙色短条：A 唯一装饰 */
  content: ""; order: 4; width: 56px; height: 4px; margin: 26px 0 0;
  background: var(--hi); border-radius: 2px;
}

/* B 开场：周年庆暖红 / 香槟金；只调整开场的视觉范围。 */
html[data-direction="A"] .sprout-stage,
.hero-arc { display: none; }
html[data-direction="B"] .topbar { justify-content: center; padding-block: 14px 6px; }
html[data-direction="B"] .brand { gap: 10px; }
html[data-direction="B"] .brand__logo { width: 32px; height: 32px; }
html[data-direction="B"] .opening {
  min-height: 0; padding: 0 var(--pad);
  /* 首行大字：窄屏按宽、矮屏按高取小，保证整张封面一屏装下 */
  --title-fs: clamp(56px, min(24vw, calc(var(--vh0, 100svh) * .115)), 96px);
  --stage-h: clamp(108px, min(32vw, calc(var(--vh0, 100svh) * .165)), 148px);
}
html[data-direction="B"] .opening__hero[data-hero-for="B"] {
  order: 1; position: relative; z-index: 1; text-align: center;
}
html[data-direction="B"] .hero__kicker { display: none; }
html[data-direction="B"] .hero__title { margin: 0; color: #FFE2A3; font-weight: 900; }
html[data-direction="B"] .hero__line:first-child {
  font-size: var(--title-fs); line-height: 1.16; letter-spacing: .015em;
}
/* 品牌名 / 全员大会 / 10.25：同一字样 Noto Sans SC 400 · 20px · 淡金；负右距抵消末字字距，字形真居中 */
html[data-direction="B"] .brand__name,
html[data-direction="B"] .hero__line:last-of-type,
html[data-direction="B"] .hero__date-num {
  font: 400 20px/1.5 var(--sans); letter-spacing: .16em; margin-right: -.16em; color: #F3DDA6;
}
html[data-direction="B"] .hero__line:last-of-type { margin-top: 6px; }
html[data-direction="B"] .hero__line:only-of-type { padding-left: 0; }
html[data-direction="B"] .opening__meta { order: 2; position: relative; z-index: 1; margin-top: 2px; }
html[data-direction="B"] .hero__date { justify-content: center; }
html[data-direction="B"] .hero__event { display: none; }
/* 播种带：日期与 R01 之间的专用空带，田垄线、三株苗、彩屑只在带内，不压任何文字 */
html[data-direction="B"] .sprout-stage { order: 5; width: 100%; height: var(--stage-h); flex: none; }
html[data-direction="B"] .photo--opening {
  order: 4; margin-top: 28px; width: 86%; align-self: flex-end; text-align: left;
  --back-x: 0px; --back-y: 0px;
}
html[data-direction="B"] .photo--opening .photo__frame {
  padding: 4px; border: 1px solid #E8B575; border-radius: 3px;
  background: #8B2429; box-shadow: none;
}
html[data-direction="B"] .photo--opening .photo__frame img { outline: none; }
html[data-direction="B"] .photo--opening .photo__caption { margin-top: 12px; }
html[data-direction="B"] .photo--opening .photo__date { color: #FFE2A3; }
html[data-direction="B"] .photo--opening .photo__topic { color: #FFF4DD; }
html[data-direction="B"] .photo--opening .photo__line { color: #FFF4DD; font-size: 15px; }
/* 田垄线：main 坐标绝对层，在文字之后；与主干同色同宽、同样带一层淡光晕，交接处看不出接缝 */
html[data-direction="B"] .hero-arc {
  display: block; position: absolute; left: 0; top: 0; width: 100%; height: 0;
  z-index: 0; pointer-events: none; overflow: visible;
}
.hero-arc > path { fill: none; stroke: var(--vine); stroke-linecap: round; stroke-linejoin: round; }
.hero-arc__mid { display: none; }
.hero-arc__wide { stroke-width: 9; opacity: .14; stroke-linecap: butt; }
.hero-arc__core { stroke-width: 2.4; }

/* ---------- B 封面：占满首屏（减去顶栏 64px），弹簧留白按 上 1 : 中 .95 : 下 .75 分；
 * 种子按钮叠在播种带上（同高、负外边距），点之前是按钮，点之后同一块地方长出田垄，不留空洞 ---------- */
.cover { display: contents; }
.cover__gap, .cover__tap, .cover__cue { display: none; }
html[data-direction="B"] .cover {
  display: flex; flex-direction: column; position: relative;
  min-height: calc(100vh - 64px); min-height: calc(var(--vh0, 100svh) - 64px);   /* --vh0：开场屏高，弹键盘不变（见 index.html） */
}
html[data-direction="B"] .cover__gap { display: block; flex: 1 1 0; min-height: 6px; }
html[data-direction="B"] .cover__gap--a { order: 0; flex-grow: 1; }
html[data-direction="B"] .cover__gap--b { order: 3; flex-grow: .95; }
html[data-direction="B"] .cover__gap--c { display: none; }
html[data-direction="B"] .cover__gap--d { order: 7; flex-grow: .3; }
/* 种子按钮：一粒发光的种子 + 两圈外扩的光环；整张封面都能点，按钮负责焦点与读屏 */
html[data-direction="B"] .cover__tap {
  order: 6; position: relative; z-index: 2; align-self: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: var(--stage-h); margin-top: calc(-1 * var(--stage-h)); padding: 0 18px; border: 0; background: none; cursor: pointer;
  font: 400 15px/1.5 var(--sans); letter-spacing: .24em; color: #F3DDA6;
  -webkit-tap-highlight-color: transparent;
}
html[data-direction="B"] .cover__tap-text { margin-right: -.24em; }
.cover__seed { position: relative; width: 48px; height: 48px; display: grid; place-items: center; }
.cover__seed b {
  width: 11px; height: 15px; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #FFFBEF, #FFE2A3 55%, #E9B160);
  box-shadow: 0 0 10px 3px rgba(255, 216, 148, .7), 0 0 26px 6px rgba(255, 200, 120, .25);
}
.cover__seed i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255, 226, 163, .75); opacity: 0;
}
html[data-direction="B"][data-gate="closed"] .cover__seed b { animation: seed-bob 2.4s ease-in-out infinite; }
html[data-direction="B"][data-gate="closed"] .cover__seed i { animation: seed-ring 2.4s ease-out infinite; }
html[data-direction="B"][data-gate="closed"] .cover__seed i + i { animation-delay: .8s; }
html[data-direction="B"][data-gate="closed"] .cover__tap-text { animation: tap-breathe 2.4s ease-in-out infinite; }
@keyframes seed-bob { 50% { transform: translateY(-3px); } }
@keyframes seed-ring { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes tap-breathe { 50% { opacity: .62; } }
/* 往下看看：开门后浮出，滑走就收 */
/* 往下看看：田垄写完、门一开就浮出（底部居中，箭头轻跳）；线头停在垄末端呼吸，往下滑主干才长出来；滑走就收 */
html[data-direction="B"] .cover__cue {
  order: 8; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin: 0 -.3em 14px 0; font: 400 13px/1.4 var(--sans); letter-spacing: .3em; color: rgba(243, 221, 166, .86);
  opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); pointer-events: none;
}
html[data-direction="B"] .cover__cue i {
  width: 9px; height: 9px; margin-right: .3em; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
html[data-direction="B"][data-cue="on"] .cover__cue { opacity: 1; transform: none; }
html[data-direction="B"][data-cue="on"] .cover__cue i { animation: cue-bob 1.8s ease-in-out infinite; }
@keyframes cue-bob { 50% { transform: translateY(5px) rotate(45deg); } }
html[data-direction="B"][data-cue="on"] .root-svg__tip { animation: tip-breathe 1.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tip-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(3px) scale(1.35); } }
/* 封面门：没点之前锁住滚动，下面的内容不显示 */
html:is([data-gate="closed"], [data-gate="sowing"]), html:is([data-gate="closed"], [data-gate="sowing"]) body { overflow: hidden; overscroll-behavior: none; }
html[data-direction="B"]:is([data-gate="closed"], [data-gate="sowing"]) :is(.photo--opening, .story, .chorus, .invite) { visibility: hidden; }
/* 三株苗长好后随风轻摇（只在封面看得见时） */
html[data-direction="B"][data-hero-live="on"] .mg-sprout.is-swaying { animation: sway var(--sw-d, 3.6s) ease-in-out infinite; }
/* 从 0° 起摆，加上类名那一刻不跳 */
@keyframes sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(var(--sw-a, 3deg)); } 75% { transform: rotate(calc(var(--sw-a, 3deg) * -1)); } }
.mg-sprout { transform-box: view-box; }
.mg-soil { fill: #F3DDA6; opacity: .5; }
.mg-grass { fill: none; stroke: var(--vine); stroke-width: 1.1; stroke-linecap: round; opacity: .7; }
/* 线头彗尾 / 收尾烟花的画布：固定在视口，只在有粒子时画 */
.spark-canvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* 收尾时整屏暖金一闪 */
.gold-flash {
  /* 只 32vmax 见方、动画里放大到 2~3.2 倍：光栅化面积小（手机上约 2.6MB 纹理），放大交给合成器（柔光糊一点无妨）。
   * motion.js 在彗尾一起步就把它建好，收尾时层早已就绪 */
  position: fixed; left: 0; top: 0; width: 32vmax; height: 32vmax; margin: -16vmax 0 0 -16vmax;
  z-index: 0; pointer-events: none; opacity: 0; will-change: opacity, transform;
  background: radial-gradient(closest-side, rgba(255, 226, 160, .55), rgba(255, 196, 110, .18) 45%, transparent);
}
/* 线的尽头点亮「门开着，茶也热着」：motion.js 临时放进两扇窗（.lit-band），窗里是亮金副本（.lit-copy）。
 * 窗右移 + 斜切、副本做逆变换，两者相乘为单位阵：字不动、窗扫过；只动 transform，不重画文字 */
html[data-direction="B"] .invite__title { position: relative; }
.lit-band {
  position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; pointer-events: none;
  transform-origin: 0 0; animation: lit-band 1.5s cubic-bezier(.3, .1, .3, 1) both;
}
.lit-copy {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  text-shadow: 0 0 10px rgba(255, 217, 140, .9);
  animation: lit-copy 1.5s cubic-bezier(.3, .1, .3, 1) both;
}
@keyframes lit-band { from { transform: translateX(var(--a)) skewX(-14deg); } to { transform: translateX(var(--b)) skewX(-14deg); } }
@keyframes lit-copy { from { transform: skewX(14deg) translateX(calc(var(--a) * -1)); } to { transform: skewX(14deg) translateX(calc(var(--b) * -1)); } }
/* ---------- B 主视觉：光芒 / 描边大 3 / 金字扫光 / 星点 ----------
 * 全部只动 transform / opacity；光芒层光栅化一次后由合成器旋转。aura 自带裁切，宽出屏幕不产生横向滚动 */
html[data-direction="B"] .opening__hero[data-hero-for="B"] { padding-top: 4px; }
html[data-direction="B"] .hero__aura {
  position: absolute; z-index: -1; pointer-events: none; overflow: hidden;
  left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: -150px; height: 400px;
}
html[data-direction="B"] .hero__rays-wrap,
html[data-direction="B"] .hero__ghost,
html[data-direction="B"] .hero__flash { position: absolute; left: 50%; top: 232px; }
html[data-direction="B"] .hero__rays-wrap { display: block; width: 0; height: 0; }
/* 光芒是一张烤好的透明图（光晕 + 24 道光 + 径向渐隐，生成脚本 work/v006-rays.py）。
 * 不用 conic-gradient + mask 现画：那样和星点叠加时滚动 p95 会到 33ms */
html[data-direction="B"] .hero__rays {
  position: absolute; left: -260px; top: -260px; width: 520px; height: 520px;
  background: url("assets/media/rays.webp") center / 100% 100% no-repeat;
  will-change: transform;
}
html[data-direction="B"][data-hero-live="on"] .hero__rays { animation: rays-spin 80s linear infinite; }
@keyframes rays-spin { to { transform: rotate(360deg); } }
/* 大「3」做实心淡水印：只是一块更亮的底，不画轮廓线，压在字后也不显乱 */
html[data-direction="B"] .hero__ghost {
  transform: translate(-50%, -50%);
  font: 600 clamp(300px, 92vw, 380px)/1 var(--num);
  color: rgba(255, 226, 163, .075);
}
html[data-direction="B"] .hero__flash {
  width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 222, .9), rgba(255, 214, 140, .35) 45%, transparent);
  opacity: 0;
}
html[data-direction="B"] .hero__mark {
  margin: 0 -.46em 2px 0; font: 600 12px/1.4 var(--num); letter-spacing: .46em;
  color: rgba(255, 226, 163, .78);
}
html[data-direction="B"] .hero__title { position: relative; }
html[data-direction="B"] .hero__line:first-child { filter: drop-shadow(0 6px 16px rgba(72, 6, 12, .42)); }
html[data-direction="B"] .hero__char { display: inline-block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* 金面：上亮下沉的静态渐变。不要动 background-position 做扫光——每帧重绘，4 倍降速下滚动 p95 翻到 50ms */
  html[data-direction="B"] .hero__char {
    background: linear-gradient(172deg, #FFE6AA 6%, #F6C470 50%, #DE9A45 96%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
}
/* 扫光：标题首行上叠一份亮色副本，外面套一个只露一窄条的窗口（自带柔边遮罩）。
 * 窗口往右走、副本反向走同样距离，字形停在原位、只有光在动；两者都只改 transform，交给合成器 */
html[data-direction="B"] .hero__shine {
  position: absolute; left: 0; top: 0; width: 100%; height: 1.16em; pointer-events: none; font-style: normal;
  font-size: var(--title-fs); line-height: 1.16; letter-spacing: .015em;
}
html[data-direction="B"] .hero__shine-win {
  position: absolute; left: -30%; top: 0; bottom: 0; width: 30%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000 55%, transparent);
  will-change: transform;
}
html[data-direction="B"] .hero__shine-text {
  position: absolute; left: 100%; top: 0; width: 333.334%; text-align: center; white-space: nowrap;
  color: #FFFDF7; text-shadow: 0 0 14px rgba(255, 244, 214, .9); will-change: transform;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-direction="B"] .hero__shine { display: none; }
}
/* 全员大会两侧金色细线 */
html[data-direction="B"] .hero__line:last-of-type { display: flex; align-items: center; justify-content: center; gap: 14px; }
html[data-direction="B"] .hero__line:last-of-type::before,
html[data-direction="B"] .hero__line:last-of-type::after {
  content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #F3DDA6);
}
html[data-direction="B"] .hero__line:last-of-type::after { transform: scaleX(-1); }
/* 星点：四角各一颗四芒星，按 --x / --y 定位、--s 定大小，错开闪 */
html[data-direction="B"] .hero__glints { position: absolute; inset: 0; pointer-events: none; }
html[data-direction="B"] .hero__glints i {
  position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px;
  background: radial-gradient(closest-side, #FFFBEF, #FFE2A3 60%, transparent);
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  opacity: .6; transform: scale(var(--s));
}
html[data-direction="B"][data-hero-live="on"] .hero__glints i { animation: glint 3.6s ease-in-out infinite; }
html[data-direction="B"] .hero__glints i:nth-child(2) { animation-delay: -1.1s; }
html[data-direction="B"] .hero__glints i:nth-child(3) { animation-delay: -2.3s; }
html[data-direction="B"] .hero__glints i:nth-child(4) { animation-delay: -.5s; }
@keyframes glint {
  0%, 100% { opacity: .15; transform: scale(calc(var(--s) * .4)); }
  50% { opacity: 1; transform: scale(calc(var(--s) * 1.2)) rotate(45deg); }
}
/* 引子：日期下一句，接住「三周年」、引出种子落地 */
html[data-direction="B"] .hero__tagline {
  margin: 10px -.22em 0 0; text-align: center;
  font: 500 15px/1.6 var(--serif); letter-spacing: .22em; color: #F3DDA6;
}
.mg-stem { fill: none; stroke: var(--vine); stroke-width: 1.8; stroke-linecap: round; }
.mg-stem--bloom { stroke-width: 2; }
/* 第三年的花：渐变五瓣 + 奶白花心 + 金色花蕊；花心后一团柔光，花下地平线一片暖光 */
.mg-petal { fill: url(#mg-petal-g); stroke: rgba(255, 246, 222, .55); stroke-width: .5; }
.mg-core__disc { fill: #FFF7E2; }
.mg-stamen { fill: #E9A84C; }
.mg-glow { fill: url(#mg-glow-g); }
.mg-pool { fill: url(#mg-pool-g); }
.mg-ripple { fill: none; stroke: #FFF1CC; stroke-width: 1.1; }
.mg-seed { fill: #FFE2A3; }
.mg-seed { filter: drop-shadow(0 0 5px rgba(255, 216, 148, .85)); }

/* ---------- 照片（原比例、无滤镜） ---------- */
.photo { position: relative; z-index: 1; }
.photo__frame { overflow: hidden; border-radius: 6px; background: var(--surface); }
.photo__frame img { width: 100%; height: auto; object-fit: contain; }
.photo__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  margin-top: 10px; position: relative; z-index: 1;
}
.photo__date {
  font-family: var(--num); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.photo__topic { font-size: 15px; font-weight: 500; }
.photo__line {
  flex-basis: 100%; font-size: 15px; line-height: 1.6; color: var(--ink);
  font-family: var(--sans); font-weight: 500;
}
html[data-direction="B"] .photo__line { font-weight: 500; letter-spacing: normal; }
/* 实际暖光背景上的日期文字：奶白金保持可读性，主标题与线条金色保持不变。 */
html[data-direction="B"] .story .photo__date { color: #FFFDF5; }
html[data-direction="A"] .photo__frame { border-radius: 4px; box-shadow: 0 14px 28px -18px rgba(20, 36, 59, .45); }
/* B 装裱：外沿细线 + 6px 衬边 + 内沿细线（双层边）；错位底衬用实心偏移阴影，偏向远离主干一侧；
 * 支根落在外沿上一个节点。--back-* 同时供 motion.js 计算碰撞边界 */
.photo { --back-x: 0px; --back-y: 0px; }
html[data-direction="B"] .photo { --back-x: 8px; --back-y: 8px; }
html[data-direction="B"] .story__item[data-side="left"] .photo { --back-x: -8px; }
html[data-direction="B"] .photo__frame {
  padding: 6px; border: 1px solid rgba(240, 191, 128, .62); border-radius: 2px;
  background: rgba(139, 36, 41, .82);
  box-shadow: var(--back-x) var(--back-y) 0 0 rgba(255, 200, 120, .14);
}
html[data-direction="B"] .photo__frame img { outline: 1px solid rgba(255, 236, 200, .24); }
html[data-direction="B"] .photo__caption { margin-top: 18px; }
html[data-direction="B"] .photo--chorus .photo__frame {
  border-color: rgba(255, 206, 120, .78); box-shadow: var(--back-x) var(--back-y) 0 0 rgba(255, 196, 100, .18);
}

/* ---------- 故事与根系 ---------- */
.story {
  position: relative;
  padding: 0 var(--pad) 36px;   /* 底部实留白：根系末端落在最后文字之后 */
}
/* main 直属绝对层：height 由 motion.js 实测写入，不撑高页面。
 * 位于内容之上，但路径与叶片按真实几何绕开照片和文字；pointer-events 关闭 */
.root-svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  z-index: 2; pointer-events: none; overflow: visible;
}
.root-svg__trunk, .root-svg__halo, .rootlet__path {
  fill: none; stroke: var(--vine); stroke-linecap: round; stroke-linejoin: round;
}
.root-svg__trunk { stroke-width: 2.4; }
.root-svg__burst circle { fill: var(--vine); pointer-events: none; }
/* 光晕用一条宽而淡的同路径代替 drop-shadow，滚动重绘便宜 */
.root-svg__halo { stroke-width: 9; opacity: .14; stroke-linecap: butt; }
.rootlet__path { stroke-width: 1.4; opacity: .9; }
.vine-leaf { fill: color-mix(in srgb, var(--vine) 26%, transparent); stroke: var(--vine); stroke-width: 1.1; stroke-linejoin: round; }
.root-svg__tip { fill: color-mix(in srgb, var(--vine) 30%, #fff); }
html[data-direction="A"] .root-svg__halo { display: none; }
html[data-direction="A"] .vine-leaf { fill: rgba(46, 122, 87, .2); }
html[data-direction="A"] .root-svg__tip { fill: var(--accent); }
html[data-direction="B"] .root-svg__tip { filter: drop-shadow(0 0 6px var(--vine)); }

/* 照片随支根进度显现：只动 frame 的 opacity / transform，不裁切、不滤镜；配文始终完整 */
.photo[data-grow] .photo__frame {
  opacity: calc(.42 + .58 * var(--reveal, 1));
  transform: translateY(calc((1 - var(--reveal, 1)) * 12px));
}
/* 显现光晕：固定半径的阴影放在 ::after 上，只由 --halo 控制透明度，滚动时只需合成、不重画大图的模糊。
 * B 的图片在 6px 衬边以内，frame 不需要 overflow 裁切 */
html[data-direction="B"] .photo[data-grow]:not(.photo--opening) .photo__frame { position: relative; overflow: visible; }
html[data-direction="B"] .photo[data-grow]:not(.photo--opening) .photo__frame::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 34px -4px rgba(255, 206, 120, .42);
  opacity: var(--halo, .35); will-change: opacity;
}
html[data-direction="B"] .photo--chorus[data-grow] .photo__frame::after { box-shadow: 0 0 40px -4px rgba(255, 196, 100, .46); }

/* 照片随线条生成（data-grow-photo 由 motion.js 在完整动效下写上；脚本没跑或减少动态时照常显示）。
 * 支根接到框沿时 motion.js 加 is-bloomed：空框淡入并轻轻回弹 → 一块衬底色的幕布带着金色亮边从支根一侧滑开、露出照片 →
 * 一道斜向金光随后扫过 → 光晕闪一下 → 日期、主题、配文依次浮现。
 * 全部只动 opacity / transform（可合成，滚动不重画大图），不改排版，computeRoot 量到的几何不变 */
html[data-direction="B"][data-grow-photo="on"] :where(.photo[data-grow]:not(.photo--opening)) .photo__frame {
  opacity: 0; transform: scale(.93);
  transition: opacity .5s ease, transform 1.1s cubic-bezier(.18, 1.25, .35, 1);
}
html[data-direction="B"][data-grow-photo="on"] :where(.photo[data-grow][data-from="left"]) .photo__frame { transform-origin: 0 50%; }
html[data-direction="B"][data-grow-photo="on"] :where(.photo[data-grow][data-from="right"]) .photo__frame { transform-origin: 100% 50%; }
html[data-direction="B"][data-grow-photo="on"] :where(.photo[data-grow]:not(.photo--opening)) .photo__caption > :not(.photo__line) {
  opacity: 0; transform: translateY(6px);
  transition: opacity .7s ease .8s, transform .8s cubic-bezier(.2, .8, .2, 1) .8s;
}
html[data-direction="B"][data-grow-photo="on"] .photo__caption > .photo__topic { transition-delay: .92s; }
html[data-direction="B"][data-grow-photo="on"] .photo--story.is-bloomed .photo__line { transition-delay: 1.05s; }
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed .photo__frame { opacity: 1; transform: none; }
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed .photo__caption > :not(.photo__line) { opacity: 1; transform: none; }

.photo__veil { display: none; }
html[data-direction="B"][data-grow-photo="on"] .photo__veil {
  display: block; position: absolute; inset: 6px; z-index: 1; overflow: hidden; pointer-events: none;
}
/* 幕布：前沿一道金色亮边，向远离支根的一侧滑出 */
html[data-direction="B"][data-grow-photo="on"] .photo__veil::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255, 240, 205, .95) 0, rgba(255, 214, 150, .55) 5px, rgba(232, 160, 96, .18) 22px, #8E2A2D 46px);
  transition: transform 1.05s cubic-bezier(.65, 0, .25, 1) .18s;
}
html[data-direction="B"][data-grow-photo="on"] [data-from="right"] .photo__veil::before {
  background: linear-gradient(270deg, rgba(255, 240, 205, .95) 0, rgba(255, 214, 150, .55) 5px, rgba(232, 160, 96, .18) 22px, #8E2A2D 46px);
}
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed[data-from="left"] .photo__veil::before { transform: translateX(calc(100% + 2px)); }
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed[data-from="right"] .photo__veil::before { transform: translateX(calc(-100% - 2px)); }
/* 金光：幕布拉开后，一条斜向亮带沿同一方向再扫一次 */
html[data-direction="B"][data-grow-photo="on"] .photo__veil::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 242, 212, .55) 50%, transparent);
}
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed[data-from="left"] .photo__veil::after { animation: veil-sweep-l 1.1s cubic-bezier(.45, 0, .3, 1) .95s; }
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed[data-from="right"] .photo__veil::after { animation: veil-sweep-r 1.1s cubic-bezier(.45, 0, .3, 1) .95s; }
@keyframes veil-sweep-l { 0% { opacity: 1; transform: translateX(-110%) skewX(-18deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(285%) skewX(-18deg); } }
@keyframes veil-sweep-r { 0% { opacity: 1; transform: translateX(285%) skewX(-18deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-110%) skewX(-18deg); } }
/* 光晕闪一下再落回随进度的亮度 */
html[data-direction="B"][data-grow-photo="on"] .photo.is-bloomed .photo__frame::after { animation: photo-flare 1.4s ease-out .35s backwards; }
@keyframes photo-flare { 0% { opacity: 0; } 30% { opacity: 1; } }
/* 节点火星（motion.js 生成，播完即删） */
.vine-sparks { pointer-events: none; }
.vine-spark { fill: #FFF4DC; }
.vine-spark-ring { fill: none; stroke: var(--vine); stroke-width: 1; }
/* 开场照片：主干与支根接上、彩屑落定后由 motion.js 整组放出；--reveal 只在支根接上时轻推入 */
html[data-direction="B"] .photo--opening .photo__frame {
  opacity: calc(.8 + .2 * var(--reveal, 0));
  transform: translateY(calc((1 - var(--reveal, 0)) * 8px));
}
html[data-direction="B"] .photo--opening .photo__caption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html[data-direction="B"] .opening__hero .hero__kicker,
  html[data-direction="B"] .opening__hero .hero__line,
  html[data-direction="B"] .photo--opening .photo__frame,
  html[data-direction="B"] .photo--opening .photo__caption { opacity: 1 !important; transform: none !important; animation: none !important; }
}
/* 首帧只留暖红底：head 脚本在 B、非减少动态、非直达邀请时标 data-opening="pending"。只用 visibility 隐去前景，
 * 布局尺寸不变，computeRoot 照量真实字形与照片；playing 时文字与线由 motion.js 放出，
 * R01 整组与后续段落等主时间线与彩屑都报完成才入场 */
@media (prefers-reduced-motion: no-preference) {
  html[data-direction="B"][data-opening="pending"] :is(.topbar, .music, .opening__hero, .opening__meta, .cover__tap, .hero-arc, .root-svg),
  html[data-direction="B"]:is([data-opening="pending"], [data-opening="playing"]) :is(.photo--opening, .story, .chorus, .invite) { visibility: hidden; }
}
/* 段落文字随线条出现：data-grow-text 由 motion.js 在完整动效下写上（脚本没跑起来就不隐藏）。
 * 只动 opacity / filter / clip-path，不位移，computeRoot 量到的位置不受影响；标题再从中间向两边展开，像被线点亮 */
html[data-direction="B"][data-grow-text="on"] :is(.story__intro, .chorus__eyebrow, .chorus__body, .invite__lede, .invite__facts > .fact, .rsvp, .back-top, .photo--story .photo__line) {
  transition: opacity .9s ease, filter .9s ease;
  transition-delay: calc(var(--gi, 0) * 80ms);
}
html[data-direction="B"][data-grow-text="on"] :is(.chorus__title, .invite__title) {
  clip-path: inset(-.5em -.5em);
  transition: opacity .9s ease, filter .9s ease, clip-path 1.1s cubic-bezier(.2, .7, .2, 1);
}
html[data-direction="B"][data-grow-text="on"] :is(.story__intro, .chorus__eyebrow, .chorus__title, .chorus__body, .invite__title, .invite__lede, .invite__facts > .fact, .rsvp, .back-top, .photo--story .photo__line):not(.is-grown) {
  opacity: 0; filter: blur(6px);
}
html[data-direction="B"][data-grow-text="on"] :is(.chorus__title, .invite__title):not(.is-grown) { clip-path: inset(-.5em 50%); }
/* 邀请区顶部金线跟着标题一起亮起 */
html[data-direction="B"][data-grow-text="on"] .invite__facts { transition: border-top-color .9s ease .1s; }
html[data-direction="B"][data-grow-text="on"] .invite__title:not(.is-grown) ~ .invite__facts { border-top-color: transparent; }
.rootlet__node { fill: var(--vine); }
.photo.is-touched .photo__frame { animation: touch-glow .9s ease-out; }
.rootlet.is-touched .rootlet__leaves { animation: rustle .8s ease-in-out; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes touch-glow { 30% { box-shadow: var(--back-x) var(--back-y) 0 0 rgba(111, 224, 203, .14), 0 0 0 1px var(--root), 0 0 30px -2px rgba(111, 224, 203, .5); } }
html[data-direction="B"] .photo.is-touched .photo__frame { animation-name: touch-glow-b; }
@keyframes touch-glow-b { 30% { box-shadow: var(--back-x) var(--back-y) 0 0 rgba(255, 200, 120, .18), 0 0 0 1px var(--root), 0 0 30px -2px rgba(255, 206, 120, .55); } }
@keyframes rustle { 25% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } }

/* ---------- 背景光场（B）：固定层，--atm-* 由 motion.js 按滚动连续插值 ---------- */
.atmos { display: none; }
html[data-direction="B"] { --atm-base: 166,42,44,1; --atm-a: 238,94,47,.32; --atm-b: 150,30,40,.22; --atm-glow: 255,209,131,.16; }
html[data-direction="B"] body { background: transparent; }
html[data-direction="B"] .atmos {
  display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(80% 50% at 14% 8%, rgba(var(--atm-a)), transparent 72%),
    radial-gradient(70% 55% at 88% 86%, rgba(var(--atm-b)), transparent 70%),
    rgba(var(--atm-base));
}
html[data-direction="B"] .atmos::after {
  /* 静态细颗粒，不动画 */
  content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.atmos__glow {
  position: absolute; left: 0; top: 0;
  width: 80vmin; height: 80vmin; margin: -40vmin 0 0 -40vmin;
  background: radial-gradient(closest-side, rgba(var(--atm-glow)), transparent);
  will-change: transform;
}
html[data-direction="B"] .topbar, html[data-direction="B"] main { position: relative; z-index: 1; }

.root-anchor {
  display: block; position: absolute; left: 50%;
  width: 1px; height: 1px; pointer-events: none;
}
.story > .root-anchor[data-root-anchor="start"] { top: 0; }

.story__intro {
  position: relative; z-index: 1;
  padding-top: var(--gap-root);
  font-size: 16px; color: var(--muted);
}
html[data-direction="A"] .story__intro { text-align: right; padding-right: 4%; }
html[data-direction="B"] .story__intro { text-align: center; letter-spacing: .12em; padding-top: 36px; }

.story__item {
  position: relative;
  padding-top: var(--gap-root);
}
.story__item > .root-anchor { top: calc(var(--gap-root) / 2); }
.photo--story { width: 84%; }
.story__item[data-side="left"] .photo--story { margin-right: auto; }
.story__item[data-side="right"] .photo--story { margin-left: auto; }
.story__item[data-side="right"] .photo__caption { justify-content: flex-end; text-align: right; }
.photo--story[data-orientation="portrait"] { width: 58%; }

html[data-direction="B"] { --gap-root: 150px; }
html[data-direction="B"] .photo--story { width: 76%; }
html[data-direction="B"] .photo--story[data-orientation="portrait"] { width: 54%; }
html[data-direction="B"] .story__item[data-side="left"] .photo__caption { padding-left: 2px; }

/* ---------- 合唱 R09 ---------- */
.chorus {
  position: relative;
  margin-top: var(--gap-root);
  padding: 36px var(--pad) 40px;
}
.chorus > .root-anchor { top: calc(var(--gap-root) / -2); }
.chorus__eyebrow, .chorus__title, .chorus__body { position: relative; z-index: 1; }
.chorus__eyebrow {
  font-family: var(--num); font-weight: 600; font-size: 15px; letter-spacing: .14em;
  color: var(--accent-ink);
}
.chorus__title { font-family: var(--serif); margin: 6px 0 18px; }
.photo--chorus { width: 100%; }
.chorus__body { margin-top: 14px; font-size: 16px; }

html[data-direction="A"] .chorus { background: var(--surface); }
html[data-direction="A"] .chorus__title { font-weight: 900; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
/* 现场暖光由背景光场渐入，不再硬切色块；R09 右对齐，主干从左侧伸出两条支根 */
/* 底部多留 24px：正文与邀请眉题之间给藤蔓末端和散落留空 */
html[data-direction="B"] .chorus { text-align: center; padding-bottom: 64px; }
html[data-direction="B"] .photo--chorus { width: 86%; margin-left: auto; text-align: left; }
html[data-direction="B"] .chorus__eyebrow { color: var(--accent); }
html[data-direction="B"] .chorus__title { font-weight: 500; font-size: 26px; letter-spacing: .08em; color: #FFE2B3; }
html[data-direction="B"] .chorus .photo__date { color: var(--accent); }

/* ---------- 邀请 ---------- */
.invite {
  position: relative;
  padding: 72px var(--pad) 0;
  scroll-margin-top: 8px;
}
.invite > .root-anchor { top: 24px; }
.invite__title { font-family: var(--serif); margin: 0 0 10px; }
.invite__body { font-size: 16px; color: var(--muted); max-width: 30em; }
.invite__lede { margin: 0; max-width: 26em; font: 400 16px/1.9 var(--sans); letter-spacing: .04em; color: var(--muted); white-space: pre-line; }
html[data-direction="A"] .invite__title { font-weight: 900; font-size: clamp(30px, 8.6vw, 42px); line-height: 1.1; letter-spacing: -.02em; }
html[data-direction="B"] .invite { text-align: left; }
html[data-direction="B"] .invite__title { font-weight: 500; font-size: clamp(24px, 7vw, 32px); line-height: 1.4; letter-spacing: .06em; }

.invite__facts {
  margin-top: 28px;
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--ink);
}
html[data-direction="B"] .invite__facts { border-top: 1px solid var(--root); }
.fact {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 4.5em 1fr; gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.fact--time { grid-column: auto; grid-template-columns: 1fr; gap: 2px; }
.fact--time + .fact--time { padding-left: 14px; border-left: 1px solid var(--line); }
.fact dt { font-size: 14px; color: var(--muted); font-weight: 500; letter-spacing: .06em; }
.fact dd { font-size: 16px; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
#fact-checkin, #fact-start {
  font-family: var(--num); font-weight: 600; font-variant-numeric: tabular-nums;
}
#fact-checkin, #fact-start { font-size: 26px; line-height: 1.1; }
.fact--agenda { grid-template-columns: 1fr; gap: 12px; }
.fact--agenda dt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* 议程：三张卡片一排，虚线从图标中心串起；编号 Barlow、名称宋体 */
.agenda {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  counter-reset: none;
}
.agenda::before {
  content: ""; position: absolute; left: 16.6%; right: 16.6%; top: 37px;
  border-top: 1px dashed var(--root); opacity: .55;
}
.agenda__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 4px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 226, 163, .1), rgba(255, 226, 163, .02));
  text-align: center;
}
.agenda__icon {
  width: 46px; height: 46px; padding: 10px; margin-bottom: 4px;
  border-radius: 50%;
  border: 1px solid var(--root);
  background: var(--surface);
  fill: none; stroke: var(--root); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  position: relative; z-index: 1;
}
.agenda__num {
  font-family: var(--num); font-weight: 600; font-size: 13px; letter-spacing: .16em;
  color: var(--accent); opacity: .8; line-height: 1;
}
.agenda__name {
  font-family: var(--serif); font-weight: 500; font-size: 16px; letter-spacing: .06em;
  line-height: 1.4; white-space: nowrap;
}
html[data-direction="A"] .agenda__item { background: var(--surface); }
/* 茶歇：手绘插画在上（淡金线稿，透明底直接落在暖红上），一句说明居中在下 */
.treat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-top: 10px; padding: 30px 12px 12px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: radial-gradient(70% 80% at 50% 40%, rgba(255, 213, 138, .12), rgba(255, 213, 138, .03));
  text-align: center;
}
.treat__stage { position: relative; display: block; width: 100%; max-width: 340px; }
.treat__art { display: block; width: 100%; height: auto; aspect-ratio: 880 / 302; }
/* 热气：每缕从杯口升起、变宽、散开；三缕错开、两杯错开，看不出循环。只动 transform / opacity */
.treat__steam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.treat__wisp {
  fill: none; stroke: url(#steam-fade); stroke-width: 9; stroke-linecap: round;
  opacity: 0; transform-box: fill-box; transform-origin: 50% 100%;
}
.treat__glow { opacity: .35; transform-box: fill-box; transform-origin: 50% 50%; }
.treat.is-live .treat__wisp { animation: steam-rise 3.4s cubic-bezier(.3, .2, .4, 1) infinite; }
.treat.is-live .treat__wisp:nth-child(2) { animation-delay: -1.15s; animation-duration: 3.8s; }
.treat.is-live .treat__wisp:nth-child(3) { animation-delay: -2.3s; animation-duration: 3.1s; }
.treat.is-live .treat__cup + .treat__cup .treat__wisp { animation-delay: -.6s; }
.treat.is-live .treat__cup + .treat__cup .treat__wisp:nth-child(2) { animation-delay: -2.7s; }
.treat.is-live .treat__cup + .treat__cup .treat__wisp:nth-child(3) { animation-delay: -1.7s; }
.treat.is-live .treat__glow { animation: tea-glow 2.8s ease-in-out infinite alternate; }
.treat.is-live .treat__glow + .treat__glow { animation-delay: -1.4s; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translate(0, 14px) scale(.7, .55); }
  22% { opacity: .9; }
  65% { opacity: .55; }
  100% { opacity: 0; transform: translate(8px, -84px) scale(1.6, 1.3) skewX(-8deg); }
}
@keyframes tea-glow { from { opacity: .2; transform: scale(.9); } to { opacity: .7; transform: scale(1.06); } }
.treat__text { font-size: 15px; line-height: 1.5; letter-spacing: .04em; }
@media (max-width: 359px) {
  .agenda { gap: 6px; }
  .agenda__name { font-size: 15px; letter-spacing: .02em; }
}
.fact--address dd { line-height: 1.6; }
.wechat-id {
  font-family: var(--num); font-weight: 600; font-size: 22px; letter-spacing: .04em;
  user-select: all; -webkit-user-select: all;
}

.tag {
  display: inline-flex; align-items: center;
  font: 500 13px/1 var(--sans); padding: 4px 8px; border-radius: 999px;
  letter-spacing: .02em; white-space: nowrap; vertical-align: middle;
}
.tag--confirmed { color: var(--ok); box-shadow: inset 0 0 0 1px currentColor; }
.tag--preview, .tag--example { color: var(--ink); background: rgba(255, 201, 60, .45); }
/* B：不用彩色胶囊，左侧细短线 + 6px 内距标记，文字保留真实状态 */
html[data-direction="B"] .tag {
  border-radius: 0; background: none; box-shadow: none; color: var(--muted);
  padding: 2px 0 2px 6px; border-left: 1px solid currentColor;
}

.invite__notes { margin-top: 14px; }
.invite__notes li { font-size: 14px; line-height: 1.6; color: var(--muted); padding-left: 1.1em; position: relative; }
.invite__notes li::before { content: "＊"; position: absolute; left: 0; }

/* ---------- 预定 ---------- */
.rsvp { margin-top: 28px; position: relative; z-index: 1; }
.rsvp__open, .rsvp__submit {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  font: 500 17px/1.2 var(--sans); letter-spacing: .04em;
  background: var(--accent); color: #1B0E05;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s ease, transform .15s ease;
}
.rsvp__open { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; padding: 0 20px; border-radius: 999px; }
html[data-direction="B"] .rsvp__open, html[data-direction="B"] .rsvp__submit { background: #FFD58A; color: #6E1A1F; border-radius: 10px; }
.rsvp__open:hover, .rsvp__submit:hover { box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .45); }
.rsvp__open:active, .rsvp__submit:active { transform: translateY(1px); }
.rsvp__open:focus-visible, .rsvp__submit:focus-visible, .rsvp__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.rsvp__open[aria-expanded="true"] { box-shadow: 0 0 22px -6px rgba(255, 213, 138, .8); }
.rsvp__form { margin-top: 14px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 226, 163, .07); }
.rsvp__form[hidden] { display: none; }
.rsvp__label { display: block; font-size: 14px; color: var(--muted); letter-spacing: .06em; margin-bottom: 8px; }
.rsvp__label--blessing { margin-top: 16px; }
.rsvp__row { display: flex; gap: 8px; }
.rsvp__input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
  font: 400 16px/1.2 var(--sans); color: var(--ink);
  background: rgba(0, 0, 0, .14); border: 1px solid var(--line); border-radius: 10px;
}
html[data-direction="A"] .rsvp__input { background: var(--surface); }
.rsvp__input::placeholder { color: var(--muted); opacity: .6; }
.rsvp__blessing { display: block; width: 100%; min-height: 112px; padding: 12px 14px; line-height: 1.65; resize: vertical; }
.rsvp__actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.rsvp__submit { flex: none; min-height: 48px; padding: 0 20px; border-radius: 999px; }
.rsvp__submit[disabled] { cursor: progress; opacity: .7; }
.rsvp__status { min-height: 1.6em; margin-top: 10px; font-size: 15px; color: var(--muted); }
.rsvp__status:empty { margin-top: 0; min-height: 0; }
.rsvp__status[data-state="success"] { color: var(--ok); font-weight: 500; }
.rsvp__status[data-state="success"]::before { content: "✓ "; }
.rsvp__status[data-state="error"] { color: var(--err); font-weight: 500; }
html[data-direction="B"] .rsvp__status[data-state="error"] {
  color: #7A1A1F; background: #FFF1DC; box-shadow: inset 4px 0 0 #D9472B;
  padding: 8px 12px; border-radius: 8px;
}
.back-top {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; margin: 28px auto 0; width: max-content; padding: 0 16px;
  font-size: 15px; color: var(--muted); text-underline-offset: 4px;
}


/* ---------- 尺寸 ---------- */
@media (max-width: 374px) {
  :root { --pad: 16px; --gap-root: 100px; }
  .switcher__link { padding: 0 8px; font-size: 13.5px; }
  html[data-direction="A"] .hero__date-num { font-size: 40px; }
}
@media (min-width: 600px) {
  body { background: var(--bg); }
  :root { --gap-root: 124px; }
  html[data-direction="A"] main { box-shadow: 0 0 0 1px var(--line); background: var(--bg); }
}

/* ---------- 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .root-svg__tip { display: none; }
}
html[data-reduced-motion="true"] .root-svg__tip { display: none; }

/* 背景线束（B）：两侧静态奶金细线 + 疏点，垫在光晕与叙事藤蔓之下；viewBox 拉伸配 non-scaling-stroke，线宽与点保持发丝级 */
.atmos__lines { position: absolute; inset: 0; pointer-events: none; }
.atmos__lines svg { position: absolute; top: 0; width: clamp(108px, 30vw, 440px); height: 100%; overflow: hidden; }
.atmos__lines-l { left: 0; }
.atmos__lines-r { right: 0; }
.atmos__lines path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- 背景音乐开关：右上角常驻；播放时唱片慢转、音柱跳动，关闭后静止并带斜杠 ---------- */
.music {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  position: fixed; z-index: 30;
  top: max(14px, calc(env(safe-area-inset-top, 0px) + 6px)); right: max(12px, env(safe-area-inset-right, 0px));
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--root);
  background: rgba(139, 36, 41, .92);   /* 不用 backdrop-filter：fixed 层上模糊下面内容，滚动时每帧都要重算 */
  color: var(--root);
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .3s ease, opacity .3s ease;
}
html[data-direction="A"] .music { background: rgba(255, 255, 255, .8); }
.music:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.music[data-state="playing"] { box-shadow: 0 0 16px -4px rgba(255, 213, 138, .7); }
.music__disc, .music__slash { grid-area: 1 / 1; width: 24px; height: 24px; }
.music__disc { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.music__hub { fill: currentColor; stroke: none; }
.music[data-state="playing"] .music__disc { animation: music-spin 4.8s linear infinite; }
.music__slash { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; opacity: 0; transition: opacity .2s ease; }
.music[data-state="off"] .music__slash { opacity: 1; }
.music[data-state="off"] .music__disc { opacity: .55; }
.music__bars {
  position: absolute; right: -3px; bottom: -3px;
  display: flex; align-items: flex-end; gap: 1.5px;
  height: 14px; padding: 2px 3px; border-radius: 6px;
  background: #FFD58A;
  opacity: 0; transition: opacity .25s ease;
}
html[data-direction="A"] .music__bars { background: var(--root); }
.music__bars i { display: block; width: 2px; height: 100%; border-radius: 1px; background: #6E1A1F; transform-origin: 50% 100%; transform: scaleY(.35); }
html[data-direction="A"] .music__bars i { background: #fff; }
.music[data-state="playing"] .music__bars { opacity: 1; }
.music[data-state="playing"] .music__bars i { animation: music-bar .9s ease-in-out infinite; }
.music[data-state="playing"] .music__bars i:nth-child(2) { animation-delay: -.3s; animation-duration: .75s; }
.music[data-state="playing"] .music__bars i:nth-child(3) { animation-delay: -.55s; animation-duration: 1.05s; }
@keyframes music-spin { to { transform: rotate(1turn); } }
@keyframes music-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .music[data-state="playing"] .music__disc, .music[data-state="playing"] .music__bars i { animation: none; }
  .music[data-state="playing"] .music__bars i { transform: scaleY(.7); }
}
/* 等待点击时按钮外围呼吸一圈金环，和浮签上的光点同一节拍（2.4s） */
.music::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid #FFD58A; opacity: 0; pointer-events: none;
}
.music.is-calling::after { animation: music-call 2.4s ease-out infinite; }
@keyframes music-call { 0%, 10% { opacity: 0; transform: scale(1); } 14% { opacity: .85; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(1.55); } }
/* 光点飞进按钮：落下前唱片和音柱先停住，落下时按钮亮一下 */
.music.is-arriving .music__disc { animation-play-state: paused; }
.music.is-arriving .music__bars { opacity: 0; }
.music.is-lit { animation: music-lit .65s ease-out; }
@keyframes music-lit {
  30% { transform: scale(1.12); box-shadow: 0 0 0 2px rgba(255, 228, 168, .9), 0 0 30px 4px rgba(255, 213, 138, .75); }
}
.music-fly {
  position: fixed; left: 0; top: 0; z-index: 31; pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #FFF4DC; box-shadow: 0 0 10px 3px rgba(255, 213, 138, .8);
}

/* ---------- 点开音乐的引导：底部胶囊浮签，左边金色光点轻按、荡出两圈细环 ---------- */
.music-hint {
  position: fixed; z-index: 30; left: 50%;
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 13px; border-radius: 999px;
  background: rgba(110, 26, 31, .8);
  border: 1px solid rgba(255, 213, 138, .6);
  box-shadow: 0 0 22px -6px rgba(255, 213, 138, .6), 0 10px 24px -14px rgba(0, 0, 0, .6);
  color: #FFE2A3; font: 400 14px/1.2 var(--serif); letter-spacing: .12em; white-space: nowrap;
  pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(-50%, 16px);
  transform-origin: 100% 50%;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .9s;
}
.music-hint[data-state="shown"] {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
/* 只滑不点：缩小、往右上角飘去淡出，像收进了音乐按钮 */
.music-hint[data-state="tucked"] {
  transform: translate(calc(-50% + 34vw), -46vh) scale(.2);
  transition: opacity .7s ease-in .15s, transform .9s cubic-bezier(.5, 0, .3, 1), visibility 0s linear 1s;
}
/* 已出声：轻轻散开淡出 */
.music-hint[data-state="done"] {
  transform: translate(-50%, 0) scale(1.06);
  transition: opacity .45s ease, transform .5s ease-out, visibility 0s linear .5s;
}
.music-hint__dot { position: relative; flex: none; width: 18px; height: 18px; display: grid; place-items: center; }
.music-hint__dot b {
  width: 7px; height: 7px; border-radius: 50%;
  background: #FFE6B0; box-shadow: 0 0 8px 1px rgba(255, 213, 138, .9);
}
.music-hint__dot i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid #FFD58A; opacity: 0;
}
.music-hint[data-state="shown"] .music-hint__dot b { animation: hint-press 2.4s ease-in-out infinite; }
.music-hint[data-state="shown"] .music-hint__dot i { animation: hint-ripple 2.4s ease-out infinite; }
.music-hint[data-state="shown"] .music-hint__dot i + i { animation-delay: .32s; }
@keyframes hint-press { 0%, 6%, 30%, 100% { transform: scale(1); } 14% { transform: scale(.82); } }
@keyframes hint-ripple { 0%, 12% { opacity: 0; transform: scale(.4); } 15% { opacity: .9; transform: scale(.45); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) {
  .music.is-calling::after, .music.is-lit, .music-hint .music-hint__dot b, .music-hint .music-hint__dot i { animation: none !important; }
  .music-hint[data-state="tucked"] { transform: translate(-50%, 0); }
}