:root{
  --bg1:#fff0f4;
  --bg2:#fbe0e8;
  --bg3:#f6ccd8;
  --ink:#3a2c2c;
  --ink-soft:#8a5f68;
  --ink-faint:#b58a92;
  --clay:#c2502f;
  --clay-deep:#a83f24;
  --rose:#c97a6a;
  --gold:#b4863a;
  --card:#fffaf2;
  --line:rgba(120,86,80,.18);
  --heart-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3c-.8-.7-7.6-6.8-9.3-11C1.4 7.6 2.7 4.5 6 4.5c2 0 3.4 1.3 4 2.4.6-1.1 2-2.4 4-2.4 3.3 0 4.6 3.1 3.3 5.8-1.7 4.2-8.5 10.3-9.3 11z' fill='%23e85d6a'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}

body{
  font-family:"Noto Sans SC",sans-serif;
  color:var(--ink);
  background:linear-gradient(168deg,var(--bg1) 0%,var(--bg2) 58%,var(--bg3) 100%);
  min-height:100vh;
  overflow-x:hidden;
}

/* 顶部暖光 */
.warmth{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(55% 42% at 50% 8%, rgba(255,220,228,.55) 0%, transparent 70%),
    radial-gradient(40% 30% at 88% 92%, rgba(217,122,138,.2) 0%, transparent 70%);
}

/* 樱花背景 */
.sakura-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url(assets/sakura.webp) center/cover no-repeat fixed;
}
.sakura-bg::after{
  content:"";position:absolute;inset:0;
  background:rgba(255,246,250,.58);
}

.page{
  position:relative;
  max-width:720px;margin:0 auto;
  padding:7vh 6vw 6vh;
  display:flex;flex-direction:column;align-items:center;gap:46px;
}

