/* ── 雪山世界 ────────────────────────────────────────────
   首页的第一屏不是一张图，是一个有远近的地方。
   天空在最上面；云走在天空里；月亮和太阳各按自己的时刻出现；
   山在云下面；雾从谷底往上漫；雪有三层深浅；来路在最前面。
   每一层都在动，但没有一层是为了动而动——它们跟着"此刻"。

   这一整段只属于首页。别的页面仍然是原来那一条窄带子，
   因为那些页要办的事不是看山。 */

.world {
  position: relative;
  margin: calc(-1 * var(--bar-h, 56px)) calc(-1 * var(--pad)) 0;
  height: calc(clamp(390px, 56vh, 540px) + var(--bar-h, 56px));
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  background: var(--paper);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  outline: none;

  /* 山在画面里的位置：手机让天占得更多，桌面让山铺开 */
  --plate-top: 0.34;
  --plate-w: 215%;
  --moon-r: 0.052;
  /* 山脊后面的那一段颜色。我们的天必须正好落到它上面——
     落到别的颜色上，天上就会横着一条谁也解释不了的线。
     它不是常量：它从天色里调出来，所以黄昏的天接黄昏的山。 */
  --sky-base: color-mix(in srgb, var(--sky-mid) 84%, #8B94A3);

  /* 云的三种织法。写成遮罩，颜色才跟着天光走：
     白天的云是白的，黄昏的云是暖的，夜里的云是灰蓝的——
     同一朵云，一种颜色是画不出来的。 */
  --cloud-t1:
    radial-gradient(46% 22% at 20% 62%, rgba(255,255,255,.46), transparent 88%),
    radial-gradient(38% 16% at 41% 55%, rgba(255,255,255,.32), transparent 90%),
    radial-gradient(52% 20% at 68% 66%, rgba(255,255,255,.40), transparent 88%),
    radial-gradient(34% 14% at 86% 52%, rgba(255,255,255,.26), transparent 92%);
  --cloud-t2:
    radial-gradient(40% 40% at 16% 58%, rgba(255,255,255,.42), transparent 92%),
    radial-gradient(32% 32% at 34% 46%, rgba(255,255,255,.30), transparent 92%),
    radial-gradient(46% 44% at 58% 62%, rgba(255,255,255,.38), transparent 92%),
    radial-gradient(30% 30% at 78% 44%, rgba(255,255,255,.24), transparent 94%);
  --cloud-t3:
    radial-gradient(58% 28% at 24% 70%, rgba(255,255,255,.38), transparent 90%),
    radial-gradient(66% 32% at 62% 76%, rgba(255,255,255,.42), transparent 90%),
    radial-gradient(50% 26% at 92% 64%, rgba(255,255,255,.30), transparent 92%);
}
.world:focus-visible { outline: 2px solid color-mix(in srgb, #fff 70%, transparent); outline-offset: -4px; }

/* ① 天。上面是空的，往下化进照片自己的天——
   接缝之所以看不见，是因为底下那层天空本来就是这张照片的天，只是被抹平了。 */
/* 天铺满整屏。
   为什么是整屏而不是只到山脊：照片把天空挖掉了，峰与峰之间是透的。
   透出来的必须还是天——太阳落山时也要能在缝里看见。
   所以天在最底下，山压在它上面：山挡得住太阳，缝里挡不住。 */
.w-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--sky-top) 0%,
      var(--sky-mid) calc(var(--plate-top) * 46%),
      color-mix(in srgb, var(--sky-mid) 42%, var(--sky-base)) calc(var(--plate-top) * 74%),
      var(--sky-base) calc(var(--plate-top) * 100%),
      color-mix(in srgb, var(--sky-base) 52%, var(--haze-c)) calc((var(--plate-top) + var(--plate-h, .5) * 0.30) * 100%),
      var(--haze-c) calc((var(--plate-top) + var(--plate-h, .5) * 0.62) * 100%),
      var(--haze-c) 100%);
}

