/* 遇见远方 · 官网
   手机优先。整站只有一个固定背景（天空），内容分幕叠在上面。
   动效一律走 transform / opacity，避免移动端重排重绘。 */

:root {
  --ink:        #1F2937;
  --ink-2:      #55627A;
  --ink-inv:    #F4F7FB;
  --ink-inv-2:  #B9C6D8;
  --primary:    #5B9BD5;
  --accent:     #FF8C42;
  --sand:       #F7EBD6;

  --w:     min(100% - 44px, 560px);
  --sans:  -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
           "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "STSong", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: #16233F;
  overflow-x: hidden;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ── 天空 ─────────────────────────────────────────
   .sky__strip 高 600vh，装着一整天的光。JS 只改它的 translateY。 */
.sky { position: fixed; inset: 0; overflow: hidden; z-index: -2; }
.sky__strip {
  position: absolute; left: 0; right: 0; top: 0;
  height: 600vh;
  will-change: transform;
  /* 真正的色标由 JS 按各幕位置生成；这里只留一个 JS 没跑起来时的兜底。 */
  background-image: linear-gradient(180deg, #16233F 0%, #8FBEE8 46%, #101A30 100%);
}

/* 星空：破晓与入夜两头出现，白天透明。JS 只改 opacity。 */
.stars {
  position: fixed; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
  background-repeat: repeat;
  background-size: 260px 260px;
  background-image:
    radial-gradient(1.4px 1.4px at 30px 42px,  rgba(255,255,255,.9), transparent),
    radial-gradient(1px   1px   at 138px 18px, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 200px 96px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px   1px   at 76px 150px, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 232px 200px,rgba(255,255,255,.85),transparent),
    radial-gradient(1px   1px   at 12px 214px, rgba(255,255,255,.5), transparent);
}

/* ── 顶栏 ── */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 18px 10px;
  transition: background-color .3s var(--ease), backdrop-filter .3s var(--ease);
}
.topbar.is-solid {
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 rgba(31,41,55,.06);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.brand img { border-radius: 8px; }
.topbar.is-solid .brand { color: var(--ink); text-shadow: none; }
.topbar__cta {
  font-size: 13px; padding: 6px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55); color: #fff;
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.topbar.is-solid .topbar__cta { opacity: 1; pointer-events: auto; border-color: var(--primary); color: var(--primary); }

/* ── 首屏 ── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: max(96px, calc(env(safe-area-inset-top) + 84px));
}
.hero__copy { position: relative; z-index: 3; width: var(--w); margin: 0 auto; text-align: center; color: #fff; }
.eyebrow {
  margin: 0 0 14px; font-size: 13px; letter-spacing: .38em; text-indent: .38em;
  color: rgba(255,255,255,.82); text-shadow: 0 1px 10px rgba(10,20,40,.5);
}
.hero h1 {
  margin: 0; font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 8.4vw, 44px); line-height: 1.42; letter-spacing: .02em;
  text-shadow: 0 2px 22px rgba(10,20,40,.45);
}
.lede {
  margin: 22px auto 0; max-width: 22em; font-size: 14.5px; line-height: 2.05;
  color: rgba(255,255,255,.9); text-shadow: 0 1px 12px rgba(10,20,40,.5);
}
/* 提示落在浅色的路上，白字会糊 —— 这里用墨色。 */
.hero__hint {
  position: absolute; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: .16em; text-indent: .16em; color: rgba(58,72,96,.72);
  animation: floaty 2.6s var(--ease) infinite;
}
.hero__hint i { width: 1px; height: 26px; background: linear-gradient(180deg, rgba(58,72,96,.5), transparent); }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 底部淡出：不加的话首屏和下一幕之间会切出一条硬边（路和丘陵被齐齐裁断）。 */
.hero__scene {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
.hero__range {
  position: absolute; left: 50%; bottom: 30%; width: 190%; max-width: none;
  transform: translateX(-50%); opacity: .5; filter: saturate(.6);
}
.hero__path { position: absolute; left: 0; bottom: 0; width: 100%; height: 46%; opacity: .95; }

/* 远近三层丘陵：纯 CSS，跟 App 里的程序化地形同源。
   用过一版真实地形照片，压到低透明度只剩一团泥 —— 干净的色块反而更像那个世界。 */
.hill { position: absolute; left: -30%; width: 160%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill--3 { bottom: 24%; height: 26%; background: #9FB6A6; opacity: .55; }
.hill--2 { bottom: 14%; height: 26%; background: #86A68F; opacity: .72; }
.hill--1 { bottom: 0;   height: 24%; background: #6E9179; }
/* 旷野一幕的丘陵要退到远处，别跟前景草地抢 */
.scene--world .hill--3 { bottom: 46%; height: 20%; opacity: .38; }
.scene--world .hill--2 { bottom: 40%; height: 22%; opacity: .5; }

/* ── 小人：圆头 + 圆角身子，跟 App 里同一种画法 ── */
.fig {
  position: absolute; z-index: 2;
  width: calc(26px * var(--s, 1)); height: calc(34px * var(--s, 1));
  background: var(--c, #4A7FBF);
  border-radius: calc(7px * var(--s, 1)) calc(7px * var(--s, 1)) calc(3px * var(--s, 1)) calc(3px * var(--s, 1));
}
.fig::before {
  content: ""; position: absolute; left: 50%; top: calc(-13px * var(--s, 1));
  width: calc(17px * var(--s, 1)); height: calc(17px * var(--s, 1));
  transform: translateX(-50%);
  background: #C7A182; border-radius: 50%;
}
.fig--ghost { opacity: .34; }
/* 首屏的人往路上站，别压住底部那行「往下滑」 */
.fig--hero { left: 50%; bottom: 21%; --s: .62; margin-left: calc(-13px * .62); }

/* ── 转场文字 ── */
.turn { width: var(--w); margin: 0 auto; padding: 17svh 0 20svh; text-align: center; }
.turn__big {
  margin: 0 0 30px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(21px, 5.6vw, 28px); line-height: 1.9; color: #26313F;
}
.turn__small { margin: 0 auto 16px; max-width: 24em; font-size: 15px; color: #35404F; }

/* ── 幕 ── */
.scene { position: relative; padding: 8svh 0 12svh; }

/* 上下两头淡出，让每一幕化在天空里 —— 不加就是四个硬邦邦的矩形贴在页面上。 */
.stage {
  position: relative; height: 56svh; min-height: 300px; max-height: 460px;
  overflow: hidden; margin-bottom: 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 89%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 89%, transparent 100%);
}
.stage__range {
  position: absolute; left: 50%; bottom: 46%; width: 190%; max-width: none;
  transform: translateX(-50%); opacity: .3; filter: saturate(.35);
}
.ground { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; }
.ground--grass {
  background: linear-gradient(180deg, #9FC095 0%, #8AB281 36%, #7BA675 100%);
  border-radius: 46% 54% 0 0 / 14% 14% 0 0;
}
.prop { position: absolute; max-width: none; }
.tree { bottom: auto; }
.tree--a { left: 6%;  bottom: 44%; width: 15%; }
.tree--b { left: 68%; bottom: 50%; width: 12%; opacity: .9; }
.tree--c { left: 88%; bottom: 30%; width: 19%; }

/* 远处的一点篝火 */
.emberdot {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #FFB25E; box-shadow: 0 0 14px 5px rgba(255,160,70,.55);
  animation: ember 2.4s ease-in-out infinite;
}
@keyframes ember { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }

/* 心岛。海要从半空开始，不能顶满 —— 顶满就没有海平线，整片蓝会被读成天。
   沙洲也要比海窄一截，不然沙把海全盖住，「岛」就没了。 */
.sea {
  position: absolute; left: 0; right: 0; bottom: 0; top: 24%;
  background: linear-gradient(180deg, #6BB3D4 0%, #7FC0DC 22%, #5FAACD 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.ground--sand {
  left: 4%; right: 4%; height: 50%;
  background: linear-gradient(180deg, #F3E3C2 0%, #EBD6AE 44%, #E2C89C 100%);
  border-radius: 50% 50% 0 0 / 34% 34% 0 0;
}

/* 无尽旅程 */
.scene--journey .stage { background: linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.14) 100%); }
.peak {
  position: absolute; left: 46%; bottom: 40%; width: 44%; max-width: 260px;
  transform: translateX(-50%); opacity: .5; filter: saturate(.5) blur(.4px);
}
.hillside { position: absolute; left: 4%; bottom: 38%; width: 34%; opacity: .34; filter: saturate(.45); }
.ground--road { height: 48%; background: linear-gradient(180deg, #B7C7A6 0%, #9FB491 46%, #8CA582 100%); }
.road {
  position: absolute; left: 50%; bottom: 0; width: 78%; height: 100%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(240,228,200,.35) 0%, var(--sand) 42%, #F1E2C6 100%);
  clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
}

/* 篝火营地 */
.scene--camp .stage { max-height: 420px; }
.treeline {
  position: absolute; left: -4%; right: -4%; bottom: 36%; height: 44%;
  display: flex; align-items: flex-end; justify-content: space-between;
}
/* 按高度而不是宽度排，几棵树的原图高矮不一，按宽度排会有一棵顶穿画面。 */
.treeline img { height: 88%; width: auto; max-width: none; filter: brightness(.3) saturate(.35); }
.treeline img:nth-child(even) { height: 66%; }
.treeline img:nth-child(3n) { height: 100%; }
.ground--night { height: 42%; background: linear-gradient(180deg, #2A3550 0%, #1D2740 100%); border-radius: 42% 58% 0 0 / 12% 12% 0 0; }
.firelight {
  position: absolute; left: 50%; bottom: 4%; width: 88%; height: 150%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 78%, rgba(255,168,84,.42) 0%, rgba(255,150,70,.14) 42%, transparent 70%);
  animation: ember 3.4s ease-in-out infinite;
}
.scene--camp .fig::before { background: #A98368; }

/* ── 幕文案 ── */
.scene__copy { width: var(--w); margin: 0 auto; }
.label { margin: 0 0 10px; font-size: 12px; letter-spacing: .3em; text-indent: .3em; color: var(--ink-2); opacity: .8; }
.scene__copy h2 {
  margin: 0 0 16px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(26px, 7vw, 34px); line-height: 1.4;
}
.scene__copy p:not(.label) { margin: 0; font-size: 15px; color: #2F3C52; }
.scene__copy h2 { color: #1B2635; }
.scene__copy--dark, .scene__copy--dark h2 { color: var(--ink-inv); }
.scene__copy--dark .label { color: var(--ink-inv-2); }
.scene__copy--dark p:not(.label) { color: var(--ink-inv-2); }

/* ── 三件事 ── */
.promise { width: var(--w); margin: 0 auto; padding: 12svh 0 14svh; }
.promise h2 {
  margin: 0 0 40px; text-align: center; font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 6.4vw, 30px); color: var(--ink-inv);
}
.promise ol { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.promise li { position: relative; padding: 0 0 30px 42px; counter-increment: p; }
.promise li::before {
  content: counter(p); position: absolute; left: 0; top: 3px;
  width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: #A9CDEC; border: 1px solid rgba(169,205,236,.42);
}
.promise h3 { margin: 0 0 7px; font-size: 17px; font-weight: 600; color: var(--ink-inv); }
.promise p { margin: 0; font-size: 14.5px; color: var(--ink-inv-2); }

/* ── 下载 ── */
.get { padding: 4svh 0 12svh; }
.get__inner {
  width: var(--w); margin: 0 auto; text-align: center;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 24px;
  padding: 34px 22px 30px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.get__icon { margin: 0 auto 18px; width: 84px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.get h2 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 25px; color: #fff; }
.get__sub { margin: 0 0 26px; font-size: 14px; color: rgba(238,244,252,.82); }

.btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 15px 22px; border-radius: 16px; border: 0;
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: scale(.975); }
.btn--primary { background: linear-gradient(135deg, #6BA8DE, #4A89C4); color: #fff; box-shadow: 0 10px 26px rgba(45,90,150,.4); }
.btn__meta { font-size: 11.5px; font-weight: 400; opacity: .82; letter-spacing: .02em; }

.ios { margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.11); }
.ios__title { margin: 0 0 5px; font-size: 15px; font-weight: 600; color: var(--ink-inv); }
.ios__note  { margin: 0 0 14px; font-size: 13px; color: var(--ink-inv-2); }
.ios__form { display: flex; gap: 8px; }
.ios__form input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.09);
  color: #fff; font-family: inherit; font-size: 14px;
}
.ios__form input::placeholder { color: rgba(255,255,255,.4); }
.ios__form input:focus { outline: none; border-color: rgba(255,255,255,.42); }
.ios__form button {
  padding: 11px 17px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.9); color: #23324C;
  font-family: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ios__msg { min-height: 1.4em; margin: 10px 0 0; font-size: 12.5px; color: #A9CDEC; }
.ios__alt { margin: 8px 0 0; font-size: 12.5px; }
.ios__alt a { color: rgba(200,214,232,.6); text-decoration: underline; text-underline-offset: 3px; }

/* ── 页脚 ── */
.foot {
  padding: 34px 22px calc(96px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12px; line-height: 2; color: rgba(200,214,232,.5);
}
.foot__links { margin: 0 0 12px; }
.foot__links a { color: rgba(200,214,232,.78); }
.foot__links i { margin: 0 9px; font-style: normal; opacity: .4; }
.foot__legal { margin: 0 0 8px; }
.foot__legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ── 常驻下载条 ── */
.dock {
  position: fixed; z-index: 45;
  left: 50%; bottom: calc(13px + env(safe-area-inset-bottom));
  transform: translate(-50%, 130%);
  padding: 11px 26px; border-radius: 999px;
  background: linear-gradient(135deg, #6BA8DE, #4A89C4); color: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(20,28,48,.34);
  transition: transform .42s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}
.dock.is-on { transform: translate(-50%, 0); opacity: 1; }
.dock.is-off { transform: translate(-50%, 130%); opacity: 0; }

/* ── 微信引导层 ── */
.wxmask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(7,11,20,.96);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; flex-direction: column; align-items: flex-end;
  padding: max(16px, env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
  color: #fff; text-align: right;
}
.wxmask[hidden] { display: none; }
.wxmask__arrow { width: 74px; height: 100px; margin: 0 6px 18px 0; color: rgba(255,255,255,.72); }
.wxmask__title { margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.7; }
.wxmask__note  { margin: 0; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,.7); }
.wxmask__close {
  align-self: center; margin-top: auto;
  padding: 12px 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: none; color: #fff;
  font-family: inherit; font-size: 15px;
}

/* ── 入场 ── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero__hint, .emberdot, .firelight { animation: none; }
}

/* ── 大屏：内容居中收窄，天空照常 ── */
@media (min-width: 720px) {
  :root { --w: min(100% - 96px, 620px); }
  .stage { max-height: 520px; }
  .hero h1 { font-size: 52px; }
  .lede { font-size: 16px; }
  /* 路是竖构图画的，宽屏上拉满会拉成一个花瓶 —— 钉住宽度，两边留给旷野。 */
  .hero__path { left: 50%; width: 560px; transform: translateX(-50%); }
  .dock { display: none; }
}