/* ============================================================
   婚礼请柬 · 样式（对标参考：白灰色系、白玫瑰与尤加利、银白光斑星光、白信封与相纸、毛玻璃卡、Thank You 页）
   尺寸单位：--u = 舞台宽 / 390，所有字号随舞台等比缩放
   ============================================================ */

@font-face { font-family: 'Invite CJK'; src: url('../assets/fonts/invite-cjk.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Invite Latin'; src: url('../assets/fonts/invite-latin.woff') format('woff'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Invite Latin'; src: url('../assets/fonts/invite-latin-italic.woff') format('woff'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Invite Script'; src: url('../assets/fonts/invite-script.woff') format('woff'); font-weight: 400; font-display: swap; }

:root {
  --grey: #C9C7C1; --sage: #7E827A; --white: #FFFFFF; --text: #1F1F1F; --flap: #B9C3C6;
  --fg: #3B3B39; --fg-70: rgba(59, 59, 57, .72);
  --u: 1; --box-w: 100vw; --box-h: 100vh;
  --font-cjk: 'Invite CJK', 'Noto Serif SC', 'Songti SC', 'STSong', 'Noto Serif CJK SC', 'Source Han Serif SC', serif;
  --font-latin: 'Invite Latin', 'Cormorant Garamond', 'Didot', Georgia, serif;
  --font-script: 'Invite Script', 'Great Vibes', 'Snell Roundhand', 'Brush Script MT', cursive;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}

html, body { margin: 0; height: 100%; background: #101211; overflow: hidden; }
body {
  font-family: var(--font-cjk); color: var(--text);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
.share-thumb { position: absolute; left: -9999px; top: 0; width: 300px; height: 300px; pointer-events: none; }  /* 微信按渲染尺寸选分享图，必须 ≥300×300，只能移出屏幕不能缩成 1px 或 display:none */
.fatal { position: fixed; inset: auto 0 40% 0; text-align: center; color: #fff; font-size: 15px; letter-spacing: .1em; }

/* ---------- 舞台与图层 ---------- */
#app {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--box-w); height: var(--box-h); overflow: hidden; background: var(--grey);
}
.is-phone-frame #app { border-radius: 28px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 120px rgba(0, 0, 0, .6); }
#app.is-sage { --fg: #FFFFFF; --fg-70: rgba(255, 255, 255, .78); }
.layer { position: absolute; inset: 0; }
canvas.layer { display: block; }
#gl { background: var(--grey); }
#grain, #watercolor, #florals, #fx, #scenes, #petals, #leak { pointer-events: none; }  /* 盖在 #scenes 之上的装饰层必须放行触摸，否则页内按钮点不到且被当成轻触翻页 */
#grain {
  display: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.use-css-grain #grain { display: block; }

/* 水彩晕染与花饰 */
.watercolor { position: absolute; left: -4%; width: 108%; height: 30%; display: block; opacity: .5; }   /* v7：晕染减半，花簇压在其上 */
.watercolor-top { top: -3%; }
.watercolor-bottom { bottom: -3%; }

/* ---------- 信封 ---------- */
#envelope { pointer-events: none; }
.env {
  position: absolute; left: 50%; bottom: calc(var(--box-h) * 0.12);
  width: calc(var(--box-w) * 0.70); height: calc(var(--box-w) * 0.70 * 0.62);
  transform: translateX(-50%); perspective: 900px;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.env.is-hidden { opacity: 0; transform: translateX(-50%) translateY(6%); }
.env-back { position: absolute; inset: 0; background: var(--flap); border-radius: 4px; box-shadow: 0 22px 44px rgba(0, 0, 0, .20), 0 2px 6px rgba(0, 0, 0, .08); z-index: 1; }
.env-pocket {
  position: absolute; inset: 0; z-index: 4; border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F4 60%, #EDEDEA 100%);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-pocket::before, .env-pocket::after {
  content: ''; position: absolute; top: 0; width: 56%; height: 56%; background: linear-gradient(to bottom right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .06));
  clip-path: polygon(0 0, 100% 100%, 100% 100%, 0 0);
}
.env-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 56%; z-index: 5;
  background: linear-gradient(180deg, var(--flap), #AEB9BC); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; transform: rotateX(0deg);
  transition: transform .95s cubic-bezier(.45, .05, .25, 1), z-index 0s linear .45s;
}
.env.is-open .env-flap { transform: rotateX(180deg); z-index: 0; }
.env-mono { position: absolute; left: 50%; top: 14%; width: 32%; transform: translateX(-50%); transition: opacity .3s; }
.env-mono svg { width: 100%; height: auto; display: block; }
.env.is-open .env-mono { opacity: 0; }

/* 信封里探出的下一张（与相纸静止态尺寸一致；裁切在信封内，闭合时不可见） */
.env-inside { position: absolute; inset: 0; overflow: hidden; z-index: 2; border-radius: 4px; }
.env.is-open .env-inside { opacity: 1; }
.peek {
  position: absolute; left: 50%; bottom: 12%; margin: 0;
  width: calc(var(--box-w) * 0.86 * 0.62); transform: translateX(-50%);
  background: #fff; padding: calc(var(--box-w) * 0.0217) calc(var(--box-w) * 0.0217) calc(var(--box-w) * 0.031);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12); transition: opacity .22s var(--ease);
}
.peek.is-swap { opacity: 0; }
.peek.is-portrait { width: calc(var(--box-w) * 0.70 * 0.62); }
.paper-img { aspect-ratio: var(--ar, 1.5); overflow: hidden; background: #E9E9E6; }
/* 信封里探出的下一张：只露照片上部 40%（人脸区） */
.peek-img { aspect-ratio: calc(var(--ar, 1.5) / 0.4); overflow: hidden; background: #E9E9E6; }
.peek-img img { object-position: 50% 0; }
.peek-img img, .paper-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 升起舞台：只裁掉信封底边以下的部分 */
.env-stage { position: absolute; left: -60%; right: -60%; bottom: 0; top: -420%; overflow: hidden; z-index: 3; }
.paper {
  position: absolute; left: 50%; bottom: 12%; margin: 0;
  width: calc(var(--box-w) * 0.86); background: #fff;
  padding: calc(var(--box-w) * 0.035) calc(var(--box-w) * 0.035) calc(var(--box-w) * 0.05);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .08);
  transform-origin: 50% 100%; transform: translate(-50%, 0) scale(.62) rotate(0deg); opacity: 0;
  transition: none;
}
.paper.is-portrait { width: calc(var(--box-w) * 0.70); }
.paper figcaption { margin: calc(6px * var(--u)) 0 0; text-align: center; font-size: calc(12px * var(--u)); letter-spacing: .2em; color: #4A4A47; }
.paper.is-up { opacity: 1; transform: translate(-50%, calc(-1 * var(--rise, 0px))) scale(1) rotate(var(--r, 0deg)); transition: transform 1.05s cubic-bezier(.25, .8, .3, 1), opacity .3s var(--ease); }
.paper.is-up.is-out { transition: transform 1.05s cubic-bezier(.25, .8, .3, 1), opacity .6s var(--ease); }
.paper.is-out { opacity: 0; }

/* 页 2 左下角的小信封（独立图层，压在卡片之上） */
#envelope-mini { pointer-events: none; }
.env.mini { left: 25%; top: 86%; bottom: auto; width: calc(var(--box-w) * 0.40); height: calc(var(--box-w) * 0.40 * 0.62); transform: translate(-50%, -50%) rotate(-12deg); }
.env.mini.is-hidden { opacity: 0; transform: translate(-50%, -44%) rotate(-12deg); }
.env.mini .env-back { box-shadow: 0 14px 30px rgba(0, 0, 0, .20), 0 1px 3px rgba(0, 0, 0, .08); }
.env.mini .env-mono { width: 34%; }

/* ---------- 页面通用（柔和叠化） ---------- */
.scene {
  position: absolute; inset: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--sat) + 40px * var(--u)) calc(24px * var(--u)) calc(var(--sab) + 60px * var(--u));
  opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
}
.scene.is-active { opacity: 1; visibility: visible; transition: opacity 1s var(--ease); }
.scene.is-leaving { opacity: 0; visibility: visible; transition: opacity .9s var(--ease); }
.scene [data-reveal] {
  opacity: 0; transform: translateY(calc(10px * var(--u)));
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 500ms + var(--d, 0ms) + 200ms);
}
.scene.is-active [data-reveal] { opacity: 1; transform: none; }
.scene.is-leaving [data-reveal] { transition-delay: 0ms; transition-duration: .4s; }

.placeholder-hint {
  position: absolute; right: 4%; top: calc(var(--sat) + 5%); max-width: 44%; margin: 0; padding: calc(6px * var(--u)) calc(10px * var(--u));
  text-align: left; font-size: calc(11px * var(--u)); line-height: 1.7; letter-spacing: .04em; color: #4A4A47;
  background: rgba(255, 255, 255, .55); border-radius: calc(8px * var(--u));
}

/* ---------- 页 2：毛玻璃卡 ---------- */
.glass-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  width: 80%; height: 68%; box-sizing: border-box; overflow: hidden;
  border-radius: calc(var(--box-w) * 0.03);
  background: rgba(255, 255, 255, .20); border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .5);
  backdrop-filter: blur(18px) saturate(1.05); -webkit-backdrop-filter: blur(18px) saturate(1.05);
}
.glass-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 55%); }
.card-body { position: relative; box-sizing: border-box; height: 100%; padding: 7% 6% 6%; display: flex; flex-direction: column; justify-content: flex-start; }
.tw-line { margin: 0; text-align: center; color: var(--text); font-size: calc(15px * var(--u)); line-height: 1.9; letter-spacing: .04em; min-height: 1.9em; }
.tw-empty { min-height: .9em; }
.tw-title { font-size: calc(44px * var(--u)); font-weight: 700; letter-spacing: .12em; line-height: 1.25; margin-bottom: calc(16px * var(--u)); padding-left: .12em; }
.tw-strong { font-size: calc(19px * var(--u)); font-weight: 700; letter-spacing: .06em; line-height: 2; }
.tw-label { font-weight: 700; font-size: calc(14px * var(--u)); margin-top: calc(6px * var(--u)); line-height: 1.9; min-height: 1.9em; }
.tw-ch { visibility: hidden; }
.tw-ch.is-on { visibility: visible; }

