/* ===== 区翔 & 李丹晨 · 婚礼邀请函 ===== */
@font-face{
  font-family:'Script';
  src:url('fonts/script.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Hand';
  src:url('fonts/hand.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Signature';
  src:url('fonts/allura.woff2') format('woff2');
  font-display:swap;
}
:root{
  --ink:#2b2b29;
  --ink-soft:#3a3a38;
  --red:#eb4c33;
  --paper:#f0eeea;
  --deep-red:#8e2b2b;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:calc(100vw / 7.5)}
@media (min-width:520px){ html{font-size:69.33px} }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.page{
  position:relative;
  max-width:520px;
  margin:0 auto;
  background:
    url('grain.png') top left repeat,
    url('bg.png') top center repeat-y,
    var(--paper);
  background-size:2.1rem 2.1rem, 100% auto, auto;
  overflow:hidden;
  min-height:100vh;
}

/* ---- 通用 ---- */
.label{
  font-family:'Courier New',Courier,monospace;
  font-weight:700;
  font-size:.26rem;
  letter-spacing:.02em;
  text-align:center;
  color:var(--deep-red);
}
.line-lg{font-size:.28rem;letter-spacing:.03em;text-align:center;color:var(--ink)}
.line-md{font-size:.27rem;letter-spacing:.02em;text-align:center;color:var(--ink)}
.script-lg,.script-md,.script-sm{
  font-family:'Script',cursive;
  font-weight:400;
  color:var(--ink);
  text-align:center;
}
.block{margin-top:1.40rem}
.block.date{margin-top:0}
.block.dress{margin-top:1.46rem}

/* ---- 楼层:一屏一段 ---- */
.floor{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:.6rem 0 1.15rem;
}
.floor-1{padding-top:.2rem}

/* ---- 首屏底部:字母堆 + 日期 ---- */
.pile-wrap{margin-top:min(1.88rem, 11vh);position:relative;z-index:3}
.letter-pile{
  position:relative;
  width:100%;height:.90rem;
  pointer-events:none;
}
.letter-pile span{
  position:absolute;
  font-family:'Hand',cursive;
  font-size:.31rem;
  color:#3f3c3a;
  line-height:1;
  white-space:pre;
  transform-origin:50% 50%;
}
.hero-date{
  text-align:center;
  font-family:'Hand',cursive;
  font-size:.26rem;
  letter-spacing:.06em;
  color:var(--deep-red);
  margin-top:.22rem;
}

/* ---- 开屏:经文 → 沙漏落字 ---- */
.splash{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  background:
    url('grain.png') top left repeat,
    url('bg.png') top center repeat-y,
    var(--paper);
  background-size:2.1rem 2.1rem, 100% auto, auto;
  transition:opacity 1.75s cubic-bezier(.4,0,.3,1);
}
.splash.fade{opacity:0}
.splash.gone{display:none}
.verse{
  padding:0 .3rem;
  text-align:center;
  font-family:'Hand',cursive;
  color:#90302e;
  font-size:.31rem;
  line-height:1.58;
  opacity:0;
  transform:translateY(.14rem);
  margin-bottom:22vh;
  transition:opacity 1.15s var(--ease-soft),transform 1.15s var(--ease-soft);
}
.verse.in{opacity:1;transform:translateY(0)}
.verse .sp{white-space:pre}
.skip-tip{
  position:absolute;left:0;right:0;bottom:.6rem;
  text-align:center;font-size:.20rem;letter-spacing:.16em;
  color:var(--ink-soft);opacity:0;
  transition:opacity .8s ease;
}
.skip-tip.in{opacity:.42}
.fall-layer{position:fixed;inset:0;z-index:91;pointer-events:none}
.fall-layer{color:#90302e}
.fall-layer span{
  position:fixed;left:0;top:0;
  font-family:'Hand',cursive;
  color:inherit;
  line-height:1;
  white-space:pre;
  transform-origin:50% 50%;
  will-change:transform;
}
/* 全局落星:整站持续 */
.star-layer{
  position:fixed;inset:0;z-index:60;
  pointer-events:none;
  overflow:hidden;
}
.star-layer img{
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform,opacity;
  opacity:0;
}
/* 开屏期间主体先隐藏 */
.page.pre{opacity:0}
.page{transition:opacity 1.75s cubic-bezier(.4,0,.3,1)}

/* ---- 背景音乐开关(右上角) ---- */
.bgm-btn{
  position:fixed;
  top:calc(.30rem + env(safe-area-inset-top, 0px));
  right:.30rem;
  z-index:95;
  width:.72rem;height:.72rem;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  background:rgba(250,248,245,.72);
  border:1px solid rgba(235,76,51,.55);
  border-radius:50%;
  color:var(--red);
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .3s ease,transform .2s ease;
}
.bgm-btn:active{transform:scale(.92)}
.bgm-btn svg{width:.40rem;height:.40rem;display:block;overflow:visible}
.bgm-btn .slash{opacity:1;transition:opacity .25s ease}
.bgm-btn .note{opacity:.55;transition:opacity .25s ease}
.bgm-btn.on .slash{opacity:0}
.bgm-btn.on .note{opacity:1}
.bgm-btn.on svg{animation:bgmSpin 7s linear infinite}
@keyframes bgmSpin{ to{transform:rotate(360deg)} }
@media (prefers-reduced-motion:reduce){
  .bgm-btn.on svg{animation:none}
}

/* ---- 滚屏触发入口 ---- */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:.30rem;
  transform:translateX(-50%);
  width:.92rem;height:.62rem;
  display:flex;align-items:center;justify-content:center;
  padding:0;background:transparent;border:none;
  color:var(--ink-soft);
  opacity:.62;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:opacity .3s ease;
  animation:cueBob 2.1s ease-in-out infinite;
}
.scroll-cue svg{width:.62rem;height:.37rem;display:block}
.scroll-cue:active{opacity:1}
.scroll-cue.hide{opacity:0;pointer-events:none}
.scroll-cue.to-top{color:var(--deep-red);opacity:.5;animation-name:cueBobUp}
@keyframes cueBob{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(.09rem)}
}
@keyframes cueBobUp{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-.09rem)}
}
@media (prefers-reduced-motion:reduce){
  .scroll-cue{animation:none}
}

