/* ==========================================================
   三十而立 · 生日局邀请函
   复古手账 + 中式印章
   ========================================================== */
:root{
  --wine-900:#0C0908;
  --wine-800:#171110;
  --wine-700:#231916;
  --wine-600:#2F221C;
  --cream:#F2E7D6;
  --cream-2:#E1D1B9;
  --gold:#D9A24A;
  --gold-d:#A97A28;
  --seal:#B8462A;
  --green:#9E5433;
  --orange:#C97A3C;
  --ink:#1C1410;
  --paper-line: rgba(28,20,16,.14);

  --serif: "Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans: "PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","Noto Sans SC",-apple-system,sans-serif;
  --hand: "Chalkboard SE","Bradley Hand","Marker Felt","Comic Sans MS",cursive;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#0A0706;
  font-family:var(--sans);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.phone{
  position:relative;
  width:100%;
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- 背景 ---------- */
.bg{
  position:fixed;inset:0;z-index:-2;
  max-width:480px;margin:0 auto;
  background:
    radial-gradient(132% 46% at 50% 104%, rgba(158,84,51,.52) 0%, rgba(158,84,51,0) 68%),
    radial-gradient(112% 58% at 50% -8%, #2C201A 0%, rgba(44,32,26,0) 64%),
    radial-gradient(84% 42% at 96% 60%, rgba(217,162,74,.10) 0%, rgba(217,162,74,0) 72%),
    linear-gradient(180deg,#171110 0%,#1D1613 36%,#120D0A 70%,#0B0806 100%);
}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.10;
  max-width:480px;margin:0 auto;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* ---------- 装饰 ---------- */
.deco{position:absolute;left:0;width:100%;pointer-events:none;opacity:.85}
.deco-top{top:-10px;height:120px}

/* ---------- HERO ---------- */
main{position:relative;padding:20px 22px 126px;z-index:1}
.hero{text-align:center;position:relative}

.stamp-row{display:flex;gap:9px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
.stamp{
  font-family:var(--hand);
  font-size:12px;letter-spacing:.14em;
  padding:5px 11px;border-radius:3px;
  transform:rotate(-2.4deg);
}
.st-green{background:rgba(158,84,51,.2);border:1.5px dashed rgba(158,84,51,.8);color:#E2B99C}
.st-cream:nth-child(2){transform:rotate(1.8deg);background:rgba(242,231,214,.12);border:1.5px dashed rgba(242,231,214,.6);color:#EADFC8;font-family:var(--sans);letter-spacing:.2em;font-size:11px}

.title-wrap{position:relative;display:inline-block;padding:6px 0 2px}
.title{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(52px,17vw,80px);
  line-height:1;
  letter-spacing:.06em;
  margin:0;
  color:#FBF3E3;
  text-shadow:
    0 2px 0 rgba(0,0,0,.28),
    0 0 26px rgba(217,162,74,.30),
    3px 3px 0 rgba(184,70,42,.42);
}
.seal{
  position:absolute;top:-14px;right:-30px;
  width:62px;height:62px;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  place-items:center;
  background:linear-gradient(150deg,#CC5A30,#933318);
  border-radius:6px;
  transform:rotate(-7deg);
  box-shadow:0 4px 12px rgba(0,0,0,.42), inset 0 0 0 2px rgba(242,231,214,.85), inset 0 0 0 4px rgba(184,70,42,1);
  font-family:var(--serif);font-weight:900;
  color:#FBF3E3;font-size:19px;line-height:1;
  opacity:.96;
}
.seal span{display:block;transform:translateY(1px)}
.seal::after{
  content:"";position:absolute;inset:0;border-radius:6px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2'/></filter><rect width='80' height='80' filter='url(%23m)'/></svg>");
  opacity:.22;mix-blend-mode:multiply;
}

.sub{
  font-size:14.5px;letter-spacing:.16em;
  color:#E4CFAE;margin:22px 0 14px;
}
.sub em{font-style:normal;font-family:var(--hand);color:var(--gold);font-size:19px;padding:0 2px}

.chip-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.chip{
  font-size:12.5px;letter-spacing:.06em;
  padding:6px 13px;border-radius:999px;
  background:rgba(242,231,214,.09);
  border:1px solid rgba(242,231,214,.28);
  color:#EFE2CA;
  backdrop-filter:blur(4px);
}

/* ---------- 封面 ---------- */
.photo-wrap{position:relative;width:100%;padding:16px 0 8px}
/* 暖色背光：新封面是纯黑背景，靠这层赤陶光晕把它从黑底里托起来 */
.photo-wrap::before{
  content:"";position:absolute;left:50%;top:48%;
  width:96%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(158,84,51,.42) 0%, rgba(158,84,51,.16) 42%, rgba(158,84,51,0) 70%);
  pointer-events:none;
}
.blob{
  position:absolute;left:-2%;top:0;width:104%;height:118%;
  pointer-events:none;
}
.photo{
  --photo-pad:7px;                              /* 画框奶白边宽度，破框素材的对位全靠它 */
  position:relative;
  width:74%;max-width:296px;margin:0 auto;
  aspect-ratio:1/1;
  transform:rotate(-1.6deg);
  border-radius:4px;
  padding:var(--photo-pad);
  background:linear-gradient(150deg,#F6ECDA,#DCC9A8);
  box-shadow:
    0 16px 34px rgba(0,0,0,.46),
    0 0 0 1px rgba(217,162,74,.45),
    0 0 0 7px rgba(242,231,214,.10);
}
.photo img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center 30%;
  border-radius:2px;
  filter:saturate(1.06) contrast(1.03);
}
/* ---------- 下半身破框 ----------
   人物下半身从画框下沿继续向下延伸，伸出画框、进入下方文字区后渐隐。
   横向系数 1.23457 与左偏移系数 0.19383 来自素材裁切比例（原图 4000 宽、
   封面裁切框 x628 起、边长 3240）。重做素材时必须同步更新这两个数，
   否则接缝会左右错位。

   为什么用裁切容器而不是 z-index:-1：
   实测该 Chrome 下给子元素 z-index:-1 并不能压到父元素背景之下，
   破框内容会盖住画框的奶白边。所以外层容器从画框下沿（top:100%）开始、
   overflow:hidden，内层图片再上移一个画框边宽（margin-top:-var(--photo-pad)），
   这样露出的第一行正好是画框下沿该有的画面，奶白边完整不被遮。 */
.breakout-clip{
  position:absolute;
  top:100%;
  left:calc(var(--photo-pad) - (100% - var(--photo-pad)*2) * 0.19383);
  width:calc((100% - var(--photo-pad)*2) * 1.23457);
  overflow:hidden;
  pointer-events:none;
}
.breakout-clip img{
  display:block;
  width:100%;height:auto;
  margin-top:calc(-1 * var(--photo-pad));
  border-radius:0;
  filter:saturate(1.06) contrast(1.03);         /* 与画框内封面同一档调色，接缝不跳色 */
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
}
.tape{
  position:absolute;width:80px;height:21px;
  border-radius:1px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.40) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(180deg,#E7BB55,#C69436);
  box-shadow:0 2px 7px rgba(0,0,0,.38);
  opacity:.95;
}
.tape-tl{top:-12px;left:-24px;transform:rotate(-32deg)}
.tape-br{
  bottom:-12px;right:-24px;transform:rotate(-32deg);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.36) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(180deg,#B4633A,#8C4426);
}


.dot{
  position:absolute;border-radius:50%;
  box-shadow:0 0 0 2px rgba(0,0,0,.12);
}
.d1{width:13px;height:13px;background:var(--cream);top:6px;left:8%}
.d2{width:11px;height:11px;background:var(--green);top:30%;left:1%}
.d3{width:14px;height:14px;background:var(--seal);top:56%;left:0%}
.d4{width:12px;height:12px;background:var(--cream);bottom:12%;left:7%}
.d5{width:14px;height:14px;background:var(--orange);top:16%;right:4%}
.d6{width:11px;height:11px;background:var(--cream);top:46%;right:0%}
.d7{width:13px;height:13px;background:var(--green);bottom:20%;right:5%}
.d8{width:10px;height:10px;background:var(--gold);top:2%;right:26%}

.chalk{
  position:relative;
  z-index:5;                    /* 压在破框的人物之上，保证完整覆盖、清晰可读 */
  font-family:var(--hand);
  font-size:17px;line-height:1.5;
  color:#FBF3E3;
  margin:26px 0 0;
  transform:rotate(-1.2deg);
  text-shadow:0 1px 3px rgba(0,0,0,.8), 0 0 14px rgba(0,0,0,.6);
}
.heart{color:var(--gold)}

.arrow{position:absolute;width:52px;right:2px;bottom:-38px;transform:rotate(18deg);opacity:.75}

/* ---------- 信息卡 ---------- */
.info{position:relative;z-index:4;margin-top:52px}
.paper{
  position:relative;
  background:linear-gradient(168deg,#F6ECDA,#E7D8BE);
  border-radius:8px;
  padding:26px 20px 18px;
  color:var(--ink);
  box-shadow:0 16px 34px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.5);
  transform:rotate(.5deg);
}
.paper::before{
  content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, var(--paper-line) 27px 28px);
  opacity:.5;
}
.paper-tape{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2.5deg);
  width:112px;height:24px;
  background:repeating-linear-gradient(48deg, rgba(184,70,42,.42) 0 7px, rgba(184,70,42,.20) 7px 14px);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.row{display:flex;gap:13px;position:relative;padding:13px 0;border-bottom:1px dashed rgba(28,20,16,.22)}
.row:last-of-type{border-bottom:0}
.ico{flex:0 0 30px;width:30px;height:30px;margin-top:2px;color:#8C4224}
.ico svg{width:100%;height:100%;display:block}
.row-body{flex:1;min-width:0}
.row h3{
  font-family:var(--hand);
  font-size:15px;margin:0 0 5px;color:#8C4224;
  letter-spacing:.06em;
  display:flex;align-items:baseline;gap:8px;
}
.row h3 span{
  font-family:var(--sans);font-size:11px;letter-spacing:.22em;
  color:rgba(28,20,16,.5);
}
.row .hl{font-size:15.5px;font-weight:700;margin:0 0 4px;letter-spacing:.02em;line-height:1.45}
.row .fine{font-size:12px;color:rgba(28,20,16,.58);margin:0;line-height:1.5}
.note-strip{
  margin-top:14px;padding:10px 12px;border-radius:5px;
  background:rgba(184,70,42,.09);
  border-left:3px solid var(--seal);
  font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;
  color:#8A3A20;text-align:center;
}

/* ---------- CTA ---------- */
.cta{margin-top:40px;text-align:center}
.kicker{
  font-size:13px;letter-spacing:.2em;color:#E7D2AF;
  margin:0 0 16px;
}
.cta-btn{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  padding:21px 18px;
  border:0;border-radius:999px;
  font-family:var(--serif);font-weight:900;
  font-size:26px;letter-spacing:.20em;
  color:#2A1408;
  cursor:pointer;
  overflow:hidden;
  background:linear-gradient(135deg,#F0CC7A 0%,#D9A24A 38%,#B9821B 72%,#EBC468 100%);
  box-shadow:
    0 10px 26px rgba(0,0,0,.44),
    0 0 0 2px rgba(242,231,214,.22),
    0 0 34px rgba(217,162,74,.42),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -3px 0 rgba(0,0,0,.18);
  animation:pulse 2.4s ease-in-out infinite;
  transition:transform .16s ease, box-shadow .2s ease;
}
.cta-btn:active{transform:translateY(2px) scale(.986)}
@keyframes pulse{
  0%,100%{box-shadow:0 10px 26px rgba(0,0,0,.44),0 0 0 2px rgba(242,231,214,.22),0 0 30px rgba(217,162,74,.36),inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.18)}
  50%{box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 2px rgba(242,231,214,.30),0 0 52px rgba(217,162,74,.62),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,0,0,.18)}
}
.cta-main{position:relative;z-index:2}
.cta-go{
  position:relative;z-index:2;
  font-family:var(--hand);font-size:14px;letter-spacing:.06em;
  background:#2A1408;color:#F0CC7A;
  padding:3px 9px;border-radius:999px;
  transform:rotate(-8deg) translateY(-2px);
}
.shine{
  position:absolute;top:-60%;left:-70%;
  width:52%;height:220%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 48%, rgba(255,255,255,0) 100%);
  transform:rotate(18deg);
  animation:sweep 3.2s ease-in-out infinite;
  z-index:1;pointer-events:none;
}
@keyframes sweep{0%{left:-70%}45%{left:130%}100%{left:130%}}
.cta-sub{font-size:12.5px;color:#DCC7A6;margin:16px 0 0;letter-spacing:.06em}
.cta-sub b{font-family:var(--hand);font-size:17px;color:var(--gold);padding:0 2px}

/* ---------- 页脚 ---------- */
.foot{margin-top:38px;text-align:center}
.foot p{font-size:11.5px;color:rgba(242,231,214,.5);letter-spacing:.08em;margin:0 0 8px}
.foot .sign{font-family:var(--serif);letter-spacing:.28em;color:rgba(242,231,214,.36);font-size:11px}

/* ---------- 音乐按钮 ---------- */
.music{
  position:fixed;right:16px;bottom:calc(22px + env(safe-area-inset-bottom));z-index:60;
  width:48px;height:48px;padding:0;
  border-radius:50%;border:0;background:transparent;
  cursor:pointer;
}
.music .disc{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6))}
.music.playing .disc{animation:spin 3.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.music-tip{
  position:absolute;bottom:56px;right:0;
  white-space:nowrap;
  font-size:10.5px;letter-spacing:.1em;
  background:rgba(24,15,11,.92);color:#F0CC7A;
  padding:4px 9px;border-radius:999px;
  border:1px solid rgba(217,162,74,.5);
  animation:blink 1.6s ease-in-out infinite;
}
.music.playing .music-tip{display:none}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- 分享提示 ---------- */
.share-tip{
  position:fixed;top:0;left:0;right:0;z-index:70;
  max-width:480px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;
  background:rgba(18,11,9,.95);
  border-bottom:1px solid rgba(217,162,74,.4);
  font-size:12.5px;color:#F0DCB8;letter-spacing:.05em;
  transform:translateY(-110%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.share-tip.on{transform:translateY(0)}
.share-tip button{background:none;border:0;color:rgba(242,231,214,.6);font-size:14px;padding:2px 4px;cursor:pointer}

/* ---------- 弹层 ---------- */
.sheet-mask{
  position:fixed;inset:0;z-index:80;
  background:rgba(9,6,5,.62);
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.sheet-mask.on{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  max-width:480px;margin:0 auto;
  max-height:92vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(170deg,#F7EEE0,#E9DAC1);
  border-radius:22px 22px 0 0;
  padding:12px 20px calc(26px + env(safe-area-inset-bottom));
  color:var(--ink);
  transform:translateY(103%);
  transition:transform .42s cubic-bezier(.2,.85,.2,1);
  box-shadow:0 -14px 40px rgba(0,0,0,.5);
}
.sheet.on{transform:translateY(0)}
.sheet-bar{width:44px;height:5px;border-radius:999px;background:rgba(28,20,16,.22);margin:0 auto 14px}
.sheet-head{text-align:center;margin-bottom:18px}
.sheet-head h2{
  font-family:var(--serif);font-weight:900;
  font-size:25px;letter-spacing:.18em;margin:0 0 6px;color:#8A3A20;
}
.sheet-head p{font-size:12.5px;color:rgba(28,20,16,.55);margin:0;letter-spacing:.06em}

.field{display:block;margin-bottom:14px;position:relative}
.lb{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;color:#8A3A20;margin-bottom:7px}
.lb i{color:var(--seal);font-style:normal}
.field input[type=text],
.field input[type=tel],
.field textarea{
  width:100%;
  font-family:var(--sans);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.62);
  border:1.5px solid rgba(28,20,16,.16);
  border-radius:10px;
  padding:12px 13px;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  resize:none;
}
.field textarea{line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:rgba(28,20,16,.34)}
.field input:focus,.field textarea:focus{
  border-color:var(--seal);
  background:#fff;
  box-shadow:0 0 0 3px rgba(184,70,42,.14);
}
.field.bad input,.field.bad textarea{border-color:var(--seal);background:rgba(184,70,42,.06)}
.field.bad .seg button{border-color:var(--seal);background:rgba(184,70,42,.05)}
.err{display:none;font-size:11.5px;color:var(--seal);font-style:normal;margin-top:5px;letter-spacing:.04em}
.field.bad .err{display:block}

.seg{display:flex;flex-wrap:wrap;gap:7px}
.seg button{
  flex:1 1 auto;min-width:60px;
  font-family:var(--sans);font-size:13.5px;
  padding:10px 6px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.6);
  border:1.5px solid rgba(28,20,16,.16);
  color:rgba(28,20,16,.72);
  transition:all .16s ease;
}
.seg button.on{
  background:linear-gradient(140deg,#CC5A30,#933318);
  border-color:#7E2A16;color:#FBF3E3;font-weight:700;
  box-shadow:0 4px 12px rgba(147,51,24,.34);
}

.submit{
  position:relative;width:100%;margin-top:20px;
  padding:17px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--serif);font-weight:900;font-size:18px;letter-spacing:.24em;
  color:#2A1408;
  background:linear-gradient(135deg,#F0CC7A,#D9A24A 45%,#B9821B);
  box-shadow:0 8px 22px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .14s;
}
.submit:active{transform:translateY(2px)}
.submit:disabled{opacity:.72;cursor:default}
.submit-load{display:none}
.submit.loading .submit-txt{display:none}
.submit.loading .submit-load{display:inline}
.privacy{text-align:center;font-size:11px;color:rgba(28,20,16,.42);margin:12px 0 0;letter-spacing:.04em}

/* 成功态 */
.done{display:none;text-align:center;padding:14px 4px 8px}
.done.on{display:block;animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.done-badge{font-size:52px;line-height:1;margin-bottom:10px}
.done h2{font-family:var(--serif);font-weight:900;font-size:27px;letter-spacing:.16em;color:#8A3A20;margin:0 0 12px}
.done-no{font-size:14px;color:rgba(28,20,16,.6);margin:0 0 10px;letter-spacing:.06em}
.done-no b{font-family:var(--hand);font-size:32px;color:var(--seal);padding:0 4px;vertical-align:-4px}
.done-txt{font-size:14px;color:#8A3A20;margin:0 0 22px;line-height:1.6}
.done-btn{
  width:100%;padding:15px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.2em;
  color:#FBF3E3;background:linear-gradient(140deg,#CC5A30,#933318);
  box-shadow:0 8px 20px rgba(147,51,24,.34);
}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:92px;z-index:120;
  transform:translate(-50%,16px);
  max-width:80vw;
  padding:11px 18px;border-radius:999px;
  background:rgba(18,11,9,.94);color:#F4E3C4;
  font-size:13px;letter-spacing:.05em;
  border:1px solid rgba(217,162,74,.4);
  opacity:0;pointer-events:none;
  transition:opacity .28s, transform .28s;
  text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- 入场动画 ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (max-width:360px){
  .seal{right:-24px;top:-12px;width:56px;height:56px;font-size:17px}
  .photo{width:82%}
  .cta-btn{font-size:22px}
}
@media (min-height:820px){
  .photo{max-width:312px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}