/* ---------- 页 3：Thank You ---------- */
.thanks-block { position: absolute; left: 0; right: 0; transform: translateY(-50%); text-align: center; color: #fff; }
.thanks-script-wrap { top: 28%; }
.thanks-names-wrap { top: 47%; }
.thanks-sign-wrap { top: 68%; }
.thanks-script { margin: 0; font-family: var(--font-script); font-size: calc(54px * var(--u)); line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.thanks-names { width: 78%; margin: 0 auto; }
.thanks-names p { margin: calc(8px * var(--u)) 0; font-size: calc(17px * var(--u)); letter-spacing: .14em; padding-left: .14em; }
.ornament { display: block; width: 100%; height: auto; }
.ornament.is-flipped { transform: scaleY(-1); }
.thanks-sign { margin: 0; font-size: calc(30px * var(--u)); letter-spacing: .32em; padding-left: .32em; }

/* ---------- HUD ---------- */
#hud-root { pointer-events: none; }  /* 交互层容器本身放行，只有其子元素接收点击；否则整层盖住 #scenes 里的按钮 */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud > * { pointer-events: auto; }
.music {
  position: absolute; top: calc(var(--sat) + 18px * var(--u)); right: calc(14px * var(--u));
  width: calc(42px * var(--u)); height: calc(42px * var(--u)); padding: 0; border: 0; background: transparent;
  color: var(--fg); cursor: pointer; transition: color .9s var(--ease);
}
.music svg { width: 100%; height: 100%; display: block; }
.music .disc { transform-origin: 50% 50%; animation: spin 7s linear infinite; animation-play-state: paused; }
.music.is-playing .disc { animation-play-state: running; }
.music .off { opacity: 0; transition: opacity .3s; }
.music.is-muted .off { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.progress { position: absolute; left: calc(20px * var(--u)); right: calc(20px * var(--u)); top: calc(var(--sat) + 10px * var(--u)); display: flex; gap: calc(5px * var(--u)); pointer-events: none; }
.progress i { flex: 1; height: 2px; background: rgba(255, 255, 255, .45); position: relative; overflow: hidden; }
.progress i b { position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--p, 0)); transition: background .9s var(--ease); }

.actions {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + var(--box-h) * 0.15);
  display: flex; justify-content: center; gap: calc(12px * var(--u)); padding: 0 calc(24px * var(--u));
  opacity: 0; transform: translateY(calc(8px * var(--u))); pointer-events: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.actions.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 1.8s; }