/* ================= 动效 ================= */
:root{ --ease-soft:cubic-bezier(.22,.68,.32,1); }

/* 区块整体渐入 */
.js .reveal{opacity:0;transform:translateY(.22rem);transition:opacity .95s var(--ease-soft),transform .95s var(--ease-soft)}
.reveal.on{opacity:1;transform:none}

/* 区块内元素错落入场(延迟由 JS 按顺序写入) */
.js [data-rv]{
  opacity:0;transform:translateY(.20rem);
  transition:opacity .8s var(--ease-soft),transform .8s var(--ease-soft);
}
.on [data-rv]{opacity:1;transform:none}

/* 1. 首屏手写标题:逐笔写出 */
.js .signature{clip-path:inset(0 100% -18% 0)}
.on .signature{animation:writeIn 1.65s cubic-bezier(.42,.02,.28,1) .28s forwards}
@keyframes writeIn{ to{clip-path:inset(0 -6% -18% 0)} }

/* 2. 照片:轻微推近入场 + 滚动视差 */
.par{will-change:transform}
.js .photo-main,.js .bw img{
  opacity:0;transform:scale(1.055);
  transition:opacity 1.25s var(--ease-soft),transform 1.5s var(--ease-soft);
}
.on .photo-main,.bw.on img{opacity:1;transform:none}
.hero.on .photo-main{transition-delay:.12s}

/* 3. 红色线圈:从中间向两侧描绘出来 */
.js .squiggles img{clip-path:inset(0 100% 0 0)}
.js .squiggles img:last-child{clip-path:inset(0 0 0 100%)}
.on .squiggles img:first-child{animation:drawR 1.15s var(--ease-soft) .18s forwards}
.on .squiggles img:last-child{animation:drawL 1.15s var(--ease-soft) .18s forwards}
@keyframes drawR{ to{clip-path:inset(0 -4% 0 0)} }
@keyframes drawL{ to{clip-path:inset(0 0 0 -4%)} }

