:root{
  --bg:#120b1a;
  --bg-2:#1a1026;
  --pink:#f5a8c3;
  --pink-deep:#e77da3;
  --purple:#b8a0e8;
  --gold:#e8c9a0;
  --text:#f5edf6;
  --text-2:#b8a5c6;
  --text-3:#7e6c8e;
  --font-serif:"Georgia","Songti SC","STSong","SimSun",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);line-height:1.8;overflow-x:hidden}
img{max-width:100%;display:block}

/* ---------- 开场 ---------- */
.cover{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 20px;position:relative;
  background:radial-gradient(900px 600px at 50% 20%,rgba(231,125,163,.14) 0%,transparent 60%),
             radial-gradient(700px 500px at 80% 90%,rgba(184,160,232,.10) 0%,transparent 55%);
}
.cover .kicker{font-size:12px;letter-spacing:6px;color:var(--text-3);margin-bottom:22px}
.cover .name{font-family:var(--font-serif);font-size:clamp(34px,8vw,60px)}
.cover .name .amp{color:var(--pink);padding:0 14px;font-size:.7em}
.cover .line{
  width:56px;height:1px;margin:34px auto;background:linear-gradient(90deg,transparent,var(--pink),transparent);
}
.cover .sub{color:var(--text-2);font-size:14px;max-width:420px}
.cover .scroll{position:absolute;bottom:30px;font-size:12px;color:var(--text-3);letter-spacing:3px}
.cover .scroll::after{content:"";display:block;width:1px;height:30px;margin:8px auto 0;background:linear-gradient(var(--pink),transparent)}

/* ---------- 叙事段 ---------- */
.story{max-width:720px;margin:0 auto;padding:20px 24px 0}
.epoch{
  padding:70px 0 30px;text-align:center;
}
.epoch .epoch-date{font-family:var(--font-serif);font-size:16px;color:var(--pink);letter-spacing:2px}
.epoch .epoch-line{width:40px;height:1px;margin:16px auto;background:rgba(245,168,195,.4)}
.epoch .epoch-title{font-family:var(--font-serif);font-size:clamp(26px,5vw,38px)}
.epoch .epoch-text{color:var(--text-2);font-size:15px;margin-top:18px;white-space:pre-wrap}
.epoch .epoch-photo{margin:26px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.epoch.milestone .epoch-title{color:var(--pink)}
.epoch.anniv .epoch-title{color:var(--gold);font-size:clamp(20px,4vw,28px)}
.epoch.daily .epoch-title{font-size:clamp(20px,4vw,28px)}

/* 进入动画 */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- 求婚终章 ---------- */
.finale{
  min-height:110vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 24px;position:relative;
}
.finale .pre{font-size:13px;letter-spacing:5px;color:var(--text-3);margin-bottom:40px}
.finale .q{font-family:var(--font-serif);font-size:clamp(30px,7vw,54px);line-height:1.5}
.finale .q .name{color:var(--pink)}
.finale .q2{font-family:var(--font-serif);font-size:clamp(24px,5.5vw,44px);color:var(--purple);margin-top:14px}
.finale .btn-row{margin-top:52px;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-block;padding:15px 46px;border-radius:99px;font-size:15px;letter-spacing:2px;
  background:linear-gradient(135deg,var(--pink-deep),var(--purple));color:#fff;
  border:none;cursor:pointer;transition:transform .25s,box-shadow .25s;
}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 40px rgba(231,125,163,.4)}
.btn.ghost{
  background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--text-2);
}
.btn.ghost:hover{box-shadow:none;transform:translateY(-3px)}
.finale .yes-text{
  margin-top:34px;font-family:var(--font-serif);font-size:clamp(22px,4.5vw,34px);color:var(--gold);
  opacity:0;transform:scale(.9);transition:.8s ease;letter-spacing:2px;
}
.finale .yes-text.show{opacity:1;transform:scale(1)}
.finale .sign{margin-top:26px;color:var(--text-3);font-size:13px;letter-spacing:2px}

/* ---------- 烟花画布 ---------- */
#fx{position:fixed;inset:0;pointer-events:none;z-index:50}