/* —— 页首 —— */
.top{display:flex;flex-direction:column;align-items:center;gap:22px}
.wordmark{
  display:flex;align-items:baseline;gap:14px;
  font-family:"Fraunces",serif;
}
.wm-name{
  font-size:30px;font-weight:600;letter-spacing:.04em;
  background:linear-gradient(90deg,#e2503c,#e89b3c,#b9c24a,#5bb37a,#4f9fd8,#8a63c8,#d06a9c);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:rainbowShift 7s linear infinite;
}
@keyframes rainbowShift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.wm-amp{
  font-style:italic;font-weight:400;font-size:24px;color:var(--clay);
}

.pair{
  display:flex;align-items:center;gap:0;
  position:relative;
}
.pair-link{
  width:54px;height:2px;
  background:linear-gradient(90deg,transparent,var(--clay) 30%,var(--clay) 70%,transparent);
  opacity:.5;
}
.portrait{
  background:none;border:none;cursor:pointer;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  position:relative;z-index:3;
  transition:transform .42s cubic-bezier(.5,.05,.25,1);
}
.portrait:hover .ph-frame{ transform:scale(1.06) }
.ph-frame{
  width:78px;height:78px;border-radius:50%;
  background-size:cover;background-position:center;
  box-shadow:
    0 0 0 3px var(--card),
    0 0 0 4px var(--ink-faint),
    0 8px 20px rgba(120,60,40,.28);
  transition:transform .4s cubic-bezier(.2,.8,.3,1.25), box-shadow .4s ease;
  display:block;
}
.portrait.meet .ph-frame{
  transform:scale(1.42);
  box-shadow:
    0 0 0 3px var(--card),
    0 0 0 4px var(--clay),
    0 0 34px rgba(194,80,47,.55),
    0 10px 26px rgba(120,60,40,.4);
}
.ph-cap{
  font-family:"Fraunces",serif;
  font-size:15px;font-weight:600;letter-spacing:.1em;
  background:linear-gradient(90deg,#e2503c,#e89b3c,#b9c24a,#5bb37a,#4f9fd8,#8a63c8,#d06a9c);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:rainbowShift 7s linear infinite;
}
.portrait#avB .ph-cap{ letter-spacing:.16em }
.ph-bday{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:11px;letter-spacing:.08em;color:var(--ink-soft);
}

/* —— 启动动画 · 星空滑幕 —— */
.intro{
  position:fixed;inset:0;z-index:50;
  background:linear-gradient(180deg,#0c0f24 0%,#161533 55%,#241a2e 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1);
}
.intro.slide{ transform:translateX(100%) }
.intro-halo{
  position:absolute;bottom:-12%;left:50%;transform:translateX(-50%);
  width:130%;height:45%;
  background:radial-gradient(ellipse at center bottom,rgba(255,150,120,.2),transparent 70%);
}
.intro-stars{position:absolute;inset:0;overflow:hidden}
.intro-stars i{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkle 3s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.intro-content{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:20px;
  transition:opacity .55s ease,transform .55s ease;
}
.intro-content.gone{opacity:0;transform:scale(.94)}
.intro-heart{
  position:relative;width:62px;height:62px;
  filter:drop-shadow(0 0 18px rgba(255,107,138,.6));
}
.intro-shape{
  position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.3c-.8-.7-7.6-6.8-9.3-11C1.4 7.6 2.7 4.5 6 4.5c2 0 3.4 1.3 4 2.4.6-1.1 2-2.4 4-2.4 3.3 0 4.6 3.1 3.3 5.8-1.7 4.2-8.5 10.3-9.3 11z' fill='%23ff7a96'/%3E%3C/svg%3E") center/contain no-repeat;
  transform:scale(0) rotate(-14deg);opacity:0;
  animation:introHeart .8s cubic-bezier(.2,.85,.3,1.4) .25s forwards;
}
@keyframes introHeart{
  55%{transform:scale(1.16) rotate(3deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
.intro-ring{
  position:absolute;inset:0;border-radius:50%;border:2px solid #ff8fa3;
  opacity:0;animation:introRing 1.1s ease-out .5s forwards;
}
@keyframes introRing{
  0%{transform:scale(.7);opacity:0}
  25%{opacity:.55}
  100%{transform:scale(2.6);opacity:0}
}
.intro-name{
  font-family:"Fraunces",serif;font-weight:600;font-size:24px;color:#f4e8d8;
  letter-spacing:.5em;text-indent:.5em;opacity:0;
  animation:introName .75s ease .65s forwards;
}
@keyframes introName{
  0%{opacity:0;letter-spacing:.5em}
  100%{opacity:1;letter-spacing:.1em}
}
.intro-sub{
  font-family:"Fraunces",serif;font-style:italic;font-size:13px;color:#c9b8d0;
  letter-spacing:.08em;opacity:0;
  animation:introSub .7s ease .9s forwards;
}
@keyframes introSub{to{opacity:.9}}
.intro-hearts{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.intro-hearts .heart{ animation:slideFloat var(--d) ease-out forwards }
@keyframes slideFloat{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}
  20%{opacity:.85}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.9) rotate(var(--rot));opacity:0}
}

/* —— 揭幕 —— */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* —— 日历计数卡 —— */
.counter-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.counter{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:0 0 24px;
  border-radius:16px;
  background:var(--card);
  border:1px solid rgba(180,134,58,.25);
  box-shadow:0 22px 50px rgba(120,70,40,.18), inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;
  transform:perspective(1000px) rotateX(92deg) scale(.9);
  opacity:0;
  transition:transform 1.05s cubic-bezier(.18,.8,.2,1), opacity .6s ease;
}
.counter.in{ transform:perspective(1000px) rotateX(0) scale(1); opacity:1 }
.cal-binding{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:2;
}
.cal-binding i{
  width:9px;height:19px;border-radius:9px;
  background:linear-gradient(180deg,#cfa94f,#8a6528);
  box-shadow:0 2px 3px rgba(60,30,15,.35);
}
.cal-head{
  width:100%;padding:13px 0 14px;text-align:center;
  background:linear-gradient(180deg,var(--clay),var(--clay-deep));
}
.cal-head .c-kicker{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:14px;letter-spacing:.34em;text-indent:.34em;color:#fff2e4;
}
.c-num{
  display:flex;align-items:flex-end;gap:6px;
  font-family:"Fraunces",serif;font-weight:600;
  padding:18px 40px 6px;
}
.cal-num{
  font-size:clamp(104px,27vw,156px);line-height:.9;
  color:var(--clay);font-variant-numeric:tabular-nums;
  text-shadow:0 4px 14px rgba(194,80,47,.2);
}
.c-num > i{
  font-style:normal;font-weight:500;font-size:clamp(22px,5vw,30px);color:var(--ink-soft);
  padding-bottom:10px;
}
.c-date{ font-size:13px;letter-spacing:.12em;color:var(--ink-soft);padding:2px 40px 0 }

/* —— 生日倒计时 —— */
.bday{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;max-width:430px;
}
.bd-kicker{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:12px;letter-spacing:.32em;text-indent:.32em;color:var(--ink-soft);
}
.bd-row{
  display:flex;align-items:center;gap:14px;
  width:100%;justify-content:center;
}
.bd-card{
  flex:1;max-width:180px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 14px 15px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,250,242,.92),rgba(251,235,220,.75));
  border:1px solid rgba(180,134,58,.22);
  box-shadow:0 10px 24px rgba(120,70,40,.12);
}
.bd-name{
  font-family:"Fraunces",serif;font-weight:600;font-size:18px;
  background:linear-gradient(90deg,#e2503c,#e89b3c,#b9c24a,#5bb37a,#4f9fd8,#8a63c8,#d06a9c);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:rainbowShift 7s linear infinite;
}
.bd-date{ font-size:12px;letter-spacing:.08em;color:var(--ink-soft) }
.bd-count{ font-size:13px;color:var(--ink-soft) }
.bd-count b{ font-family:"Fraunces",serif;font-size:22px;color:var(--clay);font-variant-numeric:tabular-nums }
.bd-heart{
  width:16px;height:16px;flex:none;
  background:var(--heart-svg) center/contain no-repeat;opacity:.6;
}

.since{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:14px;color:var(--ink-soft);letter-spacing:.02em;
  opacity:0;transition:opacity 1s ease 1s;
}
.since.show{opacity:.9}

/* —— 下一里程碑倒计时 —— */
.next-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 34px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,250,240,.9),rgba(246,232,207,.7));
  border:1px solid rgba(180,134,58,.22);
  box-shadow:0 10px 26px rgba(120,70,40,.12);
  margin-top:2px;
}
.nx-kicker{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:11px;letter-spacing:.3em;color:var(--ink-soft);
}
.nx-name{
  font-family:"Fraunces",serif;font-weight:600;
  font-size:19px;color:var(--ink);letter-spacing:.06em;
}
.nx-num{
  display:flex;align-items:baseline;gap:6px;
  font-family:"Fraunces",serif;font-weight:600;
}
.nx-num span{
  font-size:34px;line-height:1;color:var(--clay);
  font-variant-numeric:tabular-nums;
  text-shadow:0 3px 10px rgba(194,80,47,.18);
}
.nx-num i{font-style:normal;font-weight:500;font-size:14px;color:var(--ink-soft)}

/* —— 时光轴（竖版） —— */
.timeline{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:24px}
.tl-title{
  font-family:"Fraunces",serif;font-weight:500;font-size:15px;
  letter-spacing:.4em;text-indent:.4em;color:var(--ink-soft);
}
.tl-list{
  position:relative;width:100%;
  padding-left:30px;
}
.tl-list::before{
  content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--clay) 0%,var(--clay) var(--prog,40%),var(--line) var(--prog,40%),var(--line) 100%);
}
.tl-row{
  position:relative;display:flex;align-items:baseline;gap:14px;
  padding:9px 0;
}
.tl-row + .tl-row{ }
.tl-dot{
  position:absolute;left:-28px;top:50%;
  width:11px;height:11px;margin-top:-5.5px;
  background:var(--card);border:2px solid var(--ink-faint);
  transform:rotate(45deg);
}
.tl-row.passed .tl-dot{ background:var(--clay);border-color:var(--clay) }
.tl-row.today .tl-dot{
  width:17px;height:17px;left:-31px;margin-top:-8.5px;
  background:var(--clay);border-color:var(--clay);
  box-shadow:0 0 0 5px rgba(194,80,47,.18);
  animation:tlPulse 2.2s ease-in-out infinite;
}
@keyframes tlPulse{
  0%,100%{box-shadow:0 0 0 5px rgba(194,80,47,.2)}
  50%{box-shadow:0 0 0 10px rgba(194,80,47,.08)}
}
.tl-name{
  font-family:"Fraunces",serif;font-weight:600;font-size:16px;color:var(--ink);
  min-width:64px;
}
.tl-row.today .tl-name{ color:var(--clay) }
.tl-row.passed .tl-name{ color:var(--ink-soft) }
.tl-meta{
  font-size:12px;letter-spacing:.04em;color:var(--ink-faint);
}
.tl-row.today .tl-meta{ color:var(--clay-deep);font-weight:500 }
.tl-row.passed .tl-meta{ color:var(--ink-faint) }

