/* ============================================
   高级版设计系统 · premium.css
   杂志编辑风 + 电影感 · 前卫时尚
   配合 婚庆特效.js 使用；每份请帖用 CSS 变量定义主题
   ============================================ */

/* ---------- 主题变量（默认·暖白极简） ---------- */
:root{
  --bg:#f6f3ee;            /* 主背景 */
  --bg2:#efe9df;           /* 次背景 */
  --ink:#22201c;           /* 正文墨色 */
  --sub:#8b8476;           /* 次级文字 */
  --accent:#a08a5a;        /* 强调·香槟金 */
  --accent-2:#cbb88a;      /* 亮金 */
  --line:rgba(34,32,28,.14);
  --card:rgba(255,255,255,.55);
  --serif:"Songti SC","Noto Serif SC","STSong","SimSun",serif;
  --sans:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,sans-serif;
  --glow:rgba(160,138,90,.35);
}
/* 深色主题覆盖示例（奢华暗金/璀璨星河用） */
.pm-dark{
  --bg:#10100e; --bg2:#181715;
  --ink:#f0e9dc; --sub:#9c9483;
  --accent:#c9a24b; --accent-2:#e7cd8f;
  --line:rgba(240,233,220,.16);
  --card:rgba(255,255,255,.05);
  --glow:rgba(201,162,75,.4);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  background:#000;
  display:flex;justify-content:center;
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
.phone{
  width:100%;max-width:480px;min-height:100vh;
  background:var(--bg);color:var(--ink);
  position:relative;overflow:hidden;
}

/* ---------- 胶片噪点纹理 ---------- */
.phone::after{
  content:"";position:absolute;inset:0;z-index:60;pointer-events:none;opacity:.05;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- 封面：电影感全屏 ---------- */
.cover{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 30px;overflow:hidden;
}
.cover::before{ /* 氛围光 */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%,var(--glow),transparent 62%),
    radial-gradient(ellipse 70% 45% at 50% 112%,var(--glow),transparent 60%);
  opacity:.5;
}
.cover>*{position:relative;z-index:2;}
.cover-in{animation:pmRise 1.2s cubic-bezier(.22,1,.36,1) both;}
@keyframes pmRise{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}

.kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--sub);
}
.c-title{
  font-family:var(--serif);font-size:clamp(44px,13vw,60px);
  font-weight:500;line-height:1.18;margin:26px 0 8px;letter-spacing:.06em;
}
.c-title em{font-style:normal;}
.c-title .and{display:inline-block;padding:0 .12em;font-size:.62em;color:var(--accent);font-family:var(--serif);font-style:normal;}
.c-rule{width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin:26px auto;}
.c-meta{font-size:12px;letter-spacing:.5em;color:var(--sub);text-transform:uppercase;}
.c-place{margin-top:12px;font-size:13px;letter-spacing:.32em;color:var(--sub);}
.cover-foot{
  position:absolute;bottom:36px;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:center;gap:14px;
  color:var(--sub);font-size:11px;letter-spacing:.4em;
  animation:pmFloat 2.4s ease-in-out infinite;
}
.cover-foot .line{width:34px;height:1px;background:var(--accent);opacity:.7;}
@keyframes pmFloat{0%,100%{transform:translateY(0);opacity:.75;}50%{transform:translateY(6px);opacity:1;}}

