/* ==========================================================================
   liguomiao 的花园 · 样式
   视觉隐喻：晨光中被赠予的花园 —— 奶油色晨雾、深绿土壤、金色微光
   ========================================================================== */

:root {
  --dawn:   #f8f1e4;   /* 晨光奶油 */
  --mist:   #efe4d2;   /* 雾色 */
  --soil:   #2e4034;   /* 深绿土壤 */
  --leaf:   #5a7a5e;   /* 叶绿 */
  --gold:   #c99a3f;   /* 金色微光 */
  --blush:  #d98c8c;   /* 花瓣绯色 */
  --rose:   #b06a6e;   /* 深玫瑰 */
  --ink:    #33443a;   /* 墨绿文字 */

  --serif-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --serif-en: "Cormorant Garamond", "Times New Roman", Georgia, serif;

  --ease-soft: cubic-bezier(.22,.9,.3,1);
  --ease-bloom: cubic-bezier(.18,.8,.25,1.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--serif-cn);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 70% 110%, #f3e6cf 0%, transparent 55%),
    radial-gradient(140% 100% at 20% -10%, #fdf8ee 0%, transparent 60%),
    linear-gradient(180deg, #faf4e8 0%, var(--dawn) 45%, #f1e5d0 100%);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(217,140,140,.28); }

/* --------------------------------------------------------------------------
   画布：活的花园，作为贯穿三个区域的底层风景
   -------------------------------------------------------------------------- */
#garden {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   序幕 · 礼物的揭开
   -------------------------------------------------------------------------- */
#veil {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 50% at 50% 46%, #35503f 0%, transparent 70%),
    linear-gradient(175deg, #22362a 0%, #1b2b22 60%, #16241c 100%);
  cursor: pointer;
  transition: opacity 1.6s var(--ease-soft), visibility 1.6s;
}
#veil.open {
  opacity: 0;
  visibility: hidden;
}
.veil-inner { text-align: center; }

.veil-for {
  font-family: var(--serif-en);
  font-size: clamp(15px, 2.2vw, 19px);
  letter-spacing: .5em;
  text-indent: .5em;
  text-transform: lowercase;
  color: rgba(248,241,228,.55);
  animation: veilBreathe 4s ease-in-out infinite;
}
.veil-for span {
  color: var(--gold);
  font-style: italic;
}
@keyframes veilBreathe {
  0%,100% { opacity: .55; }
  50%     { opacity: 1; }
}

/* 种子：一颗缓缓呼吸的光 */
#seed {
  position: relative;
  width: 84px; height: 84px;
  margin: 7vh auto 5vh;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seed-core {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #ffe9b8;
  box-shadow: 0 0 18px 6px rgba(255,224,150,.75), 0 0 60px 24px rgba(201,154,63,.35);
  transform: translate(-50%,-50%);
  animation: seedPulse 2.8s ease-in-out infinite;
}
.seed-halo {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,224,150,.4);
  transform: translate(-50%,-50%);
  animation: haloSpread 2.8s ease-out infinite;
}
.seed-ring {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,224,150,.18);
  transform: translate(-50%,-50%);
  animation: haloSpread 2.8s ease-out 1.4s infinite;
}
@keyframes seedPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%     { transform: translate(-50%,-50%) scale(1.35); }
}
@keyframes haloSpread {
  0%   { transform: translate(-50%,-50%) scale(.6); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}
#seed:hover .seed-core { animation-duration: 1.4s; }

.veil-hint {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .45em;
  text-indent: .45em;
  color: rgba(248,241,228,.5);
  animation: veilBreathe 4s ease-in-out 1.2s infinite;
}

/* --------------------------------------------------------------------------
   顶栏 · 花园的小径标
   -------------------------------------------------------------------------- */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(18px, 3vw, 32px) clamp(20px, 4.5vw, 56px);
  mix-blend-mode: normal;
}
.wordmark {
  font-family: var(--serif-en);
  font-size: 19px;
  letter-spacing: .12em;
  color: var(--ink);
  text-decoration: none;
  font-style: italic;
}
.wordmark i { color: var(--gold); font-style: normal; padding: 0 .35em; }