/* —— 每日一句 —— */
.daily{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:420px;text-align:center;
}
.daily-kicker{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:12px;letter-spacing:.3em;color:var(--clay);
}
.daily-text{
  font-size:15px;line-height:1.7;color:var(--ink);letter-spacing:.02em;
}

.foot{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:12px;color:var(--ink-faint);letter-spacing:.06em;
  margin-top:8px;
}

/* —— 装饰分隔 —— */
.divider{
  display:flex;align-items:center;gap:14px;width:240px;
  opacity:0;transition:opacity .8s ease;
}
.divider.in{opacity:1}
.div-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--ink-faint),transparent);
}
.div-mark{
  width:12px;height:12px;
  background:var(--heart-svg) center/contain no-repeat;
  opacity:.55;
}

/* 页脚印章 */
.stamp{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-family:"Fraunces",serif;font-style:italic;font-size:11px;
  color:var(--ink-faint);letter-spacing:.12em;
}
.stamp .div-mark{width:9px;height:9px;opacity:.7}

/* —— 碰撞模糊 —— */
.blur-overlay{
  position:fixed;inset:0;z-index:2;
  background:rgba(251,244,232,.32);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.blur-overlay.active{opacity:1}

/* —— 爱心 —— */
.hearts{position:fixed;inset:0;z-index:4;pointer-events:none}
.heart{
  position:absolute;width:var(--s);height:var(--s);
  background:var(--heart-svg) center/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(232,93,106,.45));
  animation:heartFly var(--d) ease-out forwards;
}
@keyframes heartFly{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}
  18%{opacity:1;transform:translate(calc(-50% + var(--dx)*.25),calc(-50% + var(--dy)*.25)) scale(1) rotate(var(--rot))}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.5) rotate(var(--rot));opacity:0}
}