/* ② 星。只有夜深、云薄、月不亮的时候才在。 */
.w-stars {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--plate-top) * 100% - 2%);
  opacity: calc(var(--stars, 0) * 0.85);
  background-image:
    radial-gradient(1.1px 1.1px at 14% 22%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 62% 12%, #fff, transparent),
    radial-gradient(0.9px 0.9px at 38% 56%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 84% 40%, #fff, transparent),
    radial-gradient(1px 1px at 26% 76%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 72% 68%, #fff, transparent);
  background-size: 340px 260px, 260px 300px, 420px 220px, 300px 340px, 380px 280px, 240px 320px;
  background-repeat: repeat;
  transition: opacity 1.2s linear;
}

/* ③ 天体。位置由此刻的太阳时间算出来，不写死。 */
.w-celestial { position: absolute; inset: 0; }

.w-sun {
  position: absolute;
  left: calc(var(--sun-x, .8) * 100%);
  top: calc(var(--sun-y, .5) * 100%);
  width: calc(var(--sun-r, .2) * 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: var(--sun-a, 0);
  transition: opacity .8s linear;
  background:
    radial-gradient(circle closest-side,
      rgba(255, 253, 246, .98) 0%,
      rgba(255, 236, 202, .92) 12%,
      rgba(255, 209, 150, .52) 26%,
      rgba(255, 186, 116, .22) 44%,
      rgba(255, 170, 104, .07) 66%,
      transparent 100%);
}

.w-moon {
  position: absolute;
  left: calc(var(--moon-x, .2) * 100%);
  top: calc(var(--moon-y, .3) * 100%);
  width: calc(var(--moon-r, .052) * 100%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  opacity: var(--moon-a, 0);
  transition: opacity 1.2s linear;
  background: #F2F0E8;
  box-shadow:
    0 0 calc(var(--moon-r, .052) * 240%) calc(var(--moon-r, .052) * 36%) rgba(214, 228, 246, .30),
    0 0 calc(var(--moon-r, .052) * 90%) calc(var(--moon-r, .052) * 12%) rgba(238, 244, 252, .34);
}
/* 月相：拿一块和天同色的圆把缺的那一边盖掉 */
.w-moon b {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--moon-shadow, #1b2436);
  transform: translateX(calc((var(--moon-illum, 1) - 1) * 100%));
}

/* ④ 云。三种织法，三种速度。它们可以真的把山挡住。 */
.w-clouds {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--plate-top) * 100% + 30%);
  overflow: hidden;
  opacity: calc(var(--cloud-a, .1) * var(--vis, 1));
  mask-image: linear-gradient(180deg,
    transparent 0%, color-mix(in srgb, #000 30%, transparent) 12%,
    #000 38%, #000 68%, color-mix(in srgb, #000 25%, transparent) 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%, color-mix(in srgb, #000 30%, transparent) 12%,
    #000 38%, #000 68%, color-mix(in srgb, #000 25%, transparent) 90%, transparent 100%);
}
.w-clouds b {
  position: absolute;
  left: 0;
  width: 320%;
  background-color: var(--cloud-c, #fff);
  mask-repeat: repeat-x;
  -webkit-mask-repeat: repeat-x;
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  will-change: transform;
}
.w-c1 {
  top: 0; height: 42%;
  mask-image: var(--cloud-t1);
  -webkit-mask-image: var(--cloud-t1);
  mask-size: 900px 100%;
  -webkit-mask-size: 900px 100%;
  animation: drift1 190s linear infinite;
}
.w-c2 {
  top: 22%; height: 46%;
  mask-image: var(--cloud-t2);
  -webkit-mask-image: var(--cloud-t2);
  mask-size: 1400px 100%;
  -webkit-mask-size: 1400px 100%;
  animation: drift2 300s linear infinite;
}
.w-c3 {
  top: 46%; height: 50%;
  mask-image: var(--cloud-t3);
  -webkit-mask-image: var(--cloud-t3);
  mask-size: 2000px 100%;
  -webkit-mask-size: 2000px 100%;
  animation: drift3 430s linear infinite;
}
@keyframes drift1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-900px, 0, 0); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1400px, 0, 0); } }
@keyframes drift3 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2000px, 0, 0); } }

/* ⑤ 山。照片在这里只是"最上面那层的材质"，不是一张背景图：
   它的天已经被拿掉，剩下的一层摞在我们自己的天上。 */