/* 4. 时间轴弧线:笔尖描过 */
.js .tl-dash .arc{stroke-dasharray:1 1;stroke-dashoffset:1}
.on .tl-dash .a1{animation:strokeIn .85s var(--ease-soft) .62s forwards}
.on .tl-dash .a2{animation:strokeIn .85s var(--ease-soft) .95s forwards}
@keyframes strokeIn{ to{stroke-dashoffset:0} }

/* 5. 涂鸦轻微呼吸(手绘"抖动"感,三个错开不同步) */
.tl-icon,.doodle-pig{transform-origin:50% 80%}
.on .tl-a .tl-icon{animation:boilA 3.4s ease-in-out .9s infinite}
.on .tl-b .tl-icon{animation:boilB 4.1s ease-in-out 1.2s infinite}
.on .tl-c .tl-icon{animation:boilA 3.7s ease-in-out 1.5s infinite reverse}
.closing.on .doodle-pig{animation:floatY 5.2s ease-in-out 1s infinite}
@keyframes boilA{
  0%,100%{transform:rotate(-.9deg) translateY(0)}
  50%{transform:rotate(1deg) translateY(-.035rem)}
}
@keyframes boilB{
  0%,100%{transform:rotate(.8deg) scale(1)}
  50%{transform:rotate(-.9deg) scale(1.022)}
}
@keyframes floatY{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-.6deg)}
  50%{transform:translateX(-50%) translateY(-.07rem) rotate(.6deg)}
}

/* 6. 色卡:依次弹入 */
.js .dot{opacity:0;transform:scale(.72) translateY(.12rem)}
.on .dots .dot{animation:popIn .62s cubic-bezier(.34,1.5,.5,1) forwards}
.on .dots .dot:nth-child(1){animation-delay:.30s}
.on .dots .dot:nth-child(2){animation-delay:.42s}
.on .dots .dot:nth-child(3){animation-delay:.54s}
@keyframes popIn{ to{opacity:1;transform:none} }

/* 7. 结尾手写语:三行依次写出 */
.js .closing .script-md{clip-path:inset(0 100% -25% 0)}
.closing.on .l1{animation:writeIn 1.15s cubic-bezier(.42,.02,.28,1) .15s forwards}
.closing.on .l2{animation:writeIn 1.05s cubic-bezier(.42,.02,.28,1) .95s forwards}
.closing.on .l3{animation:writeIn .95s cubic-bezier(.42,.02,.28,1) 1.6s forwards}

/* 8. 页脚落款手写 */
.js .foot .script-sm{clip-path:inset(0 100% -25% 0)}
.foot.on .script-sm{animation:writeIn 1.3s cubic-bezier(.42,.02,.28,1) .35s forwards}

/* 9. 送出按钮:呼吸微光,引导点击 */
.on .submit{animation:breathe 3.6s ease-in-out 1.4s infinite}
@keyframes breathe{
  0%,100%{box-shadow:0 .06rem .18rem rgba(235,76,51,.28)}
  50%{box-shadow:0 .08rem .34rem rgba(235,76,51,.46)}
}

/* 10. 回执成功:小猪跳入 */
.rsvp-done img{animation:dropIn .85s cubic-bezier(.34,1.5,.5,1) both}
.rsvp-done .done-title{animation:riseIn .7s var(--ease-soft) .18s both}
.rsvp-done .done-sub{animation:riseIn .7s var(--ease-soft) .30s both}
@keyframes dropIn{
  0%{opacity:0;transform:translateY(-.5rem) scale(.7) rotate(-8deg)}
  100%{opacity:1;transform:none}
}
@keyframes riseIn{ from{opacity:0;transform:translateY(.2rem)} to{opacity:1;transform:none} }

/* 11. 输入框聚焦:下划线由中间展开 */
.field{position:relative}
.field input{transition:border-color .3s ease}
.field input:focus{border-bottom-color:var(--red)}

