:root{
  --bg1:#fbf4e8;
  --bg2:#f3e4cf;
  --bg3:#ecd6b8;
  --ink:#3a2c26;
  --ink-soft:#8a6f5f;
  --ink-faint:#b59c84;
  --clay:#c2502f;
  --clay-deep:#a83f24;
  --rose:#c97a6a;
  --gold:#b4863a;
  --card:#fffaf0;
  --line:rgba(120,86,60,.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,221,170,.5) 0%, transparent 70%),
    radial-gradient(40% 30% at 88% 92%, rgba(201,122,106,.18) 0%, transparent 70%);
}

.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;color:var(--ink);
}
.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;color:var(--ink);
}
.portrait#avB .ph-cap{ letter-spacing:.16em }

/* —— 启动动画 · 星空滑幕 —— */
.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{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:32px 52px 28px;
  border-radius:22px;
  background:var(--card);
  border:1px solid rgba(180,134,58,.22);
  box-shadow:0 22px 50px rgba(120,70,40,.18), inset 0 1px 0 rgba(255,255,255,.7);
  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 }
.c-kicker{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:14px;letter-spacing:.34em;text-indent:.34em;color:var(--ink-soft);
}
.c-num{
  display:flex;align-items:baseline;gap:6px;
  font-family:"Fraunces",serif;font-weight:600;
}
.c-num span{
  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);
}
.c-date{ font-size:13px;letter-spacing:.12em;color:var(--ink-soft) }

.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}

/* —— 时光轴（竖版） —— */
.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(.85) brightness(1.05); }
@keyframes ambientRise{
  0%{transform:translate(-50%,-50%) scale(.3);opacity:0}
  15%{opacity:.35}
  85%{opacity:.25}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% - var(--up))) scale(.7);opacity:0}
}

@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}
}