/* 杭杭与涵涵 · 回忆录 — 有起伏的一页 */
:root{
  --paper:#fbf7f0;
  --paper-2:#f5ede1;
  --paper-3:#fefcf8;
  --ink:#2e2823;
  --ink-2:#554c43;
  --ink-3:#8f857a;
  --rule:#e3d9cb;
  --accent:#8a5f3c;
  --accent-2:#b98d63;
  --rose:#d8a79e;
  --serif:"Songti SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:"PingFang SC","Microsoft YaHei",-apple-system,system-ui,sans-serif;
  --ease:cubic-bezier(.22,.68,.16,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  background:#f7f0e5;            /* 兜底：滚过头也不会露白 */
}
body{
  background:#fbf7f0;            /* 纸就是纸，一个纯色 */
  color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.78;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  position:relative;min-height:100dvh;
}
/* 只留极淡的光，不是一层色 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(120% 58% at 50% -14%, rgba(216,167,158,.20), transparent 60%),
    radial-gradient(84% 46% at 8% 6%, rgba(185,141,99,.085), transparent 56%),
    radial-gradient(96% 52% at 92% 96%, rgba(185,141,99,.07), transparent 58%);
  transform:translate3d(0, calc(var(--sy) * -0.055), 0) scale(1.06);
  will-change:transform;
}
/* 极细的颗粒，避免大面积纯色发闷 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;
  background-image:radial-gradient(rgba(138,95,60,.05) 1px, transparent 1px);
  background-size:3px 3px;
}

/* ============================ 开屏 ============================ */
.splash{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:#fbf7f0;overflow:hidden;
  transition:opacity .9s var(--ease),transform .9s var(--ease),visibility .9s;
}
.splash::before{
  content:"";position:absolute;left:50%;top:34%;width:min(680px,155vw);height:min(680px,155vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(216,167,158,.34), rgba(216,167,158,.08) 42%, transparent 68%);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.splash-inner{position:relative;text-align:center;padding:0 26px;width:100%;max-width:520px}
.splash-kicker{font-size:10.5px;letter-spacing:.56em;text-indent:.56em;color:var(--ink-3);
  opacity:0;animation:fadeUp 1.2s var(--ease) .18s forwards}
.splash-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,14.5vw,84px);line-height:1.12;letter-spacing:.02em;
  margin-top:30px;display:flex;align-items:center;justify-content:center;color:#3a3129;
}
.splash-title span{display:inline-block;opacity:0;
  animation:charIn 1.25s var(--ease) calc(.42s + var(--d)) forwards}
.splash-title .amp{
  font-size:.42em;color:var(--accent-2);font-style:italic;margin:0 .18em;transform:translateY(-.12em);
  animation:charIn 1.25s var(--ease) .6s forwards, glow 5s ease-in-out 2.2s infinite;
}
@keyframes charIn{from{opacity:0;transform:translateY(20px) scale(.93);filter:blur(10px)}
  60%{filter:blur(1px)} to{opacity:1;transform:none;filter:blur(0)}}
@keyframes glow{0%,100%{text-shadow:0 0 0 rgba(185,141,99,0)}50%{text-shadow:0 0 18px rgba(185,141,99,.5)}}
.splash-line{display:block;width:0;height:1px;margin:36px auto 0;
  background:linear-gradient(to right,transparent,var(--accent-2),transparent);
  animation:lineGrow 1.5s var(--ease) 1.3s forwards}
@keyframes lineGrow{to{width:min(200px,56vw)}}

/* 天数 —— 整站的情感落点，放在最显眼处 */
.splash-days,.hero-days{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
}
.splash-days{
  margin-top:26px;
  opacity:0;animation:fadeUp 1.1s var(--ease) 1.55s forwards;
}
.splash-days b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,11vw,64px);line-height:1;color:#3a3129;
  font-variant-numeric:tabular-nums;
}
.splash-days em{
  font-style:normal;font-family:var(--serif);
  font-size:13px;letter-spacing:.34em;color:var(--ink-3);
}
.hero-days{margin-top:26px}
.hero-days b{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,9vw,54px);line-height:1;color:#3a3129;
  font-variant-numeric:tabular-nums;
}
.hero-days em{
  font-style:normal;font-family:var(--serif);
  font-size:12.5px;letter-spacing:.32em;color:var(--ink-3);
}
.splash-sub{margin-top:24px;font-family:var(--serif);font-size:13.5px;
  letter-spacing:.66em;text-indent:.66em;color:var(--ink-3);
  opacity:0;animation:fadeUp 1.1s var(--ease) 1.7s forwards}