/* 无障碍:系统开启"减弱动态效果"时全部降级为直接显示 */
@media (prefers-reduced-motion:reduce){
  .reveal,[data-rv],.photo-main,.bw img,.dot{opacity:1 !important;transform:none !important;transition:none !important}
  .signature,.closing .script-md,.foot .script-sm,.squiggles img{clip-path:none !important;animation:none !important}
  .tl-dash .arc{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .tl-icon,.doodle-pig,.submit,.rsvp-done img,.rsvp-done .done-title,.rsvp-done .done-sub{animation:none !important}
}

/* ---- 抬头 ---- */
.head{padding-top:0}
.kicker{
  text-align:center;
  font-family:'Songti SC','STSong','SimSun',serif;
  font-weight:700;
  font-size:.26rem;
  letter-spacing:.46em;
  text-indent:.46em;
  color:var(--ink);
}
.signature{
  font-family:'Signature',cursive;
  font-weight:400;
  font-size:.60rem;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  color:var(--ink);
  margin-top:min(.55rem, 3.4vh);
}
.names{
  display:flex;justify-content:center;align-items:center;gap:.14rem;
  font-family:'Songti SC','STSong','SimSun',serif;
  font-weight:700;
  font-size:.27rem;letter-spacing:.11em;text-indent:.11em;
  margin-top:min(.76rem, 4.7vh);
}
.names i{font-style:normal;font-family:'Signature',cursive;font-weight:400;font-size:.34rem;
  letter-spacing:0;text-indent:0;color:var(--red);position:relative;top:.02rem}
.script-lg{font-size:.92rem;line-height:1.08;margin-top:.16rem}
.script-sm{font-size:.34rem;line-height:1.42;margin-top:.10rem;color:var(--ink-soft)}

/* ---- 主照片区 ---- */
/* 参考图2: 照片宽 3.90rem,蜡笔块压在照片下缘 */
.hero{margin-top:min(1.06rem, 6.5vh);text-align:center}
.par{position:relative}
.photo-main{
  position:relative;z-index:2;
  display:block;margin:0 auto;
  width:3.90rem;height:min(5.85rem, 36vh);object-fit:cover;
  box-shadow:0 .06rem .28rem rgba(80,72,64,.16);
}
.crayon{
  position:absolute;z-index:1;
  left:50%;transform:translateX(-50%);
  bottom:-.32rem;width:5.35rem;
  pointer-events:none;
}
.doodle-crown{left:4.63rem;top:0;width:1.77rem;z-index:3}
.doodle-bear{left:.44rem;top:4.01rem;width:1.43rem;z-index:3}

/* ---- 日期/地点 ---- */
.block .line-lg{margin-top:.32rem}
.block .line-md{margin-top:.27rem}
.block.dress > .line-md{margin-top:.49rem}
.loc{font-size:.26rem;margin-top:.39rem !important}

/* ---- Dress Code ---- */
.dots{display:flex;justify-content:center;gap:.60rem;margin-top:.33rem}
.dot{display:flex;flex-direction:column;align-items:center}
.dot .c{
  width:.56rem;height:.56rem;border-radius:50%;
  box-shadow:0 .02rem .06rem rgba(0,0,0,.08);
}
.c-white{background:#fdfdfc;border:1px solid #e2ded8}
.c-beige{background:#ece3d9;border:1px solid #e0d5c8}
.c-camel{background:#c0b0a0;border:1px solid #b3a292}
.dot em{font-style:normal;font-size:.26rem;margin-top:.24rem;color:var(--ink)}
.dot b{font-weight:400;font-size:.26rem;margin-top:.14rem;color:var(--ink)}

/* ---- 流程 ---- */
.process{margin-top:0}
.tl-time{
  font-family:'Courier New',Courier,monospace;
  font-weight:700;
  color:#851a1a;
}
.squiggles{position:relative;display:flex;align-items:center;justify-content:center;padding:.55rem 0}
.squiggles img{width:2.23rem;position:absolute;top:.14rem}
.squiggles img:first-child{left:.14rem}
.squiggles img:last-child{right:.16rem}
.timeline{position:relative;height:3.15rem;margin-top:.5rem}
.tl-item{position:absolute;display:flex;flex-direction:column;align-items:center;width:1.6rem}
.tl-a{left:.68rem;top:.06rem}
.tl-b{left:2.95rem;top:1.13rem}
.tl-c{left:4.85rem;top:.02rem}
.tl-icon{display:block}
.tl-a .tl-icon{width:1.32rem}
.tl-b .tl-icon{width:1.2rem}
.tl-c .tl-icon{width:1.16rem}
.tl-time{font-size:.26rem;letter-spacing:.02em;margin-top:.12rem}
.tl-name{font-size:.22rem;letter-spacing:.06em;margin-top:.05rem;color:var(--ink-soft)}
.tl-dash{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}

/* ---- 结尾手写 ---- */
.closing{position:relative;margin-top:.55rem;padding:0 .5rem}
.doodle-pig{position:absolute;left:50%;top:-.06rem;transform:translateX(-50%);width:1.62rem;z-index:1}
.script-md{font-size:.4rem;line-height:1.2;position:relative;z-index:2}
.closing .l1{display:flex;justify-content:space-between;padding:0 .55rem}
.closing .l2{display:flex;justify-content:space-between;padding:.06rem 1.35rem 0}
.closing .l3{margin-top:.14rem}

/* ---- 黑白照 ---- */
.bw{margin-top:.85rem;text-align:center}
.bw img{width:4.42rem;display:block;margin:0 auto}

/* ---- RSVP ---- */
.rsvp{padding:0 1.05rem}
.rsvp .label{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:.26rem;
  letter-spacing:.03em;
  color:var(--ink);
}
.rsvp > .line-md{font-size:.26rem;margin-top:.20rem}
#rsvpForm{margin-top:.62rem}
.field{margin-top:.42rem}
.field label{
  display:block;font-size:.24rem;letter-spacing:.08em;color:var(--ink);
  margin-bottom:.18rem;text-align:center;
}
.field input{
  display:block;width:100%;
  background:transparent;border:none;outline:none;
  border-bottom:.015rem solid var(--ink-soft);
  font-size:.28rem;text-align:center;color:var(--ink);
  padding:.12rem 0;border-radius:0;
  caret-color:var(--red);
  font-family:inherit;
}
.field input::placeholder{color:#b9b6b0;letter-spacing:.04em}
.attend{display:flex;gap:.3rem;justify-content:center}
.att-btn{
  flex:1;max-width:2.4rem;
  font-size:.26rem;letter-spacing:.1em;color:var(--ink);
  background:transparent;
  border:.02rem solid var(--ink-soft);
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  padding:.16rem 0;height:.59rem;
  font-family:inherit;
  transition:all .25s ease;
}
.att-btn.sel{
  background:var(--red);border-color:var(--red);color:#fff;
  transform:rotate(-1.2deg) scale(1.03);
}
.stepper{display:flex;justify-content:center;align-items:center;gap:.5rem}
.stepper button{
  width:.56rem;height:.56rem;border-radius:50%;
  border:.02rem solid var(--ink-soft);background:transparent;
  font-size:.3rem;color:var(--ink);line-height:1;
  font-family:inherit;
}
.stepper span{font-size:.32rem;min-width:.6rem;text-align:center}
.submit{
  display:block;width:6.04rem;margin:.62rem -.19rem 0;
  background:var(--red);color:#fff;border:none;
  border-radius:255px 15px 225px 15px/15px 225px 15px 255px;
  font-size:.30rem;letter-spacing:.24em;text-indent:.24em;
  padding:.27rem 0;font-family:inherit;
  box-shadow:0 .06rem .18rem rgba(235,76,51,.28);
  transition:transform .2s ease;
}
.submit:active{transform:scale(.97)}
.submit:disabled{opacity:.6}
.form-msg{text-align:center;font-size:.2rem;color:var(--red);margin-top:.2rem;min-height:.26rem}
.rsvp-done{text-align:center;margin-top:.5rem}
.rsvp-done img{width:1.5rem}
.done-title{font-size:.28rem;letter-spacing:.08em;margin-top:.2rem}
.done-sub{font-size:.22rem;color:var(--ink-soft);margin-top:.12rem}

/* ---- 页脚 ---- */
.foot{padding:.9rem 0 .2rem}
.foot .script-sm{font-size:.44rem}