/* 给语桐的生日童话 — 由 Claude Design 稿 (给语桐的生日童话.dc.html) 一比一翻译成静态页 */

@font-face{font-family:'Ma Shan Zheng';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/MaShanZheng-subset.woff2) format('woff2')}
@font-face{font-family:'Long Cang';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/LongCang-subset.woff2) format('woff2')}
@font-face{font-family:'Noto Serif SC';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/NotoSerifSC-subset.woff2) format('woff2')}

:root{
  --brush:'Ma Shan Zheng','STKaiti','KaiTi','Noto Serif SC','Songti SC',serif;
  --script:'Long Cang','STXingkai','STKaiti','KaiTi','Noto Serif SC',serif;
  --serif:'Noto Serif SC','Songti SC','SimSun','Noto Serif CJK SC',serif;
}

html{background:#fde9f0}
body{margin:0;background:#fde9f0;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:#b04a6a}a:hover{color:#8e3a55}
html.locked,html.locked body{overflow:hidden;height:100%}
.nowrap{white-space:nowrap}

@keyframes fallA{0%{transform:translate3d(0,-6vh,0) rotate(0deg)}100%{transform:translate3d(7vw,108vh,0) rotate(320deg)}}
@keyframes fallB{0%{transform:translate3d(0,-6vh,0) rotate(0deg)}100%{transform:translate3d(-8vw,108vh,0) rotate(-300deg)}}
@keyframes flick{from{transform:scale(1)}to{transform:scale(.88) translateY(-1px)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(34px,-26px) scale(1.08)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes flowPan{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-10%,-6%) scale(1.14)}}
@keyframes sheen{0%{background-position:18% 35%}100%{background-position:82% 65%}}

/* ---------- 信封开场 ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:linear-gradient(rgba(253,236,243,.8),rgba(250,219,231,.86)),url("uploads/bg-scene.webp") center/cover no-repeat;
  opacity:1;transition:opacity .9s ease}
.overlay.is-fade{opacity:0;pointer-events:none}
.no-js .overlay{display:none}
.overlay .star{position:absolute;border-radius:50%}
.star1{top:14%;left:18%;width:6px;height:6px;background:#e9b8cb;animation:twinkle 2.2s ease-in-out infinite}
.star2{top:24%;right:16%;width:5px;height:5px;background:#d9a0b8;animation:twinkle 2.8s ease-in-out .6s infinite}
.star3{bottom:18%;left:24%;width:5px;height:5px;background:#e9b8cb;animation:twinkle 2.5s ease-in-out 1.1s infinite}

.envelope{position:relative;width:300px;height:212px;cursor:pointer;filter:drop-shadow(0 16px 26px rgba(176,74,106,.28));
  display:block;border:0;padding:0;margin:0;background:none;font:inherit;color:inherit;outline-offset:6px;appearance:none;-webkit-appearance:none}
.envelope>span{display:block}
.env-back{position:absolute;inset:0;background:#f2bed2;border-radius:10px}
.env-letter{position:absolute;left:16px;right:16px;top:14px;height:168px;background:#fffaf6;border-radius:6px;z-index:2;
  box-shadow:0 2px 8px rgba(170,90,120,.18);transition:transform .9s ease .45s;transform:translateY(0);
  display:flex;flex-direction:column;align-items:center;padding-top:24px;gap:8px}
.overlay.is-open .env-letter{transform:translateY(-96px)}
.env-letter-title{font-family:var(--brush);font-size:25px;color:#a23e5f;line-height:normal}
.env-letter-orn{color:#c9a468;font-size:12px;letter-spacing:4px;line-height:normal}
.env-front{position:absolute;inset:0;z-index:3;background:linear-gradient(#f9d3e0,#f0b6ca);clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);border-radius:10px}
.env-flap{position:absolute;top:0;left:0;right:0;height:106px;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#f6c3d5,#eeadc4);
  transform-origin:top center;transition:transform .75s ease;transform:rotateX(0deg);z-index:4}
.overlay.is-open .env-flap{transform:rotateX(180deg);z-index:1}
.env-seal{position:absolute;left:50%;top:98px;transform:translate(-50%,-50%) rotate(-6deg);width:48px;height:48px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#cc5f80,#a03e5e);display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:var(--brush);font-size:20px;z-index:5;border:2px solid rgba(255,255,255,.35);box-shadow:0 4px 10px rgba(120,40,66,.35);
  opacity:1;transition:opacity .4s ease .15s;line-height:normal}
.overlay.is-open .env-seal{opacity:0}

/* ---------- 花瓣 ---------- */
.petals{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.petal{position:absolute;top:-40px;display:block}
.p1{left:6%;width:15px;height:15px;background:radial-gradient(circle at 30% 30%,#fbd0de,#f2a8c2);border-radius:150% 0 150% 0;animation:fallA 11s linear infinite;opacity:.85}
.p2{left:18%;width:11px;height:11px;background:radial-gradient(circle at 30% 30%,#fcdce6,#f0b4ca);border-radius:150% 0 150% 30%;animation:fallB 14s linear 2s infinite;opacity:.7}
.p3{left:31%;width:17px;height:17px;background:radial-gradient(circle at 30% 30%,#fbd0de,#eea3bf);border-radius:150% 0 150% 0;animation:fallA 12.5s linear 5s infinite;opacity:.8}
.p4{left:44%;width:10px;height:10px;background:radial-gradient(circle at 30% 30%,#fcdce6,#f2a8c2);border-radius:150% 20% 150% 0;animation:fallB 15.5s linear 1s infinite;opacity:.65}
.p5{left:56%;width:14px;height:14px;background:radial-gradient(circle at 30% 30%,#fbd0de,#f0b4ca);border-radius:150% 0 150% 0;animation:fallA 10s linear 7s infinite;opacity:.85}
.p6{left:67%;width:12px;height:12px;background:radial-gradient(circle at 30% 30%,#fcdce6,#eea3bf);border-radius:150% 0 150% 30%;animation:fallB 13s linear 3.5s infinite;opacity:.75}
.p7{left:78%;width:16px;height:16px;background:radial-gradient(circle at 30% 30%,#fbd0de,#f2a8c2);border-radius:150% 0 150% 0;animation:fallA 12s linear 8.5s infinite;opacity:.8}
.p8{left:89%;width:11px;height:11px;background:radial-gradient(circle at 30% 30%,#fcdce6,#f0b4ca);border-radius:150% 20% 150% 0;animation:fallB 14.5s linear 5.5s infinite;opacity:.7}
.p9{left:50%;width:13px;height:13px;background:radial-gradient(circle at 30% 30%,#fbd0de,#eea3bf);border-radius:150% 0 150% 0;animation:fallB 16s linear 9.5s infinite;opacity:.6}
.p10{left:12%;width:12px;height:12px;background:radial-gradient(circle at 30% 30%,#fcdce6,#f2a8c2);border-radius:150% 0 150% 30%;animation:fallA 13.5s linear 11s infinite;opacity:.7}

/* ---------- 页面底 ---------- */
.page{min-height:100vh;font-family:var(--serif);overflow-x:hidden;position:relative;background:#fdf0f5}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#fff3f7,#fce4ee)}
.bg>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.bg-veil{position:absolute;inset:0;background:linear-gradient(rgba(255,250,252,.42),rgba(255,241,247,.12) 30%,rgba(255,236,244,.55))}
.blob{position:absolute;border-radius:50%}
.blob1{top:6%;left:-14%;width:320px;height:320px;background:radial-gradient(circle,rgba(255,214,170,.5),transparent 70%);filter:blur(50px);animation:drift 11s ease-in-out infinite}
.blob2{top:34%;right:-18%;width:360px;height:360px;background:radial-gradient(circle,rgba(255,170,200,.45),transparent 70%);filter:blur(60px);animation:drift 14s ease-in-out 2s infinite reverse}
.blob3{bottom:4%;left:-10%;width:300px;height:300px;background:radial-gradient(circle,rgba(214,170,255,.35),transparent 70%);filter:blur(55px);animation:drift 16s ease-in-out 4s infinite}
.col{max-width:430px;margin:0 auto;position:relative;z-index:1}

/* ---------- 扉页 ---------- */
.cover{padding:92px 24px 0;text-align:center;position:relative}
.cover-deco{position:absolute;top:-30px;left:-12%;width:124%;mix-blend-mode:multiply;opacity:.5;pointer-events:none;z-index:-1}
.tw{position:absolute;line-height:normal}
.tw1{top:54px;left:13%;color:#d9b06c;font-size:12px;animation:twinkle 2.6s ease-in-out infinite}
.tw2{top:130px;right:5%;color:#d9b06c;font-size:16px;animation:twinkle 3.2s ease-in-out .8s infinite}
.tw3{top:228px;left:9%;color:#e3bd7e;font-size:10px;animation:twinkle 2.9s ease-in-out 1.5s infinite}
.orn-gold{font-size:13px;letter-spacing:8px;background:linear-gradient(100deg,#c9a05a,#e8cf9a,#c9a05a);-webkit-background-clip:text;background-clip:text;color:transparent}
.title{font-family:var(--brush);font-weight:400;font-size:58px;line-height:1.25;margin:14px 0 0;
  background:linear-gradient(110deg,#a23e5f 20%,#d4788f 42%,#c9a05a 55%,#a23e5f 75%);background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
.sub{font-size:13px;color:#a86b81;letter-spacing:6px;margin-top:12px}
.divider{display:flex;align-items:center;gap:10px;justify-content:center;margin:28px auto 0;width:210px}
.divider span{flex:1;height:1px;display:block}
.divider span:first-child{background:linear-gradient(90deg,transparent,#e2a8bd)}
.divider span:last-child{background:linear-gradient(90deg,#e2a8bd,transparent)}
.divider i{width:6px;height:6px;background:#c9a468;transform:rotate(45deg);display:block}

/* ---------- 一封信 ---------- */
.letter-wrap{padding:58px 20px 0}
.letter{background:rgba(255,250,246,.72);border:1px solid rgba(255,255,255,.7);border-radius:18px;box-shadow:0 18px 44px rgba(176,74,106,.16);
  padding:30px 26px 36px;position:relative;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.corner{position:absolute;top:12px;color:#ecc0d0;font-size:13px;line-height:normal}
.corner-l{left:14px}.corner-r{right:14px}
.letter-to{font-family:var(--brush);font-size:27px;color:#a23e5f;text-align:left}
.letter-body{margin-top:18px;font-size:15px;line-height:2.15;color:#7c4658;text-wrap:pretty}
.letter-sign{margin-top:24px;text-align:right;font-family:var(--script);font-size:22px;color:#a3506c}

/* ---------- 相册 ---------- */
.album{padding:66px 18px 0}
.album-title{text-align:center;font-family:var(--brush);font-weight:400;font-size:30px;color:#a23e5f;margin:0;text-wrap:balance}
.masonry{margin-top:28px;column-count:2;column-gap:14px}
.polaroid{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 18px;background:#fff;padding:9px 9px 22px;border-radius:3px;
  box-shadow:0 8px 20px rgba(176,74,106,.15);position:relative;transform:rotate(var(--rot,0deg))}
.r1{--rot:-2.2deg}.r2{--rot:1.8deg}.r3{--rot:-1.4deg}.r4{--rot:2.3deg}.r5{--rot:-1.8deg}
.r6{--rot:1.5deg}.r7{--rot:-2.5deg}.r8{--rot:2deg}.r9{--rot:-1.6deg}.r10{--rot:2.2deg}
.tape{position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-4deg);width:58px;height:18px;background:rgba(247,196,214,.8);
  border:1px solid rgba(255,255,255,.55);border-radius:2px;display:block}
.polaroid img,.polaroid video{width:100%;display:block;border-radius:2px;background:#f6dce6}

/* ---------- 许愿 ---------- */
.wish{padding:70px 18px 0;perspective:900px}
.tilt{transform:rotateX(0deg) rotateY(0deg);transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.3,1.15);touch-action:pan-y;cursor:grab}
.tilt.is-dragging{transition:none;cursor:grabbing}
.wish-card{border-radius:26px;padding:34px 24px 40px;position:relative;overflow:hidden;box-shadow:0 18px 44px rgba(176,74,106,.22);
  border:1px solid rgba(255,255,255,.75);background:#fce3ee}
.wish-flow{position:absolute;top:-15%;left:-30%;width:170%;height:130%;object-fit:cover;animation:flowPan 26s ease-in-out infinite alternate}
.wish-veil{position:absolute;inset:0;background:linear-gradient(rgba(255,248,251,.55),rgba(255,240,247,.28) 45%,rgba(255,246,250,.6))}
.gloss{position:absolute;inset:-30%;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.5) 48%,rgba(255,246,220,.35) 52%,transparent 66%);
  background-size:260% 260%;background-position:50% 50%;animation:sheen 6s ease-in-out infinite alternate;transition:background-position .25s ease-out}
.gloss.is-live{animation:none;background-position:var(--gx,50%) var(--gy,50%)}
.dot{position:absolute;border-radius:50%;display:block}
.d1{top:22px;left:12%;width:4px;height:4px;background:#e2a33c;animation:twinkle 2.4s ease-in-out infinite}
.d2{top:56px;right:14%;width:5px;height:5px;background:#e585ab;animation:twinkle 3s ease-in-out .7s infinite}
.d3{top:110px;left:8%;width:3px;height:3px;background:#e2a33c;animation:twinkle 2.7s ease-in-out 1.3s infinite}
.d4{top:90px;right:30%;width:4px;height:4px;background:#e2a33c;animation:twinkle 3.2s ease-in-out .4s infinite}
.d5{bottom:70px;left:14%;width:3px;height:3px;background:#e585ab;animation:twinkle 2.9s ease-in-out 2.1s infinite}
.wish-title{text-align:center;font-family:var(--brush);font-weight:400;font-size:29px;color:#a23e5f;position:relative;margin:0;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.cake-wrap{display:flex;flex-direction:column;align-items:center;margin-top:30px;position:relative}
.cake{width:250px;max-width:100%;display:block;filter:drop-shadow(0 20px 26px rgba(150,55,90,.3));animation:floaty 4s ease-in-out infinite;-webkit-user-select:none;user-select:none}

/* ---------- 尾页 ---------- */
.end{padding:66px 24px 76px;text-align:center}
.end-orn{color:#c9a468;font-size:13px;letter-spacing:6px}
.end-poem{margin-top:16px;font-family:var(--script);font-size:22px;color:#a86680;line-height:1.9}
.end-from{margin-top:14px;font-size:12px;color:#c48ba0;letter-spacing:3px}

@media (prefers-reduced-motion:reduce){
  .petal,.blob,.title,.wish-flow,.gloss,.cake,.tw,.dot,.overlay .star{animation:none}
}