.splash-enter{
  margin-top:62px;appearance:none;background:none;border:0;cursor:pointer;
  font-family:var(--serif);font-size:15.5px;letter-spacing:.36em;text-indent:.36em;
  color:var(--accent);padding:12px 10px;position:relative;
  opacity:0;animation:fadeUp 1.1s var(--ease) 2.05s forwards;-webkit-tap-highlight-color:transparent;
}
.splash-enter::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:0;height:1px;background:var(--accent-2);transition:width .5s var(--ease)}
.splash-enter:hover::after,.splash-enter:active::after{width:100%}
.splash-hint{position:absolute;left:0;right:0;bottom:max(5.5vh,env(safe-area-inset-bottom,0px));
  text-align:center;font-size:10px;letter-spacing:.36em;color:var(--ink-3);
  opacity:0;animation:hintPulse 3s ease-in-out 2.7s infinite}
@keyframes hintPulse{0%,100%{opacity:0}45%,55%{opacity:.8}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.splash.gone{opacity:0;transform:translateY(-5vh) scale(1.03);visibility:hidden;pointer-events:none}

/* ---- 飘着的小爱心 ---- */
/* 放在最上层：开屏时也能看见，飘过文字但很淡，不挡阅读 */
.motes{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}

.mote{
  position:absolute;display:block;
  will-change:transform,opacity;
  animation-name:drift;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
/* 用一块方片转 45 度 + 两个圆补出两瓣 */
.mote i{
  display:block;width:100%;height:100%;
  background:var(--c);
  transform:rotate(-45deg);
  position:relative;
}
.mote i::before,
.mote i::after{
  content:"";position:absolute;width:100%;height:100%;
  border-radius:50%;background:var(--c);
}
.mote i::before{left:0;top:-50%}
.mote i::after{left:50%;top:0}

@keyframes drift{
  0%{transform:translate3d(0,0,0) rotate(var(--r0,0deg));opacity:0}
  9%{opacity:var(--o,.55)}
  86%{opacity:calc(var(--o,.55) * .55)}
  100%{transform:translate3d(var(--dx,12px),-86vh,0) rotate(var(--r1,26deg));opacity:0}
}

.page{opacity:0;transition:opacity 1.1s var(--ease) .2s;position:relative;z-index:2}
.page.in{opacity:1}

/* ============================ hero ============================ */
.hero{
  min-height:72vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:14vh 24px 0;position:relative;
}
.kicker{font-size:10.5px;letter-spacing:.54em;text-indent:.54em;color:var(--ink-3);margin-bottom:26px}
.hero-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,11.5vw,86px);line-height:1.06;letter-spacing:.015em;
  display:flex;align-items:center;justify-content:center;gap:.14em;flex-wrap:wrap;color:#3a3129;
}
.hero-title .and{font-size:.34em;color:var(--accent-2);font-style:italic;transform:translateY(-.1em)}
.lede{margin-top:24px;font-size:14px;color:var(--ink-2);letter-spacing:.07em}
.hero-rule{display:block;width:1px;height:64px;margin:48px auto 0;
  background:linear-gradient(to bottom,var(--rule),transparent)}

/* ============================ 时间轴 ============================ */
main{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:0 26px}

/* 一条贯穿的细线 + 每天的节点，把九天串成一条时间 */
#tree{position:relative;padding-left:30px}
#tree::before{
  content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(to bottom,transparent,var(--rule) 3%,var(--rule) 94%,transparent);
}