/* ---------- 仪式感开场 ---------- */
#introOverlay{
  position:fixed;inset:0;z-index:200;
  background:radial-gradient(1100px 700px at 50% 30%,#231536 0%,#120b1a 65%);
  display:flex;align-items:center;justify-content:center;text-align:center;
  transition:opacity 1s ease,visibility 1s;
}
#introOverlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.io-seal{
  width:96px;height:96px;margin:0 auto 26px;border-radius:50%;
  background:rgba(245,168,195,.1);border:1px solid rgba(245,168,195,.4);
  display:flex;align-items:center;justify-content:center;font-size:40px;
  animation:sealBeat 2s ease-in-out infinite;
}
@keyframes sealBeat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(231,125,163,.3)}50%{transform:scale(1.06);box-shadow:0 0 0 18px rgba(231,125,163,0)}}
.io-title{font-family:var(--font-serif);font-size:clamp(22px,4.5vw,30px);letter-spacing:2px}
.io-sub{color:var(--text-3);font-size:13px;margin:12px 0 34px;letter-spacing:3px}
#introBtn{
  padding:15px 44px;border-radius:99px;font-size:15px;letter-spacing:3px;cursor:pointer;
  background:linear-gradient(135deg,var(--pink-deep),var(--purple));color:#fff;border:none;
  transition:transform .25s,box-shadow .25s;
}
#introBtn:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(231,125,163,.4)}

/* ---------- 照片闪回 ---------- */
#flashLayer{
  position:fixed;inset:0;z-index:190;background:#0d0813;
  display:none;align-items:center;justify-content:center;
  transition:opacity .6s ease;
}
#flashLayer.on{display:flex}
#flashLayer img{
  max-width:82vw;max-height:70vh;border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
  animation:flashPop .62s ease both;
}
@keyframes flashPop{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}

/* ---------- 求婚成功 星空署名 ---------- */
#namesOverlay{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;transition:opacity 1.4s ease;
}
#namesOverlay.show{opacity:1}
.no-names{
  font-family:var(--font-serif);font-size:clamp(40px,10vw,88px);letter-spacing:6px;
  text-shadow:0 0 24px rgba(245,168,195,.75),0 0 70px rgba(231,125,163,.4);
  animation:nameGlow 2.4s ease-in-out infinite;
}
@keyframes nameGlow{
  0%,100%{text-shadow:0 0 22px rgba(245,168,195,.65),0 0 60px rgba(231,125,163,.3)}
  50%{text-shadow:0 0 34px rgba(245,168,195,1),0 0 100px rgba(231,125,163,.55)}
}
.no-names .no-heart{color:var(--pink-deep);padding:0 18px;font-size:.7em;vertical-align:8px}
.no-sub{color:var(--gold);letter-spacing:8px;font-size:15px;margin-top:26px;text-shadow:0 0 16px rgba(232,201,160,.6)}

footer{padding:60px 20px 90px;text-align:center;color:var(--text-3);font-size:12px}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle{
  position:fixed;top:18px;right:18px;z-index:250;
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);color:var(--text-2);cursor:pointer;
  font-size:18px;display:flex;align-items:center;justify-content:center;transition:.3s;
}
.theme-toggle:hover{color:var(--pink);transform:rotate(20deg)}

/* ---------- 亮色主题 ---------- */
[data-theme="light"]{
  --bg:#fdf6f0;
  --bg-2:#f7eee2;
  --pink:#c44569;
  --pink-deep:#a93858;
  --purple:#8b5fbf;
  --gold:#d4a040;
  --text:#3d2b3a;
  --text-2:#7a5e6f;
  --text-3:#a8909a;
}
[data-theme="light"] .cover{
  background:radial-gradient(900px 600px at 50% 20%,rgba(196,69,105,.08) 0%,transparent 60%),
             radial-gradient(700px 500px at 80% 90%,rgba(139,95,191,.06) 0%,transparent 55%);
}
[data-theme="light"] .epoch .epoch-line{background:rgba(196,69,105,.3)}
[data-theme="light"] .epoch .epoch-photo{box-shadow:0 20px 60px rgba(196,69,105,.12)}
[data-theme="light"] .btn.ghost{border-color:rgba(196,69,105,.2);color:var(--text-2)}
[data-theme="light"] #introOverlay{
  background:radial-gradient(1100px 700px at 50% 30%,#fce8ed 0%,#fdf6f0 65%);
}
[data-theme="light"] .io-seal{
  background:rgba(196,69,105,.08);border-color:rgba(196,69,105,.3);
}
[data-theme="light"] #flashLayer{background:#f5ebe0}
[data-theme="light"] .theme-toggle{
  background:rgba(255,255,255,.6);border-color:rgba(196,69,105,.12);color:var(--text-2);
}