#topbar nav { display: flex; gap: clamp(18px, 3vw, 38px); }
#topbar nav a {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .35em;
  text-indent: .35em;
  color: rgba(51,68,58,.62);
  text-decoration: none;
  padding: 6px 2px;
  transition: color .5s var(--ease-soft);
}
#topbar nav a::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blush);
  opacity: 0;
  transform: translateX(-50%) scale(.3);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-bloom);
}
#topbar nav a:hover { color: var(--ink); }
#topbar nav a.active { color: var(--ink); }
#topbar nav a.active::after { opacity: 1; transform: translateX(-50%) scale(1); }

/* --------------------------------------------------------------------------
   三区切换 · 像从花园一角走向另一角
   -------------------------------------------------------------------------- */
#stage { position: relative; z-index: 5; height: 100%; }

.view {
  position: absolute;
  inset: 0;
  display: grid;
  padding: clamp(84px, 12vh, 130px) clamp(24px, 7vw, 110px) clamp(64px, 9vh, 96px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(26px);
  transition:
    opacity 1s var(--ease-soft),
    transform 1s var(--ease-soft),
    visibility 1s;
  pointer-events: none;
}
.view.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   一 · 花园：问候
   -------------------------------------------------------------------------- */
#view-garden { align-content: center; }

/* 注意：ch 按半角数字宽度计且随本元素字号折算，中文下会把长句拦腰折断，
   故用 rem/em 控制宽度 */
.greeting { max-width: min(100%, 36rem); }

.eyebrow {
  font-size: clamp(12px, 1.4vw, 14px);
  font-weight: 300;
  letter-spacing: .4em;
  color: rgba(51,68,58,.55);
  margin-bottom: clamp(18px, 3vh, 28px);
  opacity: 0;
  transform: translateY(14px);
}
.title {
  font-weight: 400;
  font-size: clamp(30px, 5.6vw, 62px);
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--soil);
}
.title .line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
}
.title .line:nth-child(3),
.title .line:nth-child(4) { color: var(--rose); }

.sub {
  margin-top: clamp(22px, 3.5vh, 34px);
  font-family: var(--serif-en);
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: .22em;
  color: rgba(51,68,58,.6);
  opacity: 0;
  transform: translateY(14px);
}

/* 绽放进场：veil 揭开后由 JS 添加 .bloomed 触发 */
body.bloomed .eyebrow,
body.bloomed .sub {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 3.6s var(--ease-soft) .5s, transform 3.6s var(--ease-soft) .5s;
}
body.bloomed .title .line {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 6s var(--ease-soft), transform 6s var(--ease-soft);
}
body.bloomed .title .line:nth-child(1) { transition-delay: 2.2s; }
body.bloomed .title .line:nth-child(2) { transition-delay: 3.25s; }
body.bloomed .title .line:nth-child(3) { transition-delay: 4.3s; }
body.bloomed .title .line:nth-child(4) { transition-delay: 5.35s; }
body.bloomed .sub { transition-delay: 7s; }
body.bloomed .eyebrow { transition-delay: .15s; }

.ground-hint {
  position: absolute;
  bottom: clamp(26px, 5vh, 44px);
  right: clamp(24px, 6vw, 90px);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: .3em;
  color: rgba(51,68,58,.42);
  opacity: 0;
  transition: opacity 1.5s var(--ease-soft) 10s;
}
body.bloomed .ground-hint { opacity: 1; }

/* --------------------------------------------------------------------------
   二 · 笔记：思绪的溪流（大片留白，一句一朵）
   -------------------------------------------------------------------------- */
#view-notes { place-items: center; }

