/* 写给妈妈的一封信 —— 暖陶土色的信纸、拍立得和明信片 */
:root{
  --bg:#f8eee7; --bg-2:#f3dacd; --paper:#fffaf5; --paper-2:#fbf1ea;
  --accent:#c96555; --accent-deep:#8f453a; --accent-soft:#e7b7ab; --gold:#b2864e; --sage:#8ea08a;
  --ink:#402c28; --ink-soft:rgba(64,44,40,.74); --line:rgba(143,69,58,.12);
  --env:#e8aa98; --env-deep:#dc9784; --env-flap:#f0beae; --seal:#a94d40;
  --shadow:0 18px 48px rgba(112,68,54,.16);
  --f-title:"STKaiti","Kaiti SC","KaiTi","Songti SC","Noto Serif SC",serif;
  --f-body:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--f-body);overflow-x:hidden;
  background:radial-gradient(circle at 10% 0%,rgba(255,255,255,.7),transparent 40%),radial-gradient(circle at 90% 15%,rgba(232,190,174,.45),transparent 30%),linear-gradient(165deg,#f9f0e9 0%,#f4dccf 55%,#f8efe8 100%);background-attachment:fixed}
[hidden]{display:none!important}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
.share-img{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* 花瓣 */
.petals{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.petals i{position:absolute;top:-8vh;width:14px;height:21px;border-radius:60% 60% 60% 60%/75% 75% 45% 45%;
  background:linear-gradient(180deg,rgba(255,230,222,.9),rgba(201,101,85,.6));opacity:.7;animation:fall linear infinite}
.petals i:nth-child(2n){width:11px;height:17px;background:linear-gradient(180deg,#fff6ec,rgba(231,183,171,.85))}
@keyframes fall{50%{transform:translate3d(20px,52vh,0) rotate(110deg)}to{transform:translate3d(-18px,112vh,0) rotate(210deg)}}

/* ---------- 信封页 ---------- */
.lock{position:relative;z-index:2;min-height:100vh;display:grid;place-items:center;padding:calc(var(--sat) + 28px) 22px calc(var(--sab) + 28px)}
.lock-inner{width:min(360px,100%);display:grid;justify-items:center;gap:14px;text-align:center}
.eyebrow{margin:0;font-size:11px;letter-spacing:.26em;color:var(--gold)}
.lock-title{margin:0;font:700 clamp(34px,10vw,44px)/1.2 var(--f-title);letter-spacing:2px}
.lock-title em{font-style:normal;color:var(--accent)}
.lock-inner > *{transition:opacity .4s ease,transform .4s ease}
.lock.opening .eyebrow,.lock.opening .lock-title{opacity:0;transform:translateY(-12px)}
.lock.opening .lock-form{opacity:0;transform:translateY(12px)}
.lock.opening .envelope{transform:translateY(40px)}
.lock.leaving{animation:lockOut .5s ease-in forwards}
@keyframes lockOut{to{opacity:0;transform:scale(1.04)}}

.envelope{position:relative;width:min(300px,80vw);aspect-ratio:3/2;margin:16px 0 4px;perspective:900px;filter:drop-shadow(0 20px 30px rgba(112,68,54,.24));transition:transform .5s ease}
.envelope > div{position:absolute;inset:0;border-radius:10px}
.env-back{background:var(--env-deep)}
.env-letter{inset:8% 7% 6% 7% !important;border-radius:4px !important;background:var(--paper);z-index:1;display:grid;place-content:center;gap:2px;
  background-image:repeating-linear-gradient(transparent 0 21px,var(--line) 21px 22px);transition:transform .6s cubic-bezier(.2,.8,.2,1) .5s}
.env-letter span{font:700 28px var(--f-title);color:var(--accent)}
.env-letter small{font-size:12px;color:var(--ink-soft);letter-spacing:.2em}
.env-front{z-index:2;background:var(--env);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.env-flap{z-index:3;background:var(--env-flap);clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:50% 0;transition:transform .5s ease-in .2s,z-index 0s .45s,background .2s .45s}
.env-seal{z-index:4;inset:auto !important;left:50% !important;top:60% !important;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50% !important;display:grid;place-items:center;
  font:700 30px var(--f-title);color:#fff3ec;letter-spacing:0;
  background:radial-gradient(circle at 34% 30%,#d48172,var(--seal) 58%,#7d3429);box-shadow:0 3px 8px rgba(0,0,0,.25),inset 0 0 0 5px rgba(0,0,0,.1);
  transition:transform .3s cubic-bezier(.5,-.5,.7,1.5),opacity .3s}
.envelope.open .env-seal{transform:scale(0) rotate(-40deg);opacity:0}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0;background:var(--env-deep)}
.envelope.open .env-letter{transform:translateY(-44%)}
.envelope.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-8px) rotate(-1deg)}40%,80%{transform:translateX(8px) rotate(1deg)}}

.lock-form{width:100%;display:grid;gap:12px}
.lock-label{font:20px var(--f-title);color:var(--ink-soft)}
.lock-form input{width:100%;background:transparent;border:0;border-bottom:1.5px dashed rgba(201,101,85,.55);border-radius:0;padding:8px 4px 10px;text-align:center;font-size:20px;letter-spacing:.3em;color:var(--ink)}
.lock-form input:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--accent)}
.btn{min-height:48px;border:0;border-radius:999px;padding:0 26px;cursor:pointer;color:#fffaf6;font-weight:600;letter-spacing:.12em;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));box-shadow:0 12px 24px rgba(143,69,58,.24);transition:transform .2s}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--accent-deep);box-shadow:none;border:1px solid rgba(201,101,85,.35)}
.lock-msg{margin:0;min-height:1.4em;font:18px var(--f-title);color:var(--accent)}

/* ---------- 正文 ---------- */
.letter-page{position:relative;z-index:2;width:min(920px,100% - 28px);margin:0 auto;padding:calc(var(--sat) + 28px) 0 calc(var(--sab) + 56px);display:grid;gap:22px}
.reveal{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--d,0) * 120ms)}
@keyframes rise{to{opacity:1;transform:none}}