.w-plate {
  position: absolute;
  left: 50%;
  top: calc(var(--plate-top) * 100%);
  width: var(--plate-w);
  transform: translate3d(-50%, 0, 0);
}
.w-plate img { display: block; width: 100%; }

/* 山那一层由照片本身撑高（它现在在文档流里），越出画面下沿的部分被裁掉 */
.w-range { position: relative; }

/* 山脊上的光。两样东西叠在一起才成立：
   ① 用山自己当遮罩——光只落在有山的地方；
   ② 把山的暗部压成黑再提亮——screen 只把"雪"加亮，岩石不动。
   于是日照金山是这座山的山脊变亮，不是画面上多了一块橙色。 */
.w-alpenglow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: calc(var(--gold, 0) * .58 + var(--silver, 0) * .40);
  mix-blend-mode: screen;
  filter: grayscale(1) contrast(2.1) brightness(1.30)
          sepia(1) saturate(3.6) hue-rotate(var(--glow-hue, -14deg));
  mask-image: url("../../world/range.webp");
  -webkit-mask-image: url("../../world/range.webp");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: opacity 1.4s linear;
}

/* ⑥ 地平线上那一段暖光。它是唯一一处同时落在"我们的天"和
   "照片的天"上的东西——正因为一起上色，接缝才不会露出来。
   傍晚它是橘的，正午几乎看不见，夜里退场。 */