.stream {
  text-align: center;
  /* 每句以逗号为界分两行（JS 在逗号后插入 <br>），
     宽度只需容下最长的半句，任何屏幕下断行位置固定 */
  max-width: min(100%, 26rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.petal-mark {
  display: block;
  width: 14px; height: 14px;
  margin: 0 auto clamp(26px, 5vh, 44px);
  background: var(--blush);
  border-radius: 100% 0 100% 0;
  transform: rotate(45deg);
  box-shadow: 0 4px 18px rgba(217,140,140,.45);
  animation: petalHover 5s ease-in-out infinite;
}
@keyframes petalHover {
  0%,100% { transform: rotate(45deg) translate(0,0); }
  50%     { transform: rotate(55deg) translate(2px,-5px); }
}

.note-line {
  font-size: clamp(20px, 3.2vw, 32px);
  font-weight: 300;
  line-height: 2;
  letter-spacing: .14em;
  color: var(--soil);
  min-height: 4em;   /* 固定两行高度（line-height 2 × 2 行），避免切换时跳动 */
}
.note-line.fading { opacity: 0; transform: translateY(-14px); }
.note-line {
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}

.note-dots {
  margin-top: clamp(30px, 5vh, 46px);
  font-size: 11px;
  letter-spacing: .8em;
  text-indent: .8em;
  color: rgba(51,68,58,.35);
}
.note-dots b { color: var(--blush); font-weight: 400; }

.note-hint {
  margin-top: 16px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .35em;
  text-indent: .35em;
  color: rgba(51,68,58,.32);
}

/* --------------------------------------------------------------------------
   三 · 关于：土壤的故事
   -------------------------------------------------------------------------- */
#view-about { align-content: center; justify-items: center; }

.soil {
  max-width: min(100%, 24em);   /* em 随自身字号缩放，最长一行（16 字）单行可容 */
  text-align: center;
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 300;
  line-height: 2.4;
  letter-spacing: .18em;
  color: var(--ink);
}
.soil p { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease-soft), transform 1.1s var(--ease-soft); }
.view.active .soil p { opacity: 1; transform: translateY(0); }
.view.active .soil p:nth-child(1) { transition-delay: .15s; }
.view.active .soil p:nth-child(2) { transition-delay: .4s; }
.view.active .soil p:nth-child(3) { transition-delay: .65s; }
.view.active .soil p:nth-child(4) { transition-delay: .9s; }

.soil-sign {
  margin-top: clamp(28px, 5vh, 44px);
  font-family: var(--serif-en);
  font-size: 15px;
  letter-spacing: .3em;
  color: var(--gold);
}
.view.active .soil-sign { transition-delay: 1.3s; }

/* --------------------------------------------------------------------------
   页脚
   -------------------------------------------------------------------------- */
#foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  padding: clamp(16px, 2.6vh, 24px);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .3em;
  color: rgba(51,68,58,.4);
}
.foot-sep { color: var(--gold); }

/* ICP 备案链接：保持页脚气质，编号较长故缩小字距 */
.icp {
  color: inherit;
  text-decoration: none;
  letter-spacing: .12em;
  transition: color .4s var(--ease-soft);
}
.icp:hover { color: rgba(51,68,58,.75); }

/* --------------------------------------------------------------------------
   响应式：移动端同样完整传递“被珍视”的感受
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 竖屏构图：问候语居中、略高于中缝，下方留给花田 */
  #view-garden { align-content: center; padding-bottom: 14vh; }
  .greeting { max-width: none; text-align: center; }
  .ground-hint { left: 0; right: 0; text-align: center; bottom: 15vh; }  /* 页脚含 ICP 会折行变高，提示需留足间距 */
  #topbar { padding: 18px 20px; }
  .wordmark { font-size: 16px; }
  #topbar nav a { font-size: 12px; letter-spacing: .25em; }
  .soil { letter-spacing: .12em; line-height: 2.3; }
}

/* --------------------------------------------------------------------------
   无障碍：用户偏好减少动效时，静态呈现已绽放的花园
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .2s !important;
  }
  .seed-halo, .seed-ring, .petal-mark { display: none; }
}