.card{position:relative;background:linear-gradient(180deg,rgba(255,252,249,.94),rgba(255,247,241,.86));border-radius:26px;box-shadow:var(--shadow);padding:clamp(20px,4vw,34px)}
.hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:22px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,250,246,.8);border:1px solid rgba(201,101,85,.16);font-size:12px;letter-spacing:.14em;color:var(--accent-deep)}
.pill.dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(201,101,85,.12)}
.pill.date{color:var(--gold)}
.hero-title{margin:0 0 18px;font:700 clamp(36px,9vw,68px)/1.15 var(--f-title);letter-spacing:1px;text-wrap:balance}
.hero-title span{color:var(--accent)}
.hero-lead{margin:0 0 12px;font:clamp(18px,4.6vw,23px)/1.8 var(--f-title);color:var(--ink)}
.hero-quote{margin:0;padding-left:16px;border-left:2px solid rgba(201,101,85,.3);font-size:15px;line-height:1.9;color:var(--ink-soft)}

/* 拍立得照片 */
.photos{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(18px,4vw,34px);align-items:start;padding:8px 4px}
.pola{position:relative;margin:0;background:#fffdf9;padding:10px 10px 0;box-shadow:0 14px 30px rgba(112,68,54,.18);transform:rotate(var(--r,0deg))}
.pola::before{content:"";position:absolute;top:-11px;left:50%;width:86px;height:24px;transform:translateX(-50%) rotate(var(--tt,-3deg));background:rgba(232,190,140,.55)}
.pola img{width:100%;aspect-ratio:var(--ar,4/3);object-fit:cover;background:#eee}
.pola figcaption{padding:10px 4px 14px;font:16px/1.6 var(--f-title);color:var(--ink-soft);text-align:center}
.photos .main{--r:-1.4deg}
.photos .side{--r:2deg;--tt:4deg}
.kids{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:6px}
.kids .pola{padding:6px 6px 0;--ar:3/4}
.kids .pola:nth-child(1){--r:-3deg}.kids .pola:nth-child(2){--r:1.5deg;--tt:5deg}.kids .pola:nth-child(3){--r:-1deg}
.kids .pola figcaption{font-size:12px;padding:6px 2px 9px}
.photo-note{grid-column:1/-1;margin:4px 0 0;text-align:center;font:17px/1.8 var(--f-title);color:var(--accent-deep)}

.sec-title{margin:0 0 18px;display:flex;align-items:center;gap:12px;font:700 clamp(24px,6vw,34px)/1.2 var(--f-title);color:var(--accent-deep)}
.sec-title::before{content:"";width:34px;height:9px;border-radius:9px;background:linear-gradient(90deg,var(--accent),rgba(201,101,85,.1))}

/* 回忆：明信片 */
.postcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.postcard{position:relative;background:var(--paper);border-radius:6px;padding:22px 18px 20px;box-shadow:0 10px 24px rgba(112,68,54,.12);
  background-image:linear-gradient(90deg,transparent calc(100% - 1px),var(--line) 0);background-size:100% 100%;transform:rotate(var(--r,0deg))}
.postcard:nth-child(1){--r:-.8deg}.postcard:nth-child(2){--r:.9deg}.postcard:nth-child(3){--r:-.4deg}
.postcard::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(201,101,85,.18);border-radius:3px;pointer-events:none}
.stamp{position:absolute;top:14px;right:14px;width:46px;height:54px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);font:700 15px var(--f-title);
  -webkit-mask:radial-gradient(circle at center,transparent 2.5px,#000 3px) -4px -4px/8px 8px round,linear-gradient(#000,#000) center/calc(100% - 8px) calc(100% - 8px) no-repeat;
  mask:radial-gradient(circle at center,transparent 2.5px,#000 3px) -4px -4px/8px 8px round,linear-gradient(#000,#000) center/calc(100% - 8px) calc(100% - 8px) no-repeat}
.postcard h3{margin:4px 60px 6px 0;font:700 24px/1.3 var(--f-title)}
.postcard .time{margin:0 0 10px;font-size:12px;letter-spacing:.1em;color:var(--gold)}
.postcard p:last-child{margin:0;font-size:15px;line-height:1.9;color:var(--ink-soft)}

/* 感谢 */
.thanks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.thanks li{position:relative;padding:18px 18px 18px 54px;border-radius:18px;background:rgba(255,251,247,.8);border:1px solid rgba(142,160,138,.2);font-size:15px;line-height:1.9;color:var(--ink-soft)}
.thanks li::before{content:"爱";position:absolute;top:18px;left:16px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 12px var(--f-body);
  background:linear-gradient(135deg,var(--accent),#d98778);box-shadow:0 6px 14px rgba(201,101,85,.25)}

/* 信纸 */
.paper{position:relative;background:var(--paper);border-radius:4px;padding:clamp(24px,5vw,40px) clamp(20px,5vw,44px) 30px;box-shadow:0 16px 36px rgba(112,68,54,.14)}
/* 横线画在正文上：每行 36px，线在每行底部，字正好落在线上 */
.paper .body{background-image:repeating-linear-gradient(transparent 0 35px,rgba(201,101,85,.16) 35px 36px)}
.paper::before{content:"";position:absolute;top:0;bottom:0;left:clamp(14px,3vw,24px);width:2px;background:rgba(201,101,85,.18)}
.quote{margin:0 0 22px;padding:16px 18px;border-radius:0 14px 14px 0;border-left:3px solid rgba(201,101,85,.45);background:rgba(201,101,85,.06)}
.quote p{margin:0;font-size:15px;line-height:2;color:var(--ink-soft)}
.quote cite{display:block;margin-top:8px;font-style:normal;font-size:13px;letter-spacing:.08em;color:var(--gold)}
.paper .body p{margin:0;font:18px/36px var(--f-title);color:rgba(64,44,40,.9);text-indent:2em}
.paper .body p:first-child{text-indent:0;font-size:20px;color:var(--accent-deep)}
.sign{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:18px}
.sign strong{font:700 26px var(--f-title);color:var(--accent-deep)}
.sign .wax{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff3ec;font:700 22px var(--f-title);
  background:radial-gradient(circle at 34% 30%,#d48172,var(--seal) 58%,#7d3429);box-shadow:0 3px 8px rgba(0,0,0,.2),inset 0 0 0 4px rgba(0,0,0,.1);transform:rotate(-10deg)}

.ending{text-align:center;padding:10px 0 4px;display:grid;gap:14px;justify-items:center}
.ending h2{margin:0;font:700 clamp(30px,8vw,44px) var(--f-title);color:var(--accent)}
.ending .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

@media (max-width:760px){
  .photos{grid-template-columns:1fr}
  .photos .side{width:78%;justify-self:end;margin-top:-6px}
  .postcards,.thanks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .petals,.reveal{animation:none!important;opacity:1;transform:none}
  .env-flap,.env-letter,.env-seal,.lock-inner > *{transition:none}
}