/* ---------- 章节 ---------- */
.sec{padding:64px 30px;position:relative;z-index:2;}
.sec-head{text-align:center;margin-bottom:34px;}
.sec-head .kicker{display:block;margin-bottom:12px;}
.sec-head h2{
  font-family:var(--serif);font-size:30px;font-weight:500;letter-spacing:.32em;
}
.sec-head::after{
  content:"";display:block;width:40px;height:1px;margin:20px auto 0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

/* ---------- 滚动入场 ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,1,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal-blur{opacity:0;transform:translateY(26px) scale(.98);filter:blur(8px);
  transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.22,1,.36,1),filter 1.1s ease;}
.reveal-blur.in{opacity:1;transform:none;filter:blur(0);}

/* ---------- 邀请语 ---------- */
.words{
  font-family:var(--serif);font-size:18px;line-height:2.35;letter-spacing:.09em;
  text-align:center;color:var(--ink);
}
.words .hl{color:var(--accent);}
.sign{
  margin-top:30px;text-align:center;font-size:15px;letter-spacing:.5em;color:var(--accent);
}
.sign-roman{
  margin-top:12px;text-align:center;font-size:10px;letter-spacing:.55em;
  text-transform:uppercase;color:var(--sub);
}

/* ---------- 照片 ---------- */
.photo{position:relative;overflow:hidden;margin-bottom:18px;}
.photo img{width:100%;display:block;object-fit:cover;}
.photo-arc{ /* 拱形 */
  border-radius:200px 200px 22px 22px;overflow:hidden;margin:0 auto 16px;
  box-shadow:0 30px 70px rgba(0,0,0,.16);
}
.photo-arc img{width:100%;height:auto;display:block;}
.photo-arc.tall img{aspect-ratio:4/5;object-fit:cover;}
.photo-cap{
  text-align:center;font-size:10px;letter-spacing:.5em;text-transform:uppercase;
  color:var(--sub);margin-top:6px;margin-bottom:26px;
}

/* 视差照片（配合 婚庆特效.js 的 .pm-parallax） */
.pm-parallax{will-change:transform;}

/* ---------- 信息卡 ---------- */
.info{
  position:relative;text-align:center;padding:44px 30px;
  border:1px solid var(--line);background:var(--card);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.05);
}
.info .info-kicker{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--sub);margin-bottom:20px;}
.info .info-date{
  font-family:var(--serif);font-size:clamp(44px,14vw,56px);font-weight:500;
  letter-spacing:.06em;color:var(--ink);line-height:1.1;
}
.info .info-date small{font-size:.4em;letter-spacing:.2em;color:var(--accent);}
.info .info-rule{width:44px;height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,var(--accent),transparent);}
.info-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px dashed var(--line);}
.info-row:last-of-type{border-bottom:none;}
.info-row .lbl{font-size:12px;letter-spacing:.3em;color:var(--sub);white-space:nowrap;}
.info-row .val{font-size:15px;letter-spacing:.12em;color:var(--ink);text-align:right;line-height:1.7;}

/* ---------- 页脚 ---------- */
.foot{
  padding:60px 30px 80px;text-align:center;
  font-size:11px;letter-spacing:.4em;color:var(--sub);line-height:2.4;
}
.foot .mono{font-family:var(--serif);font-size:22px;letter-spacing:.3em;color:var(--accent);margin-bottom:10px;}

/* ---------- 信封开场·高级版覆盖 ---------- */
.fx-env-title{font-family:var(--serif) !important;font-size:clamp(24px,7vw,36px) !important;letter-spacing:.28em !important;}
.fx-env-sub{font-family:var(--sans) !important;font-size:11px !important;letter-spacing:.5em !important;}