.day{
  position:relative;
  padding:56px 0;
  border-top:1px solid var(--rule);
  opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.day:last-of-type{border-bottom:1px solid var(--rule)}
.day.seen{opacity:1;transform:none}

/* 节点小圆点 + 连到主线的短枝 */
.day::before{
  content:"";position:absolute;left:-30px;top:62px;
  width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:1px solid var(--accent-2);z-index:2;
}
.day::after{
  content:"";position:absolute;left:-22px;top:66px;width:16px;height:1px;
  background:var(--rule);
}
.day.dark::before{background:var(--accent-2)}

/* 全页唯一的重音：九小时二十五分那段 */
.day.dark{padding:56px 0}
.day.dark .day-body{
  padding:34px 28px;
  background:#2e2823;
  border-radius:3px;
}
.day.dark .day-num{color:rgba(216,167,158,.8)}
.day.dark .day-date{color:#f5efe6}
.day.dark .day-week{color:rgba(245,239,230,.45)}
.day.dark .day-title{color:var(--rose)}
.day.dark .quote{color:#fbf6ee}
.day.dark .quote::before,.day.dark .quote::after{color:rgba(216,167,158,.75)}
.day.dark .note{color:rgba(245,239,230,.68)}
.day.dark .day-meta{color:rgba(245,239,230,.5);border-top-color:rgba(245,239,230,.14)}

/* 层级：越靠近的关系，间距越小 */
.day-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.day-num{font-size:9.5px;letter-spacing:.26em;color:var(--ink-3);opacity:.7;
  font-variant-numeric:tabular-nums}
.day-date{font-family:var(--serif);font-size:15.5px;color:var(--ink);letter-spacing:.02em}
.day-week{font-size:10px;color:var(--ink-3);letter-spacing:.16em}

.day-title{
  font-family:var(--serif);font-weight:400;font-size:12.5px;
  letter-spacing:.2em;color:var(--accent);margin-bottom:18px;
}
.quote{
  font-family:var(--serif);font-size:clamp(20px,5vw,25px);
  line-height:1.68;color:#332c25;margin-bottom:20px;word-break:break-word;
}
.quote::before{content:"「";color:var(--accent-2)}
.quote::after{content:"」";color:var(--accent-2)}
.note{font-size:13.5px;line-height:2.06;color:var(--ink-2)}
.day-meta{
  margin-top:32px;padding-top:16px;border-top:1px dashed rgba(227,217,203,.9);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.14em;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.day-meta i{font-style:normal;opacity:.4}

/* ============================ 深度 ============================ */
/* 文字层永远平稳；只有背景和容器有厚度 */
body{--sy:0px}

/* 开屏标题像一张纸片浮在光里 */
.splash-inner{
  perspective:1000px;
  perspective-origin:50% 40%;
}
.splash-title{
  transform:rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) translateZ(0);
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,.68,.16,1);
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 18px 34px -26px rgba(90,66,44,.9);
}
.splash-line,.splash-sub,.splash-kicker{transform:translateZ(14px)}

/* 每天从稍远处飘到眼前 */
.day{
  transform:translateY(22px) translateZ(-40px) scale(.985);
  transform-origin:50% 0;
  transition:opacity .9s var(--ease), transform 1s var(--ease), box-shadow .4s;
}
.day.seen{transform:none}

/* 深色重音那张，像贴歪了一点的纸 */
.day.dark .day-body{
  transform:rotate(-.55deg);
  transform-origin:50% 0;
  box-shadow:0 30px 60px -36px rgba(42,35,29,.95), 0 2px 0 rgba(255,255,255,.05) inset;
}

/* 记得的卡片也有极浅的厚度 */
.kept-item{
  transform:translateZ(0);
  transition:transform .5s var(--ease), box-shadow .4s;
}
.kept-item.seen{animation:keptIn .7s var(--ease) both}
.kept-item:hover{transform:translateY(-2px);box-shadow:0 14px 30px -24px rgba(90,66,44,.8)}

/* ============================ 未完 ============================ */
.to-be-continued{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:26px 0 10px;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.to-be-continued.seen{opacity:.55}
.to-be-continued span{
  width:5px;height:5px;border-radius:50%;background:var(--accent-2);
  animation:blink 3.6s ease-in-out infinite;
}
.to-be-continued span:nth-child(2){animation-delay:.5s}
.to-be-continued span:nth-child(3){animation-delay:1s}
@keyframes blink{0%,100%{opacity:.22;transform:scale(.85)}50%{opacity:.9;transform:scale(1)}}

/* ============================ 记得 ============================ */
.kept-block{margin-top:12vh;padding-bottom:10vh}
.sec{
  font-family:var(--serif);font-weight:400;font-size:12px;
  letter-spacing:.4em;text-indent:.4em;color:var(--ink-3);
  padding-bottom:14px;display:flex;align-items:center;gap:14px;
}
.sec::after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--rule),transparent)}
.kept{display:grid;grid-template-columns:repeat(auto-fit,minmax(144px,1fr));gap:12px}
.kept-item{
  background:linear-gradient(180deg, rgba(255,253,249,.95), rgba(255,253,249,.55));
  border:1px solid rgba(227,217,203,.85);border-radius:3px;padding:19px 17px;
  box-shadow:0 8px 22px -22px rgba(90,66,44,.7);
}
.kept-item.seen{animation:keptIn .7s var(--ease) both}
@keyframes keptIn{from{opacity:.001;transform:translateY(9px)}to{opacity:1;transform:none}}
.kept-label{font-size:9.5px;letter-spacing:.2em;color:var(--ink-3);margin-bottom:8px}
.kept-value{font-family:var(--serif);font-size:clamp(17px,4.3vw,21px);
  line-height:1.34;color:#332c25;word-break:break-word}

/* ============================ foot ============================ */
.foot{position:relative;z-index:2;text-align:center;
  padding:0 24px calc(11vh + env(safe-area-inset-bottom,0px));
  font-size:11px;letter-spacing:.1em;color:var(--ink-3);line-height:2.3}
.foot-dim{font-size:10px;opacity:.65}
.loading{color:var(--ink-3);font-size:14px;padding:60px 0;letter-spacing:.1em}
::selection{background:rgba(216,167,158,.35)}

/* ============================ 移动端 ============================ */
@media (max-width:680px){
  main{padding:0 20px}
  .day{padding:34px 0}
  .day.dark .day-body{padding:26px 18px}
  .kept{grid-template-columns:1fr 1fr;gap:10px}
  .kept-item{padding:16px 14px}
  .hero{min-height:58vh;padding-top:11vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-delay:0ms !important;transition-duration:.01ms !important}
  .splash-kicker,.splash-title span,.splash-sub,.splash-enter{opacity:1 !important}
  .splash-line{width:190px !important}
  .day{opacity:1 !important;transform:none !important}
  .motes{display:none}
}