/* —— 页面飘浮小爱心 —— */
.page-hearts{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.heart.ambient{ animation:ambientRise var(--d) linear forwards; filter:saturate(.9) brightness(1.05) drop-shadow(0 0 3px rgba(232,93,106,.3)); }
@keyframes ambientRise{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0}
  12%{opacity:.42}
  85%{opacity:.22}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% - var(--up))) scale(.7) rotate(var(--rot));opacity:0}
}

/* —— 流星 —— */
.meteors{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.meteor{
  position:absolute;top:var(--top);left:-180px;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,220,150,.25) 45%,rgba(255,243,210,.95) 100%);
  border-radius:2px;
  filter:drop-shadow(0 0 6px rgba(255,225,160,.85));
  transform:rotate(20deg);
  animation:meteorFly var(--d) ease-in forwards;
}
@keyframes meteorFly{
  0%{transform:translate(0,0) rotate(20deg);opacity:0}
  12%{opacity:1}
  78%{opacity:1}
  100%{transform:translate(125vw,48vh) rotate(20deg);opacity:0}
}

/* —— 飘落花瓣 —— */
.petals{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.petal{
  position:absolute;width:var(--s);height:var(--s);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 1px 2px rgba(120,60,40,.16));
  animation:petalFall var(--d) linear forwards;
}
@keyframes petalFall{
  0%{transform:translate(-50%,-50%) rotate(0);opacity:0}
  8%{opacity:.75}
  50%{transform:translate(calc(-50% + var(--sway)),50vh) rotate(180deg);opacity:.6}
  92%{opacity:.38}
  100%{transform:translate(calc(-50% - var(--sway)),114vh) rotate(360deg);opacity:0}
}

/* —— 情书 —— */
.letter-btn{
  margin-top:20px;padding:12px 28px;
  font-family:"Fraunces",serif;font-style:italic;font-size:14px;letter-spacing:.12em;
  color:var(--clay);background:transparent;
  border:1px solid rgba(194,80,47,.42);border-radius:30px;
  cursor:pointer;transition:background .3s ease,color .3s ease,box-shadow .3s ease;
}
.letter-btn:hover{background:var(--clay);color:var(--card);box-shadow:0 8px 22px rgba(194,80,47,.3)}
.letter-modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  background:rgba(40,28,22,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.letter-modal.open{opacity:1;pointer-events:auto}
.letter{
  width:min(86vw,440px);max-height:80vh;overflow:auto;
  background:linear-gradient(180deg,#fff8ec,#f6e8cf);
  border:1px solid rgba(180,134,58,.3);
  border-radius:14px;
  padding:40px 32px 30px;
  box-shadow:0 30px 70px rgba(60,30,15,.4);
  position:relative;
  transform:translateY(-70px) scale(.82) rotate(-3deg);opacity:0;
  transition:transform .65s cubic-bezier(.2,.85,.3,1.2),opacity .45s ease;
}
.letter-modal.open .letter{transform:translateY(0) scale(1) rotate(0);opacity:1}
.letter-close{
  position:absolute;top:14px;right:18px;
  font-size:24px;line-height:1;color:var(--ink-faint);
  cursor:pointer;transition:color .2s ease;
}
.letter-close:hover{color:var(--clay)}
.letter-head{
  font-family:"Fraunces",serif;font-weight:600;font-size:21px;
  color:var(--clay);letter-spacing:.1em;margin-bottom:16px;
}
.letter-body{font-size:15px;line-height:1.9;color:var(--ink);letter-spacing:.02em}
.letter-body p{margin-bottom:12px}
.letter-sign{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:14px;color:var(--ink-soft);text-align:right;margin-top:18px;
}

@media (max-width:480px){
  .page{padding:6vh 8vw 6vh;gap:38px}
  .ph-frame{width:66px;height:66px}
  .pair-link{width:34px}
  .tl-track{height:104px}
  .tl-name{font-size:10px}
}