/* ---------- 特效组件·高级版覆盖 ---------- */
.fx-envelope .fx-env-back,.fx-envelope .fx-env-front,
.fx-envelope .fx-env-pocket,.fx-envelope .fx-env-flap{
  background:linear-gradient(160deg,var(--fx-env2,#d8d2c6),var(--fx-env,#c4b89f)) !important;
  border-radius:6px !important;
}
.fx-env-flap{background:linear-gradient(160deg,var(--fx-env3,#efe9dd),var(--fx-env2,#d8d2c6)) !important;}
.fx-env-seal{width:56px;height:56px;font-size:20px;background:radial-gradient(circle at 35% 30%,var(--accent-2),var(--accent)) !important;font-family:var(--serif);}
.fx-env-letter{background:#fff !important;}
.fx-env-letter .fx-letter-h{font-family:var(--serif);letter-spacing:.3em;color:var(--accent) !important;}
.fx-env-letter .fx-letter-s{font-size:10px;letter-spacing:.55em;color:var(--sub);}

/* 音乐按钮：极简玻璃 */
.fx-music-btn{width:46px;height:46px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 24px rgba(0,0,0,.22);}
.pm-dark .fx-music-btn,.pm-dark .fx-top-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);}
.fx-top-btn{width:38px;height:38px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);}

/* 轮播：细线 + 柔和投影 */
.fx-swiper{border-radius:4px;box-shadow:0 26px 60px rgba(0,0,0,.16);}
.fx-swiper .fx-dot{width:5px;height:5px;background:rgba(255,255,255,.55);}
.fx-swiper .fx-dot.fx-on{width:20px;background:#fff;}
.fx-swiper .fx-arrow{width:30px;height:30px;background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.5);}

/* 相册：极简网格 */
.fx-album-page{background:transparent;backdrop-filter:none;padding:6px;gap:8px;}
.fx-album-page .fx-album-cell{border-radius:4px;box-shadow:0 10px 26px rgba(0,0,0,.18);}
.fx-album-page .fx-album-cell::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border-radius:4px;}
.fx-album-h span{font-size:11px;letter-spacing:.5em;text-transform:uppercase;}
.fx-album-h::before,.fx-album-h::after{width:34px;}
.fx-album-arrow{border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);}
.fx-album-count{font-size:11px;letter-spacing:.25em;}
.fx-album-count b{color:var(--accent);}

/* 祝福墙：纸片风 */
.fx-guest-form{border-radius:4px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(10px);}
.fx-guest-form input,.fx-guest-form textarea{background:#fff;border-radius:3px;}
.pm-dark .fx-guest-form input,.pm-dark .fx-guest-form textarea{background:#24211c;color:#f0e9dc;}
.fx-guest-btn{border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));letter-spacing:.3em;box-shadow:none;}
.fx-guest-card{border-radius:3px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(8px);}
.fx-guest-card .fx-g-card-txt{color:var(--ink);}
.fx-guest-card .fx-g-card-name{color:var(--sub);}
.pm-dark .fx-guest-card .fx-g-card-txt{color:#f0e9dc;}
.pm-dark .fx-guest-card .fx-g-card-name{color:#9c9483;}

/* 进度条：细香槟金 */
.fx-progress{height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent));box-shadow:0 0 8px var(--glow);}

/* 标题流光 */
.fx-shine{background:linear-gradient(100deg,var(--accent) 20%,#fff 42%,var(--accent) 60%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;}

/* ---------- 分享海报页通用 ---------- */
.pm-page-title{
  text-align:center;font-family:var(--serif);font-size:30px;letter-spacing:.3em;
  padding:46px 0 6px;
}
.pm-page-sub{text-align:center;font-size:11px;letter-spacing:.5em;color:var(--sub);text-transform:uppercase;margin-bottom:30px;}

/* ---------- 首页 11 卡 ---------- */
.pm-hero{padding:74px 30px 30px;text-align:center;position:relative;}
.pm-hero .kicker{display:block;margin-bottom:18px;}
.pm-hero h1{
  font-family:var(--serif);font-size:clamp(40px,12vw,54px);font-weight:500;
  letter-spacing:.08em;line-height:1.2;
}
.pm-hero h1 .and{color:var(--accent);font-size:.6em;padding:0 .1em;}
.pm-hero .meta{margin-top:16px;font-size:11px;letter-spacing:.45em;color:var(--sub);text-transform:uppercase;}
.pm-hero .rule{width:64px;height:1px;margin:30px auto 0;background:linear-gradient(90deg,transparent,var(--accent),transparent);}

.pm-list{padding:14px 30px 70px;display:flex;flex-direction:column;gap:26px;}
.pm-card{
  display:flex;gap:16px;align-items:center;text-decoration:none;color:inherit;
  padding:18px;border:1px solid var(--line);background:var(--card);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;
}
.pm-card:active{transform:scale(.985);}
.pm-card:hover{border-color:var(--accent);box-shadow:0 18px 44px rgba(0,0,0,.08);}
.pm-card .num{
  flex:0 0 auto;width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:20px;letter-spacing:.05em;
  border:1px solid var(--line);border-radius:50%;color:var(--accent);
}
.pm-card .body{flex:1;min-width:0;}
.pm-card .body .t{font-family:var(--serif);font-size:19px;letter-spacing:.1em;margin-bottom:5px;}
.pm-card .body .d{font-size:12px;line-height:1.75;color:var(--sub);letter-spacing:.05em;}
.pm-card .go{flex:0 0 auto;font-size:12px;letter-spacing:.3em;color:var(--accent);white-space:nowrap;}
.pm-thumb{position:relative;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);}
.pm-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.22,1,.36,1);}
.pm-card:hover .pm-thumb img{transform:scale(1.06);}

@media (max-width:380px){
  .sec{padding:54px 24px;}
  .pm-list{padding:10px 22px 60px;}
}