.w-horizon {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc((var(--plate-top) + var(--plate-h, .5) * 0.34) * 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--scr-a, 0);
  transition: opacity 1.6s linear;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--scr-c, #fff) 26%, transparent) 34%,
    color-mix(in srgb, var(--scr-c, #fff) 46%, transparent) 66%,
    color-mix(in srgb, var(--scr-c, #fff) 30%, transparent) 88%,
    transparent 100%);
}

/* ⑦ 把整座山（和它上面的天）放进同一段天光里。
   只做明暗和色温，不做颜色——颜色归天空管。 */
.w-grade {
  position: absolute; inset: 0;
  pointer-events: none;
  background: var(--mul-c, transparent);
  opacity: var(--mul-a, 0);
  mix-blend-mode: multiply;
}
.w-plate, .w-sky, .w-clouds, .w-celestial, .w-stars {
  filter: brightness(var(--grade-bright, 1)) saturate(var(--grade-sat, 1)) hue-rotate(var(--grade-hue, 0deg));
  transition: filter 1.6s linear;
}

/* ⑦ 谷里的雾。它只做一件事：把照片底下那片暗坡化开。
   它不负责接纸——那是下一层的事。 */
.w-haze {
  position: absolute;
  left: 0; right: 0;
  /* 从山脚下那片暗坡开始往回化——那里本来就是雾起来的地方 */
  top: calc((var(--plate-top) + var(--plate-h, .5) * var(--haze-lift, .46)) * 100%);
  bottom: 0;
  opacity: var(--haze-a, .8);
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--haze-c, #9aa) 26%, transparent) 26%,
    color-mix(in srgb, var(--haze-c, #9aa) 46%, transparent) 54%,
    color-mix(in srgb, var(--haze-c, #9aa) 62%, transparent) 78%,
    color-mix(in srgb, var(--haze-c, #9aa) 70%, transparent) 100%);
}

/* ⑧ 三带慢慢横着走的雾。不是渐变，是空气。 */
/* 空气本身。能见度低的时候，整幅画面都会被它糊一层——
   雾不是"雾天主题"，是看不见山。 */
.w-air {
  position: absolute; inset: 0;
  background: var(--haze-c, #9aa);
  opacity: var(--air, 0);
  pointer-events: none;
  transition: opacity 1.6s linear;
}

.w-mist { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; overflow: hidden;
  opacity: calc(var(--mist-a, .5) * .9); pointer-events: none; }
.w-mist b {
  position: absolute; left: -20%; width: 140%;
  border-radius: 50%;
  background: radial-gradient(50% 46% at 50% 50%,
    color-mix(in srgb, var(--paper) 82%, transparent) 0%,
    color-mix(in srgb, var(--paper) 40%, transparent) 46%,
    transparent 76%);
  will-change: transform;
}
.w-mist b:nth-child(1) { bottom: 22%; height: 32%; animation: mistA 96s ease-in-out infinite; }
.w-mist b:nth-child(2) { bottom: 8%; height: 42%; animation: mistB 148s ease-in-out infinite; }
.w-mist b:nth-child(3) { bottom: -6%; height: 52%; animation: mistC 210s ease-in-out infinite; }
@keyframes mistA { 0%, 100% { transform: translate3d(-4%, 0, 0); opacity: .8; } 50% { transform: translate3d(5%, -2%, 0); opacity: 1; } }
@keyframes mistB { 0%, 100% { transform: translate3d(3%, 1%, 0); opacity: .7; } 50% { transform: translate3d(-6%, -1%, 0); opacity: .95; } }
@keyframes mistC { 0%, 100% { transform: translate3d(-2%, 0, 0); opacity: .6; } 50% { transform: translate3d(4%, 0, 0); opacity: .85; } }

/* ⑨ 来路。一粒一个月，越近越清楚；经过的关口留一粒微温的火星。
   没有文字，没有节点名——它不解释，只记得。 */
.w-traces { position: absolute; inset: 0; pointer-events: none; }
.w-traces i {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--haze-c, #ccb) 30%, #C9A163);
  box-shadow: 0 0 5px 1px color-mix(in srgb, #E8B878 45%, transparent);
}
.w-traces i.ember {
  width: 3px; height: 3px;
  background: #F0C489;
  box-shadow: 0 0 7px 2px color-mix(in srgb, #F2B268 55%, transparent);
}

/* ⑩ 顶栏那一带压一点点暗：字要在任何一张天光上都读得清。
   夜里压得多，正午几乎不压。 */
.w-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: var(--vig, .3);
  background:
    linear-gradient(180deg,
      rgba(8, 14, 24, .40) 0,
      rgba(8, 14, 24, .13) calc(var(--bar-h, 56px) + 30px),
      transparent calc(var(--bar-h, 56px) + 88px)),
    radial-gradient(124% 86% at 50% 42%, transparent 58%, rgba(10, 16, 26, .16) 100%);
  transition: opacity 1.6s linear;
}

/* ⑪ 雪在最上面。它下在你和山之间。 */
.w-snow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: var(--snow-a, 1);
  transition: opacity 1.2s linear;
}

/* ⑬ 画面的最后一段：落到纸上。
   这一段必须是实心的纸色。半透明的收尾会让世界的下沿比页面浅一档，
   那条线比什么都显眼——它不是设计，是没做完。 */
.w-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper) 0%, transparent) 0%,
    color-mix(in srgb, var(--paper) 38%, transparent) 34%,
    color-mix(in srgb, var(--paper) 76%, transparent) 62%,
    color-mix(in srgb, var(--paper) 95%, transparent) 84%,
    var(--paper) 100%);
}

/* ── 三个方向（原型）────────────────────────────────────
   任务要求先把三条路各做出来看一眼，再造正式的那一条。
   默认（没有 data-proto）就是选定后的正式方案：真实自然 + 空气感。
   data-proto 只用于留下对照，产品里不会出现。 */

/* 方向 B｜电影自然：山谷更深、光更有体积、暗部更沉。
   好看，但压得太重——看久了像海报，不像一个可以待着的地方。 */
.w-cine { display: none; }
.world[data-proto="B"] .w-cine {
  display: block;
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  background:
    radial-gradient(118% 72% at 52% 32%, transparent 28%, rgba(7, 11, 22, .44) 100%),
    linear-gradient(180deg, rgba(10, 14, 26, .34) 0%, transparent 46%);
}
.world[data-proto="B"] .w-clouds { opacity: calc(var(--cloud-a, .1) * var(--vis, 1) * 1.35); }
.world[data-proto="B"] .w-mist { opacity: calc(var(--mist-a, .5) * 1.15); }

/* 方向 C｜克制的数字自然：没有照片，只有几道线。
   它证明了一件事——克制不等于真实。安静是够的，山不在。 */
.w-ridges { display: none; }
.world[data-proto="C"] .w-ridges {
  display: block;
  position: absolute; inset: 0;
  --ridge-c: color-mix(in srgb, var(--sky-mid) 40%, #6C7583);
}
.world[data-proto="C"] .w-ridges svg { display: block; width: 100%; height: 100%; }
.world[data-proto="C"] .w-plate,
.world[data-proto="C"] .w-clouds { display: none; }
.world[data-proto="C"] .w-alpenglow { display: none; }

/* ⑫ 山脚下那一行。整页只有这里在说"此刻"，
   它讲的是天，不是钱——钱在下一张卡里，晚一步出现。 */
.nowline {
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: calc(100% + 2 * var(--pad));
  margin: 0 calc(-1 * var(--pad)) 20px;
  padding: 13px var(--pad) 14px;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  font: inherit; color: var(--ink-2); text-align: left; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.nowline:hover { border-color: color-mix(in srgb, var(--faint) 30%, transparent); }
.nowline .nl-k { font-size: 12px; letter-spacing: .14em; color: var(--faint); }
.nowline .nl-sky { font-size: 14.5px; letter-spacing: .01em; }
.nowline .nl-go {
  margin-left: auto; color: var(--faint); font-size: 15px; line-height: 1;
  transition: transform .22s cubic-bezier(.32,.72,0,1), color .22s var(--ease);
}
.nowline:hover .nl-go { color: var(--muted); transform: translateX(3px); }

/* 「此刻」那张小纸里的两行选择 */
.ms-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ms-row::-webkit-scrollbar { display: none; }
.ms-row > .tiny { flex: 0 0 auto; width: 1.4em; }
.ms-row .seg { flex: 0 0 auto; }
.ms-note {
  margin-top: 18px; font-size: 12.5px; line-height: 1.7;
  color: var(--faint);
}

/* 桌面：山铺开，天让出一部分高度 */
@media (min-width: 900px) {
  .world {
    --plate-top: 0.36;
    --plate-w: 100%;
    height: calc(clamp(440px, 66vh, 760px) + var(--bar-h, 56px));
    /* 桌面上正文是一条 720 宽的栏——那样适合读，不适合看山。
       所以这一屏从栏里走出来，铺满窗口；下面正文该怎么窄还怎么窄。 */
    margin-left: calc(360px - 50vw - var(--pad));
    margin-right: calc(360px - 50vw - var(--pad));
  }
  .w-c1 { animation-duration: 240s; }
  .w-c2 { animation-duration: 380s; }
  .w-c3 { animation-duration: 540s; }
}

/* 横屏手机 / 很矮的窗口：别让山撑破一屏 */
@media (max-height: 560px) and (orientation: landscape) {
  .world { height: calc(78vh + var(--bar-h, 56px)); }
}

/* 关掉动态效果：世界还在，只是不动了。
   云停住、雾停住、雪停在半空——像一张很慢很慢的照片。 */
@media (prefers-reduced-motion: reduce) {
  .w-clouds b, .w-mist b { animation: none !important; }
  .w-sky, .w-plate, .w-celestial, .w-stars, .w-clouds { transition: none; }
}

/* ── 顶栏压在山上时 ─────────────────────────────────────
   首页的顶栏是浮在天上的，不是压在纸上。所以它不能有底色，
   字也不能永远用白的——正午的天是浅蓝的，白字在上面读不清。 */
html.hero-page .topbar { background: none; }
html.hero-page .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(100% + 16px);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--mid) var(--ease);
  mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 16px), transparent);
}
html.hero-page.is-scrolled .topbar::after { opacity: 1; }

html[data-theme].hero-page:not(.is-scrolled) .topbar .brand,
html[data-theme].hero-page:not(.is-scrolled) .topbar .icon-btn {
  color: var(--bar-ink, rgba(255, 255, 255, .95));
  text-shadow: 0 1px 10px var(--bar-halo, rgba(6, 12, 20, .45));
}
html[data-theme].hero-page:not(.is-scrolled) .topbar .icon-btn:hover {
  color: var(--bar-ink, #fff);
}
html[data-theme].hero-page:not(.is-scrolled) .topbar .switch::before {
  background: var(--bar-track, rgba(26, 34, 46, .40));
  box-shadow: inset 0 0 0 1px var(--bar-track-line, rgba(255, 255, 255, .32));
}