.btn {
  appearance: none; font: inherit; font-size: calc(14px * var(--u)); letter-spacing: .3em;
  min-width: calc(150px * var(--u)); padding: calc(11px * var(--u)) calc(26px * var(--u)); text-indent: .3em;
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; color: #fff;
  background: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}
.btn:focus-visible, .music:focus-visible, .cover-btn:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }

.toast { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: calc(13px * var(--u)); letter-spacing: .36em; color: var(--fg-70); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.toast.is-on { opacity: 1; }

.swipe-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 12px * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(6px * var(--u));
  color: var(--fg-70); font-size: calc(11px * var(--u)); letter-spacing: .4em; opacity: 0; pointer-events: none;
  transition: opacity .8s var(--ease) 2s;
}
.swipe-hint.is-on { opacity: 1; }
.swipe-hint span { padding-left: .4em; }
.swipe-hint i { position: relative; display: block; width: 1px; height: calc(22px * var(--u)); background: linear-gradient(to top, transparent, currentColor); }
.swipe-hint i::after { content: ''; position: absolute; left: 50%; bottom: 0; width: calc(4px * var(--u)); height: calc(4px * var(--u)); border-radius: 50%; background: currentColor; transform: translateX(-50%); animation: hint-rise 2s ease-in-out infinite; }
@keyframes hint-rise { 0% { bottom: 0; opacity: 0; } 20% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }

/* ---------- 横屏提示 ---------- */
#rotate-hint { display: none; position: fixed; inset: 0; z-index: 20; background: var(--grey); color: var(--text); align-items: center; justify-content: center; letter-spacing: .4em; font-size: 15px; }
#rotate-hint p { margin: 0; padding-left: .4em; }
@media (orientation: landscape) and (max-height: 520px) { #rotate-hint { display: flex; } }

/* ---------- 减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  .music .disc { animation: none; }
  .cover-btn.is-ready { animation: none; }
  .scene [data-reveal] { transition-duration: .4s; }
}

/* ============================================================
   v2：七页叙事 + 动效质感
   ============================================================ */

/* ---------- 视差（--px/--py 由 main.js 每帧写入；低配模式为 0） ---------- */
#florals { transform: translate(calc(var(--px, 0px) * .5), calc(var(--py, 0px) * .5)); }
#envelope, #envelope-mini { transform: translate(var(--px, 0px), var(--py, 0px)); }
#scenes { transform: translate(calc(var(--px, 0px) * .8), calc(var(--py, 0px) * .8)); }
.scene-card .glass-card { transform: translate(calc(-50% + var(--px, 0px) * .2), calc(-52% + var(--py, 0px) * .2)); }

/* ---------- 纸纹理（::after 叠加，不参与 3D 与缩放） ---------- */
.env-pocket::after, .env-flap::after, .paper-inner::after, .peek::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--paper-tex); background-size: 256px 256px; opacity: .06; mix-blend-mode: multiply;
}
.env-flap::after { clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; transform: translateZ(0); }
.env-flap { will-change: transform; transform-style: flat; }
.paper-inner { position: relative; }
.paper-inner::after { z-index: 2; }

/* ---------- 信封：图章按压、开封漏光 ---------- */
.env-flap.is-press .env-mono { animation: seal-press .35s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes seal-press { 0% { transform: translateX(-50%) scale(1); } 45% { transform: translateX(-50%) scale(1.06); } 100% { transform: translateX(-50%) scale(1); } }
.env-leak {
  position: absolute; left: -30%; top: -80%; width: 60%; height: 260%; pointer-events: none; z-index: 6; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen; transform: translateX(-40%) rotate(12deg);
}
.env.is-leaking .env-leak { animation: env-leak .9s ease-out .15s both; }
@keyframes env-leak { 0% { opacity: 0; transform: translateX(-40%) rotate(12deg); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%) rotate(12deg); } }

/* ---------- 相纸：真实投影 + 落定摆动 ---------- */
.paper { box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 18px 40px rgba(0, 0, 0, .18); }
.paper.is-settle .paper-inner { animation: paper-swing 1.2s ease-out both; }
@keyframes paper-swing { 0% { rotate: 1.5deg; } 30% { rotate: -1deg; } 60% { rotate: .5deg; } 80% { rotate: -.2deg; } 100% { rotate: 0deg; } }

/* ---------- 页 4：卡片入场、小信封滑入、标题墨迹显现、逐行淡入模式 ---------- */
.scene-card .glass-card { opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.scene-card .glass-card { transform: translate(calc(-50% + var(--px, 0px) * .2), calc(-52% + var(--py, 0px) * .2)) scale(.96); }
.scene-card.is-active .glass-card { opacity: 1; transform: translate(calc(-50% + var(--px, 0px) * .2), calc(-52% + var(--py, 0px) * .2)) scale(1); }
.env.mini { transition: opacity .7s var(--ease) .5s, transform .8s var(--ease) .5s; }
.env.mini.is-hidden { transition-delay: 0s; transform: translate(-70%, -20%) rotate(-12deg); }
.tw-title .tw-ch { visibility: visible; opacity: 0; filter: blur(6px); transition: opacity .35s var(--ease), filter .35s var(--ease); }
.tw-title .tw-ch.is-on { opacity: 1; filter: blur(0); }
.tw-fade .tw-ch { visibility: visible; opacity: 0; transition: opacity .35s var(--ease); }
.tw-fade .tw-ch.is-on { opacity: 1; }

/* ---------- 通用：模糊清晰化 ---------- */
.scene [data-reveal].blur-in { filter: blur(4px); transform: translateY(calc(-12px * var(--u))); transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.scene.is-active [data-reveal].blur-in { filter: blur(0); transform: none; }

/* ---------- 页 2：花押 / 姓名 / 生长线 ---------- */
.names { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.initials-wrap { width: calc(280px * var(--u)); }
.initials { width: 100%; height: auto; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .12)); }
.initials text { fill-opacity: 0; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.4s ease-in-out .2s, fill-opacity .6s var(--ease) 1.3s; }
.scene.is-active .initials text { stroke-dashoffset: 0; fill-opacity: 1; }
.initials-placeholder { margin: 0; font-family: var(--font-script); font-size: calc(64px * var(--u)); line-height: 1.2; }
.names-cn { margin: calc(10px * var(--u)) 0 0; font-size: calc(30px * var(--u)); letter-spacing: .25em; padding-left: .25em; }
.names-cn .dot { margin: 0 .1em; opacity: .7; }
.names-latin { margin: calc(6px * var(--u)) 0 0; font-family: var(--font-latin); font-size: calc(13px * var(--u)); letter-spacing: .3em; padding-left: .3em; color: rgba(255, 255, 255, .85); }
.grow-line { display: block; width: calc(120px * var(--u)); height: 1px; margin: calc(26px * var(--u)) 0; background: #fff; transform: scaleX(0); transform-origin: 50% 50%; transition: transform .8s var(--ease), opacity .4s; }
.scene.is-active .grow-line[data-reveal] { transform: scaleX(1); }
.names-lead { margin: 0; font-size: calc(15px * var(--u)); letter-spacing: .32em; padding-left: .32em; }
.names-met { margin: calc(10px * var(--u)) 0 0; font-family: var(--font-latin); font-size: calc(13px * var(--u)); letter-spacing: .2em; color: rgba(255, 255, 255, .85); }
.scene-names { color: #fff; }
.skip-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 14px * var(--u)); text-align: center; font-size: calc(11px * var(--u)); letter-spacing: .3em; padding-left: .3em; color: var(--fg-70); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.skip-hint.is-on { opacity: 1; }

/* ---------- 页 3：故事相册 ---------- */
.story { position: absolute; inset: 0; }
.story-stage { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 7%); height: 57%; }
.story-paper {
  position: absolute; left: 50%; top: 50%; bottom: auto; margin: 0; width: calc(var(--box-w) * 0.88);
  transform: translate(-50%, calc(-50% + 6%)) rotate(0deg); opacity: 0; transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.story-paper.is-portrait { width: calc(var(--box-w) * 0.74); }
.story-paper.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); }
.story-paper.is-out { opacity: 0; transform: translate(-50%, calc(-50% + 4%)) rotate(-2deg); }
.story-paper .paper-img { overflow: hidden; }
.story-paper .paper-img img { animation: kenburns 4.5s ease-out both; transform-origin: 50% 30%; }
.story-paper.is-out .paper-img img { animation: none; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.story-caption { position: absolute; left: 8%; right: 8%; top: 66%; text-align: center; }
.story-caption > * { opacity: 0; transform: translateY(calc(8px * var(--u))); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.story-caption.is-on > * { opacity: 1; transform: none; }
.story-caption.is-on > :nth-child(1) { transition-delay: .3s; }
.story-caption.is-on > :nth-child(2) { transition-delay: .5s; }
.story-caption.is-on > :nth-child(3) { transition-delay: .7s; }
.story-tag { display: inline-block; padding: calc(5px * var(--u)) calc(16px * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--text); font-size: calc(12px * var(--u)); letter-spacing: .3em; text-indent: .3em; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.story-text { margin: calc(14px * var(--u)) 0 0; font-size: calc(15px * var(--u)); line-height: 1.9; letter-spacing: .06em; color: var(--text); }
.story-date { margin: calc(6px * var(--u)) 0 0; font-family: var(--font-latin); font-style: italic; font-size: calc(15px * var(--u)); letter-spacing: .12em; color: #4A4A47; }
.story-dots { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 5%); display: flex; justify-content: center; gap: calc(8px * var(--u)); }
.story-dots i { width: calc(7px * var(--u)); height: calc(7px * var(--u)); border-radius: 50%; border: 1px solid #fff; background: transparent; transition: background .4s; }
.story-dots i.is-cur { background: #fff; }

/* 页 2：两枚小相纸 */
.names-photos { display: flex; justify-content: center; align-items: flex-start; gap: calc(14px * var(--u)); margin: calc(-6px * var(--u)) 0 calc(18px * var(--u)); }
.mini-paper { margin: 0; width: calc(var(--box-w) * 0.30); background: #fff; padding: calc(var(--box-w) * 0.014) calc(var(--box-w) * 0.014) calc(var(--box-w) * 0.022); box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 14px 30px rgba(0, 0, 0, .16); }
.mini-paper.is-left { transform: rotate(-6deg); }
.mini-paper.is-right { transform: rotate(6deg); margin-top: calc(10px * var(--u)); }
.mini-paper .paper-img { aspect-ratio: var(--ar, 0.667); }
.scene.is-active .names-photos[data-reveal] { transform: none; }

/* 页 6：地图可点 + 两枚胶囊按钮 */
.map-link { display: block; width: 72%; margin: calc(16px * var(--u)) 0 0; text-decoration: none; color: inherit; pointer-events: auto; }
/* #scenes 整层 pointer-events:none，页内可点元素必须单独恢复，否则触摸穿透到舞台被当成轻触翻页 */
.venue-actions .pill { pointer-events: auto; }
.map-link .map-frame { width: 100%; margin: 0; }
.venue-actions { display: flex; justify-content: center; gap: calc(12px * var(--u)); margin: calc(14px * var(--u)) 0 0; }
.venue-actions .pill {
  appearance: none; cursor: pointer; text-decoration: none; display: inline-block;
  min-width: calc(112px * var(--u)); padding: calc(9px * var(--u)) calc(20px * var(--u)); box-sizing: border-box; text-align: center;
  border-radius: 999px; border: 1px solid rgba(120, 120, 116, .55); background: rgba(255, 255, 255, .92);
  color: #3B3B39; font: inherit; font-size: calc(13px * var(--u)); letter-spacing: .24em; text-indent: .24em; line-height: 1.5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
}
.venue-actions .pill:active { transform: scale(.97); }
.venue { padding-bottom: calc(10px * var(--u)); }
.timeline { margin-top: calc(12px * var(--u)); }

/* 底图层：每页一张模糊照片轻透（两个槽位交叉淡化 1 s），可叠鼠尾草色 */
#backdrop { pointer-events: none; overflow: hidden; }
.backdrop-slot { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.backdrop-slot.is-on { opacity: var(--op, .25); }
.backdrop-img { position: absolute; inset: calc(-2 * var(--blur, 8px)); filter: blur(var(--blur, 8px)) saturate(var(--sat, 1)); }
.backdrop-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bg-pos, 50% 30%); display: block; transform-origin: var(--bg-pos, 50% 30%); }
.backdrop-slot.is-on .backdrop-img img { animation: backdrop-kb 14s ease-out both; }
@keyframes backdrop-kb { from { transform: scale(1); } to { transform: scale(1.05); } }
.backdrop-tint { position: absolute; inset: 0; background: var(--sage); opacity: 0; transition: opacity 1s var(--ease); }

/* 照片容器：未就绪浅灰占位，就绪后淡入 */
.ph { background: #E9E9E6; }
.ph img.is-late { opacity: 0; transition: opacity .6s var(--ease); }
.ph img.is-late.is-in { opacity: 1; }

/* ---------- 照片墙 ---------- */
.wall { display: flex; flex-direction: column; align-items: center; width: 100%; }
.wall-title { margin: 0 0 calc(14px * var(--u)); font-size: calc(14px * var(--u)); letter-spacing: .3em; padding-left: .3em; color: var(--text); }
.wall-grid { display: flex; justify-content: center; align-items: center; gap: calc(var(--box-w) * 0.025); }
.wall-col { display: flex; flex-direction: column; gap: calc(var(--box-w) * 0.025); width: var(--col-w, calc(var(--box-w) * 0.29)); }
.wall-col-0, .wall-col-2 { animation: wall-drift-up 8s ease-in-out infinite alternate; }
.wall-col-1 { animation: wall-drift-down 8s ease-in-out infinite alternate; }
@keyframes wall-drift-up { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
@keyframes wall-drift-down { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.wall-item { margin: 0; background: #fff; padding: 3px; box-shadow: 0 2px 5px rgba(0, 0, 0, .10), 0 8px 18px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(10px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 200ms); }
.scene.is-active .wall-item { opacity: 1; transform: none; }
.wall-img { aspect-ratio: var(--ar, 0.667); overflow: hidden; }
.wall-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
#app.is-low-fx .wall-col, #app.is-low-fx .backdrop-slot.is-on .backdrop-img img { animation: none; }
@media (prefers-reduced-motion: reduce) { .wall-col, .backdrop-slot.is-on .backdrop-img img { animation: none; } }

/* ---------- 页 5：日期 ---------- *//* ---------- 页 5：日期 ---------- */
.date { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; }
.date-year { margin: 0; font-family: var(--font-latin); font-size: calc(18px * var(--u)); letter-spacing: .4em; padding-left: .4em; font-variant-numeric: lining-nums tabular-nums; }
.date-big { margin: calc(4px * var(--u)) 0 calc(10px * var(--u)); font-family: var(--font-latin); font-weight: 400; font-size: calc(var(--box-w) * 0.28); line-height: 1; letter-spacing: .02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .10); font-variant-numeric: lining-nums tabular-nums; }
.date-wk { margin: 0; font-size: calc(16px * var(--u)); letter-spacing: .28em; padding-left: .28em; }
.date-lunar { margin: calc(8px * var(--u)) 0 0; font-size: calc(13px * var(--u)); letter-spacing: .22em; color: rgba(255, 255, 255, .85); }
.date-orn { width: calc(200px * var(--u)); margin: calc(26px * var(--u)) 0; }
.date-orn .ornament { width: 100%; height: auto; display: block; }
.date-count { margin: 0; display: flex; align-items: baseline; gap: .1em; font-size: calc(15px * var(--u)); letter-spacing: .22em; }
.date-count .num { display: inline-block; min-width: 1.4em; margin: 0 .12em; font-family: var(--font-latin); font-size: calc(46px * var(--u)); line-height: 1; vertical-align: -.1em; font-variant-numeric: lining-nums tabular-nums; }

/* ---------- 页 6：地点与流程 ---------- */
.venue { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); width: 100%; }
.venue-label { margin: 0 0 calc(10px * var(--u)); font-size: calc(12px * var(--u)); letter-spacing: .36em; padding-left: .36em; color: #4A4A47; }
.venue-name { margin: 0; font-size: calc(28px * var(--u)); font-weight: 700; letter-spacing: .1em; line-height: 1.4; }
.venue-hall { margin: calc(6px * var(--u)) 0 0; font-size: calc(14px * var(--u)); letter-spacing: .2em; }
.venue-addr { margin: calc(8px * var(--u)) 0 0; max-width: 24em; font-size: calc(13px * var(--u)); letter-spacing: .1em; line-height: 1.8; color: #4A4A47; }
.map-frame { margin: calc(16px * var(--u)) 0 0; width: 72%; aspect-ratio: 16 / 10; box-sizing: border-box; padding: calc(8px * var(--u)); background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 14px 30px rgba(0, 0, 0, .14); }
.map-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-frame.is-placeholder { display: flex; align-items: center; justify-content: center; }
.map-frame.is-placeholder span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 1px dashed #B5B5B0; color: #8A8A86; font-size: calc(12px * var(--u)); letter-spacing: .1em; }
.timeline { margin: calc(14px * var(--u)) 0 0; width: 72%; text-align: left; }
.timeline-label { margin: 0 0 calc(8px * var(--u)); text-align: center; font-size: calc(12px * var(--u)); letter-spacing: .36em; padding-left: .36em; color: #4A4A47; }
.timeline-body { position: relative; padding-left: calc(22px * var(--u)); }
.timeline-line { position: absolute; left: calc(5px * var(--u)); top: calc(6px * var(--u)); bottom: calc(6px * var(--u)); width: 1px; background: #4A4A47; transform: scaleY(0); transform-origin: top; transition: transform .9s var(--ease) .3s; }
.scene.is-active .timeline-line { transform: scaleY(1); }
.timeline-item { position: relative; display: flex; align-items: baseline; gap: calc(12px * var(--u)); padding: calc(4px * var(--u)) 0; opacity: 0; transform: translateY(calc(6px * var(--u))); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(.45s + var(--k, 0) * .28s); }
.scene.is-active .timeline-item { opacity: 1; transform: none; }
.timeline-dot { position: absolute; left: calc(-22px * var(--u) + 2px * var(--u)); top: calc(10px * var(--u)); width: calc(7px * var(--u)); height: calc(7px * var(--u)); border-radius: 50%; background: #fff; border: 1px solid #4A4A47; }
.timeline-time { font-family: var(--font-latin); font-size: calc(15px * var(--u)); letter-spacing: .06em; min-width: 4.4em; font-variant-numeric: lining-nums tabular-nums; }
.timeline-title { font-size: calc(14px * var(--u)); letter-spacing: .12em; }

/* ---------- 页 7：银箔流光 + 花瓣 ---------- */
.foil {
  background: linear-gradient(110deg, #fff 40%, #dfe3e0 50%, #fff 60%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: foil-sweep 3.5s linear infinite;
}
@keyframes foil-sweep { from { background-position: 120% 0; } to { background-position: -140% 0; } }
#petals { pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); }
#petals.is-on { opacity: 1; }
.petal {
  position: absolute; left: var(--x); top: -6%; width: var(--size); height: calc(var(--size) * 1.35); border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #F7F2E7, #F1EBDD); opacity: .9; box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  animation: petal-fall var(--dur) linear var(--delay) infinite;
}
@keyframes petal-fall {
  0% { transform: translate(0, 0) rotate(var(--rot)); }
  25% { transform: translate(var(--sway), 27vh) rotate(calc(var(--rot) + 90deg)); }
  50% { transform: translate(calc(var(--sway) * -1), 54vh) rotate(calc(var(--rot) + 180deg)); }
  75% { transform: translate(var(--sway), 81vh) rotate(calc(var(--rot) + 270deg)); }
  100% { transform: translate(0, 112vh) rotate(calc(var(--rot) + 360deg)); }
}

/* ---------- 页间漏光斜扫 ---------- */
#leak { pointer-events: none; overflow: hidden; }
#leak::before {
  content: ''; position: absolute; top: -20%; left: -40%; width: 45%; height: 140%; opacity: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen; transform: rotate(14deg);
}
#leak.is-on::before { animation: page-leak .9s ease-out both; }
@keyframes page-leak { 0% { opacity: 0; transform: translateX(0) rotate(14deg); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(340%) rotate(14deg); } }

/* ---------- 降级：无 WebGL / 减少动态 ---------- */
#app.is-low-fx #florals, #app.is-low-fx #envelope, #app.is-low-fx #envelope-mini, #app.is-low-fx #scenes { transform: none; }
#app.is-low-fx .foil { animation: none; background-position: 0 0; }
#app.is-low-fx .petal { display: none; }
@media (prefers-reduced-motion: reduce) {
  .foil { animation: none; }
  .petal { display: none; }
  .story-paper .paper-img img { animation: none; }
  .paper.is-settle .paper-inner { animation: none; }
  .env.is-leaking .env-leak, #leak.is-on::before { animation: none; }
}

/* ---------- 小屏（≤ 360 宽）微调 ---------- */
@media (max-width: 380px) {
  .story-stage { height: 56%; }
  .map-frame { width: 66%; }
}

/* ============================================================
   v5：电影感封面 + 光效动感 + 香槟金细节
   ============================================================ */
:root { --gold: #C9B48A; }

/* ---------- 封面页 ---------- */
.scene-cover { padding: 0; }
#app.is-cover .progress, #app.is-cover .music, #app.is-cover .swipe-hint { opacity: 0 !important; pointer-events: none; }
.cover { position: absolute; inset: 0; overflow: hidden; }
.cover-photo { position: absolute; inset: 0; background: #7d7d78; }
.cover-photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--cover-pos, 12% 40%); display: block; transform-origin: var(--cover-pos, 12% 40%); animation: cover-kb 12s ease-in-out infinite alternate; }  /* 02_额吻 人物偏左，对齐点左移避免裁掉新郎；换图时改 --cover-pos */
@keyframes cover-kb { from { transform: scale(1); } to { transform: scale(1.06); } }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(30, 30, 30, .22) 0%, rgba(30, 30, 30, .22) 65%, rgba(20, 20, 20, .62) 100%); }
.cover-shade::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(to bottom, rgba(20, 20, 20, .15) 0%, rgba(20, 20, 20, .5) 45%, rgba(20, 20, 20, 0) 100%); }   /* 顶部压暗：文字在壁画/雾光上可读 */
.cover-text { position: absolute; left: 0; right: 0; top: calc(var(--sat) + 9%); transform: none; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; pointer-events: none; }
.cover-text > * { pointer-events: auto; }
.cover-initials { width: calc(230px * var(--u)); color: var(--gold); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25)); }
.cover-initials .initials { width: 100%; height: auto; display: block; }
.cover-initials-ph { margin: 0; font-family: var(--font-script); font-size: calc(60px * var(--u)); color: var(--gold); }
.cover-names { margin: calc(2px * var(--u)) 0 0; font-size: calc(30px * var(--u)); font-weight: 500; letter-spacing: .3em; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6), 0 0 2px rgba(0, 0, 0, .35); }
.cover-date { margin: calc(12px * var(--u)) 0 0; font-family: var(--font-latin); font-size: calc(19px * var(--u)); font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.cover-tagline { margin: calc(14px * var(--u)) 0 0; font-size: calc(12px * var(--u)); color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cover-cta { position: absolute; left: 0; right: 0; top: 80%; margin: 0; display: flex; justify-content: center; transform: translateY(-50%); pointer-events: none; }
.cover-cta .cover-btn { pointer-events: auto; }   /* #scenes 整层 none，按钮必须单独放行 */
.cover-btn {
  appearance: none; cursor: pointer; min-width: calc(150px * var(--u)); padding: calc(11px * var(--u)) calc(30px * var(--u));
  border-radius: 999px; border: 1px solid var(--gold); background: rgba(255, 255, 255, .06); color: #fff;
  font: inherit; font-size: calc(14px * var(--u)); letter-spacing: .4em; text-indent: .4em; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.cover-btn[disabled] { cursor: default; color: rgba(255, 255, 255, .75); letter-spacing: .12em; text-indent: .12em; }
.cover-btn.is-ready { animation: breathe-btn 2.6s ease-in-out infinite; }

/* 封面文字入场：字距收拢 + 模糊清晰（--d 延迟）；点开启后逆向收场 */
.scene-cover.is-active .track-in { animation: track-in .9s var(--ease) both; animation-delay: var(--d, 0ms); }
.scene-cover.is-leaving-cover .track-in { animation: track-out .45s var(--ease) both; animation-delay: 0ms !important; }
@keyframes track-out { from { opacity: 1; letter-spacing: var(--ls, .12em); filter: blur(0); } to { opacity: 0; letter-spacing: calc(var(--ls, .12em) + .15em); filter: blur(4px); } }

/* ---------- 标题字距收拢入场（通用） ---------- */
.track-in { letter-spacing: var(--ls, .12em); }
.scene.is-active [data-reveal].track-in, .scene.is-active .track-in:not([data-reveal]) { animation: track-in .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + var(--d, 0ms) + 150ms); }
.scene.is-active [data-reveal].track-in { transition: none; opacity: 1; transform: none; }
@keyframes track-in { from { opacity: 0; letter-spacing: calc(var(--ls, .12em) + .6em); filter: blur(6px); } to { opacity: 1; letter-spacing: var(--ls, .12em); filter: blur(0); } }
.scene.is-leaving .track-in { animation: none; opacity: 0; transition: opacity .4s var(--ease); }

/* ---------- 切页：叠化 + 推近 ---------- */
.scene { transform: scale(1.04); transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(.2, .7, .2, 1), visibility 0s linear 1s; }
.scene.is-active { transform: scale(1); transition: opacity 1s var(--ease), transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.scene.is-leaving { transform: scale(.98); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.scene-cover, .scene-cover.is-active { transform: none; }

/* ---------- 柔光扫层 + 玻璃/相纸高光（同相位：切页时 #app 重置 is-sweeping） ---------- */
#sweep { pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
#sweep i { position: absolute; top: -30%; left: 0; width: 25%; height: 160%; opacity: 0; transform: translateX(-80%) rotate(-20deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); }
#app.is-sweeping #sweep i { animation: sweep-band 8s ease-in-out infinite; }
@keyframes sweep-band { 0% { opacity: 0; transform: translateX(-80%) rotate(-20deg); } 20% { opacity: .18; } 50% { opacity: .18; } 70% { opacity: 0; transform: translateX(480%) rotate(-20deg); } 100% { opacity: 0; transform: translateX(480%) rotate(-20deg); } }
.glass-card::after, .paper-inner::before { content: ''; position: absolute; inset: -20% -40%; pointer-events: none; z-index: 3; opacity: 0; background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: screen; }
#app.is-sweeping .glass-card::after, #app.is-sweeping .paper-inner::before { animation: sweep-gloss 8s ease-in-out infinite; }
@keyframes sweep-gloss { 0% { opacity: 0; transform: translateX(-60%); } 20% { opacity: .3; } 50% { opacity: .3; } 70% { opacity: 0; transform: translateX(60%); } 100% { opacity: 0; transform: translateX(60%); } }
.glass-card { overflow: hidden; }

/* ---------- 胶片颗粒常开 ---------- */
#grain { display: block; opacity: .05; }
#app.is-low-fx #grain { display: none; }

/* ---------- 轻触光涟漪 ---------- */
#ripples { pointer-events: none; overflow: hidden; }
.ripple { position: absolute; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .35) 40%, rgba(255, 255, 255, 0) 70%); mix-blend-mode: screen; animation: ripple .8s ease-out both; }
@keyframes ripple { from { transform: scale(0); opacity: .35; } to { transform: scale(1); opacity: 0; } }

/* ---------- 香槟金应用面 ---------- */
.initials-wrap { color: var(--gold); }
.initials-placeholder { color: var(--gold); }
.name-divider::before { background: linear-gradient(to bottom, transparent, var(--gold)); }
.name-divider::after { background: linear-gradient(to bottom, var(--gold), transparent); }
.grow-line { background: var(--gold); }
.venue-actions .pill, .btn { border-color: var(--gold); }
.timeline-dot { border-color: var(--gold); background: var(--gold); }
.timeline-line { background: rgba(210, 190, 148, .7); }
.progress i b { background: var(--gold); }
#app.is-sage .progress i b { background: var(--gold); }
.glass-card { border-color: rgba(210, 190, 148, .4); }
.wall-rule { display: block; width: calc(36px * var(--u)); height: 1px; background: var(--gold); margin: calc(-6px * var(--u)) 0 calc(14px * var(--u)); }
.card-head { padding: calc(28px * var(--u)) calc(20px * var(--u)) 0; text-align: center; }
.card-title { margin: 0; font-size: calc(44px * var(--u)); font-weight: 700; line-height: 1.25; color: var(--text); }
.card-body { padding-top: calc(16px * var(--u)); height: auto; }

/* ---------- 降级 ---------- */
#app.is-low-fx #sweep i, #app.is-low-fx .glass-card::after, #app.is-low-fx .paper-inner::before, #app.is-low-fx .ripple { animation: none; display: none; }
@media (prefers-reduced-motion: reduce) {
  #sweep i, .glass-card::after, .paper-inner::before, .ripple, .cover-photo img { animation: none; }
  .track-in, .scene-cover.is-active .track-in { animation-duration: .4s; }
}

/* ============================================================
   v6：银灰 × 香槟金（方案 A）
   ============================================================ */
:root { --gold: #D2BE94; --gold-hi: #DFC993; --gold-deep: #B8A176; --ivory: #EADFC4; --star: #F1E6CC; }

/* ---------- 枝条层（替代花簇）：香槟金线稿，仅描边，进入每页时生长 ---------- */
/* v7：内页金线枝条已移除，花簇回归（下方）；.branch 样式仅供封面内的枝条使用 */
.branch { position: absolute; display: block; height: auto; overflow: visible; }
.branch .stem { stroke-width: 1.3; opacity: .9; }
.branch .leaf path { stroke-width: 1.2; opacity: .75; }
.branch .leaf .vein { opacity: .35; }
/* 生长：主茎 1.2 s，叶片按 --k 每 40 ms 起 .5 s；is-grown 触发 */
.is-grown .branch .stem { animation: grow 1.2s var(--ease) both; }
.is-grown .branch .twig { animation-delay: .5s; }
.is-grown .branch .leaf path { animation: grow .5s var(--ease) both; animation-delay: calc(.35s + var(--k, 0) * 40ms); }
@keyframes grow { to { stroke-dashoffset: 0; } }
#app.is-low-fx .branch path { stroke-dashoffset: 0 !important; animation: none !important; }

/* ---------- 封面：香槟金层级 ---------- */
.cover-branches { position: absolute; inset: 0; color: var(--gold); opacity: .5; pointer-events: none; }
.cover-branches .branch-tl { left: -5%; top: calc(var(--sat) + 2%); width: 48%; }
.cover-branches .branch-br { right: -4%; bottom: 3%; width: 42%; }
.cover-frame { position: absolute; inset: calc(var(--sat) + 14px) 14px calc(var(--sab) + 14px) 14px; border: 1px solid rgba(210, 190, 148, .45); pointer-events: none; }
.cover-frame::before, .cover-frame::after, .cover-frame i { content: ''; position: absolute; width: 12px; height: 12px; border-color: var(--gold); border-style: solid; }
.cover-frame::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.cover-frame::after { right: -1px; top: -1px; border-width: 1px 1px 0 0; }
.cover-frame i:first-child { left: -1px; bottom: -1px; border-width: 0 0 1px 1px; }
.cover-frame i:last-child { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
#app.is-sweeping .cover-frame { animation: frame-glow 8s ease-in-out infinite; }
@keyframes frame-glow { 0%, 30% { border-color: rgba(210, 190, 148, .45); } 36% { border-color: rgba(223, 201, 147, .8); } 44%, 100% { border-color: rgba(210, 190, 148, .45); } }

.cover-initials { color: var(--gold-hi); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
.cover-initials .initials text { fill: currentColor; stroke: currentColor; }
.cover-initials-ph { color: var(--gold-hi); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
/* 花押微光：3.5 s 周期，幅度小于 Thank You 流光 */
.cover-initials .initials { animation: initials-shine 3.5s ease-in-out infinite; }
@keyframes initials-shine { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.cover-names { color: var(--ivory); text-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 18px rgba(0, 0, 0, .25); }
.cover-names .amp { font-family: var(--font-script); color: var(--gold-hi); font-size: 1.05em; margin: 0 .5em 0 .2em; letter-spacing: 0; }
.cover-date { color: var(--gold); text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.cover-tagline { color: var(--gold); opacity: .8; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.cover-btn { border-color: var(--gold); color: var(--ivory); }
.cover-btn[disabled] { color: rgba(234, 223, 196, .7); }
.cover-btn.is-ready { animation: breathe-gold 2.6s ease-in-out infinite; }
@keyframes breathe-gold { 0%, 100% { transform: scale(1); border-color: var(--gold); } 50% { transform: scale(1.035); border-color: var(--gold-hi); } }

/* ---------- 全站细节 ---------- */
.initials-wrap { color: var(--gold-hi); }
.foil { background-image: linear-gradient(110deg, #fff 40%, var(--gold-hi) 50%, #fff 60%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; }
#app.is-low-fx .cover-initials .initials, #app.is-low-fx .cover-frame { animation: none; }
@media (prefers-reduced-motion: reduce) { .cover-initials .initials, .cover-frame { animation: none; } .is-grown .branch path { animation-duration: .01s; } }


/* ============================================================
   v7：花簇回归（香槟色系）+ 内容重排
   ============================================================ */
#florals { pointer-events: none; opacity: .85; transition: opacity .9s var(--ease); }
#florals[data-scene="story"], #florals[data-scene="wall"] { opacity: .7; }
#app.is-cover #florals { opacity: 0; }
.floral { position: absolute; display: block; height: auto; }
.floral-top-left { left: -9%; top: calc(var(--sat) - 5%); width: 70%; }
.floral-bottom { left: -8%; bottom: -5%; width: 78%; }
#app.is-sage .floral-bottom { left: auto; right: -8%; transform: scaleX(-1); }

/* 故事页：相纸更大、文案块下移 */
.story-stage { top: calc(var(--sat) + 8%); height: 60%; }
.story-paper { width: calc(var(--box-w) * 0.88); }   /* 规格 92% 加 2° 倾斜后四角会出界，取 88% */
.story-paper.is-portrait { width: calc(var(--box-w) * 0.76); }
.story-caption { top: 64%; }
.story-caption .story-tag { margin-top: 0; }
.story-text { margin-top: calc(12px * var(--u)); }
.story-dots { bottom: calc(var(--sab) + 12%); }
/* 照片墙：网格高度上限 68%，标题约 12% */
.scene-wall { justify-content: flex-start; padding-top: calc(var(--sat) + var(--box-h) * 0.09); }
.wall { justify-content: flex-start; padding-top: 0; }
.wall-title { margin-bottom: calc(10px * var(--u)); }
/* 日期页 / 地点页：内容整体上移 5%，底部留给花簇 */
.scene-date, .scene-venue { padding-bottom: calc(var(--sab) + var(--box-h) * 0.10 + 60px * var(--u)); }
.scene-date .date, .scene-venue .venue { transform: translateY(-5%); }