/* ---------------------------------------------------------------------------
   Deskmate 落地页。

   配色取自参考图（天蓝 + 奶油白 + 暖橙），然后**锚在 app 自己的颜色上** ——
   小狗的毛是 #F0CFA4、长颈鹿是 #F5DAA3、鼻子是 #6E5548，本来就落在这个区间里。
   不这么锚的话，页面配色和宠物配色是两套，宠物会看着像贴上去的。

   两个字体都是可变字体：**一个文件覆盖整个字重范围**（Google 那个 API 给
   600 和 800 返回的是同一份文件，md5 一样）。所以这里只 @font-face 一次，
   写 `font-weight: 400 800` 那个范围 —— 拆成两条会白下载一遍同一个文件。
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/Baloo2-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/Nunito-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --sky-deep:   #7FBEE4;
  --sky:        #A6D5F0;
  --sky-pale:   #DCEFFB;
  --cream:      #FFF8EC;
  --cream-warm: #FDEFD9;
  --cream-deep: #F6E3C6;
  --ink:        #5B4636;
  --ink-soft:   #8A7563;
  --coral:      #F79E8E;
  --coral-hot:  #FF8A73;
  --mint:       #A8D8C4;

  --shadow-soft: 0 10px 30px rgba(91,70,54,.10);
  --shadow-card: 0 14px 34px rgba(91,70,54,.13);
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;

  /* CJK 走系统字体：Noto Sans SC 那类中文字体动辄几 MB，
     为一个落地页的标题下载不值 —— 系统里那份粗体已经够 */
  --display: 'Baloo 2', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI',
             'Microsoft YaHei', system-ui, sans-serif;
  --body: 'Nunito', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI',
          'Microsoft YaHei', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; }
p { margin: 0; }
a { color: inherit; }

/* ═══════════════════════════════════════════════════════════ nav ═══ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(16px, 4vw, 48px);
  transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
.nav.solid {
  background: rgba(255, 248, 236, .82);
  backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 rgba(91,70,54,.08), 0 8px 24px rgba(91,70,54,.06);
}

.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
}
/* 小小的爪印当 logo mark。**肉垫要小**：第一版那个椭圆是 40%×32%、
   实心到 92%，三个趾头又各占 20% —— 白的加起来盖掉了大半个圆，
   远看是一个白点，读不出是爪子，也读不出是珊瑚色的 */
.nav-mark {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(circle at 29% 30%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 50% 24%, #fff 0 13%, transparent 14%),
    radial-gradient(circle at 71% 30%, #fff 0 13%, transparent 14%),
    radial-gradient(ellipse 26% 20% at 50% 63%, #fff 0 88%, transparent 89%),
    linear-gradient(150deg, var(--coral), #F3B08E);
  box-shadow: 0 3px 8px rgba(240,140,110,.35);
}

.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--coral); }

.nav-right { display: flex; align-items: center; gap: 12px; }

/* 语言开关 */
.lang {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border: 2px solid var(--cream-deep);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--body);
}
.lang-opt {
  position: relative;
  z-index: 1;
  min-width: 34px;
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  transition: color .22s;
}
.lang-thumb {
  position: absolute;
  z-index: 0;
  top: 3px; bottom: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--ink);
  transition: transform .26s cubic-bezier(.34,1.56,.64,1);
}
.lang[data-on="zh"] .lang-thumb { transform: translateX(0); }
.lang[data-on="en"] .lang-thumb { transform: translateX(100%); }
.lang[data-on="zh"] .lang-opt[data-lang="zh"],
.lang[data-on="en"] .lang-opt[data-lang="en"] { color: var(--cream); }

/* ══════════════════════════════════════════════════════════ 按钮 ═══ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, background .2s;
}
.btn-ico { width: 18px; height: 18px; fill: currentColor; flex: none; }
.btn-sm { padding: 7px 16px; font-size: 14px; background: var(--ink); color: var(--cream); }
.btn-sm:hover { transform: translateY(-2px); }
.btn-lg { padding: 13px 26px; font-size: 17px; }
.btn-primary {
  background: var(--coral-hot);
  color: #fff;
  box-shadow: 0 8px 20px rgba(255,138,115,.38), inset 0 -3px 0 rgba(0,0,0,.09);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(255,138,115,.44), inset 0 -3px 0 rgba(0,0,0,.09); }
.btn-ghost {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(91,70,54,.14), inset 0 0 0 2px var(--cream-deep);
}
.btn-ghost:hover { transform: translateY(-3px); }
@keyframes nudge { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) } 75% { transform: translateX(5px) } }
.btn.nudge { animation: nudge .42s ease; }

/* ═════════════════════════════════════════════ 第 0 屏：那块玻璃 ═══ */

.glass-screen {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  touch-action: pan-y;
  cursor: none;
  /* **拖着擦的时候不许选中任何东西。**
     少了这一条，一次擦拭就是一次拖选：光标变成 I 字、划过的地方泛蓝、
     松手还留着一片选中态 —— 这一屏上就算一个字都没有，
     浏览器照样会去选 SVG 里的节点，手感当场就散了。
     `::selection` 那条是双保险：真有东西被选上也看不出来。 */
  user-select: none;
  -webkit-user-select: none;
}
.glass-screen ::selection { background: transparent; }
.glass-scene { position: absolute; inset: 0; }

/* 天空比第二屏更沉一点：这一屏是「窗外」，下一屏才是「亮起来的世界」 */
.sky-glass {
  background:
    radial-gradient(110% 74% at 50% 112%, #FFF3DF 0 22%, rgba(255,243,223,0) 60%),
    linear-gradient(180deg, #6FB5DF 0%, #93CBEC 34%, #C2E4F7 70%, #E4F3FD 100%);
}

/* --- 玻璃后面那个世界 ------------------------------------------------------
   这一屏一开始只有一只狗站在空天上，擦开之后是一片空 —— 擦的动作有了回报，
   但回报本身没什么可看的。所以补齐的是**它住的地方**：地面、屋、信箱、
   一颗球、远处另一只、飞进来的明信片。每一样都是这个 app 里真有的东西，
   不是随便找的装饰。

   分寸只有一条：**别抢那只大的。** 别的全部更小、更淡、更靠边，
   而且都压在地平线附近 —— 视线还是先落在中间那张脸上。 */

.gl-ground {
  position: absolute;
  left: -4%; right: -4%;
  bottom: -8%;
  height: 30%;
  background: linear-gradient(180deg, #FFF3DF 0%, var(--cream) 46%);
  border-radius: 50% 50% 0 0 / 24% 24% 0 0;
  box-shadow: 0 -8px 30px rgba(120,160,190,.12);
}
.gl-grass {
  position: absolute;
  /* 草要和脚站在同一条线上（那只大的是 bottom: 9%），
     压太低就变成「往下看」那行字底下的一条花边 */
  left: 0; right: 0;
  bottom: 9.5%;
  width: 100%; height: 66px;
  opacity: .9;
}
.gl-birds {
  position: absolute;
  left: 8%; top: 13%;
  width: min(300px, 26vw); height: auto;
  animation: bird-drift 26s ease-in-out infinite;
}
@keyframes bird-drift {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(46px,-16px); }
}

.gl-hut {
  position: absolute;
  right: 7%; bottom: 11%;
  width: clamp(96px, 11vw, 158px);
}
.gl-smoke { animation: smoke 4.5s ease-in-out infinite; transform-origin: 72px 16px; }
@keyframes smoke {
  0%,100% { opacity: .8; transform: translateY(0) scale(1); }
  50%     { opacity: .45; transform: translateY(-7px) scale(1.12); }
}

.gl-mail {
  position: absolute;
  right: 21%; bottom: 12%;
  width: clamp(52px, 5.4vw, 78px);
  overflow: visible;
}

.gl-ball {
  position: absolute;
  left: 27%; bottom: 9.5%;
  width: clamp(26px, 2.6vw, 38px);
  animation: ball-bob 3.6s ease-in-out infinite;
}
@keyframes ball-bob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-7px) rotate(12deg); }
}

.gl-card {
  position: absolute;
  right: 5%; top: 21%;
  width: clamp(112px, 12vw, 178px);
  transform: rotate(-8deg);
  animation: card-bob 6.5s ease-in-out infinite;
}

/* 远处那只：小一档、淡一点 —— 这是纵深，不是第二个主角 */
.gl-friend {
  position: absolute;
  left: 9%; bottom: 11%;
  opacity: .92;
}
.gl-friend .pet { width: clamp(96px, 12vw, 176px); height: clamp(96px, 12vw, 176px); }

/* 那一只。**大**是这一屏的主角，所以它按视口算，不走 --pet-scale */
.big-pet {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 2;
}
.big-pet .pet {
  width: min(60vh, 46vw, 560px);
  height: min(60vh, 46vw, 560px);
}
.big-pet .shadow { bottom: -2%; width: 56%; height: 7%; }

/* 擦到它露出来那一下：轻轻弹一下 + 冒一颗心。
   这是这一屏唯一的「奖励」—— 不发勋章，就是它注意到你了 */
@keyframes big-hi {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-16px) scale(1.035); }
  60%  { transform: translateY(0) scale(.99); }
  100% { transform: translateY(0) scale(1); }
}
.glass-screen.revealed .big-pet .pet { animation: big-hi .78s cubic-bezier(.34,1.4,.64,1); }

.big-heart {
  position: absolute;
  left: 62%; top: 6%;
  width: 34px; height: 34px;
  background: var(--coral-hot);
  clip-path: path('M17 31C7.4 23.9 2 19.2 2 13.6 2 9 5.6 5.6 10.1 5.6c2.6 0 5 1.2 6.9 3.2 1.9-2 4.3-3.2 6.9-3.2C28.4 5.6 32 9 32 13.6c0 5.6-5.4 10.3-15 17.4z');
  opacity: 0;
  pointer-events: none;
}
@keyframes heart-pop {
  0%   { opacity: 0; transform: translateY(10px) scale(.4); }
  25%  { opacity: 1; transform: translateY(-6px) scale(1.12); }
  60%  { opacity: 1; transform: translateY(-26px) scale(1); }
  100% { opacity: 0; transform: translateY(-58px) scale(.86); }
}
.glass-screen.revealed .big-heart { animation: heart-pop 1.5s ease-out .16s; }

/* 往下看那一条。**一直在**，不等擦完才出现 ——
   一个还没学会手势的人也得有路往下走 */
.glass-cue {
  bottom: 14px;
  /* .scroll-cue 那条基础规则是 24×38 的一个胶囊。这里三样都要解开 ——
     只解 height 的话，那行字会被挤进 24px 宽的一竖列，一个字一行 */
  width: auto;
  height: auto;
  border: 0;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  bottom: 26px;
}
.glass-cue em {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: rgba(91,70,54,.5);
  transition: color .3s;
}
.glass-cue span {
  position: relative;
  left: auto; top: auto; margin: 0;
  width: 22px; height: 34px;
  border: 2.5px solid rgba(91,70,54,.3);
  border-radius: 999px;
  background: none;
  animation: none;
}
.glass-cue span::after {
  content: '';
  position: absolute;
  left: 50%; top: 6px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: rgba(91,70,54,.45);
  animation: cue 1.7s ease-in-out infinite;
}
.glass-screen.revealed .glass-cue em { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════ hero ═══ */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding-bottom: 10px;
}
.hero-scene { position: absolute; inset: 0; }

.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 108%, #FFF8EC 0 26%, rgba(255,248,236,0) 62%),
    linear-gradient(180deg, var(--sky-deep) 0%, var(--sky) 38%, var(--sky-pale) 72%, #EFF8FE 100%);
}
.clouds { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 飘着的爱心和爪印 */
.confetti { position: absolute; inset: 0; overflow: hidden; }
.cf {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  width: 20px; height: 20px;
  opacity: 0;
  transform: scale(var(--s));
  animation: float-up 13s linear infinite;
  animation-delay: var(--d);
}
.cf-heart {
  background: var(--coral);
  clip-path: path('M10 18C4 13.5 1 10.6 1 7.2 1 4.4 3.2 2.3 6 2.3c1.6 0 3.1.7 4 1.9.9-1.2 2.4-1.9 4-1.9 2.8 0 5 2.1 5 4.9 0 3.4-3 6.3-9 10.8z');
}
.cf-paw {
  background: #fff;
  clip-path: path('M4 8.5a2 2.6 0 1 1 0-.1zM8.6 5.6a2 2.8 0 1 1 0-.1zM13.4 5.6a2 2.8 0 1 1 0-.1zM17.6 8.5a2 2.6 0 1 1 0-.1zM10.8 10c3 0 5 2 5 4.2s-2 3.4-5 3.4-5-1.2-5-3.4S7.8 10 10.8 10z');
}
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(var(--s)) rotate(0deg); }
  8%   { opacity: .85; }
  92%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-105vh) scale(var(--s)) rotate(220deg); }
}

/* --- 文案块 --- */
.hero-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: clamp(84px, 13vh, 150px);
  transform: translateX(-50%);
  width: min(760px, 92vw);
  text-align: center;
  padding: 30px 34px 34px;
}
/* 奶油色的云，压在天空上面当纸 */
.cloud-plate {
  position: absolute;
  z-index: -1;
  inset: -10px -6px -14px;
  background: var(--cream);
  border-radius: 46% 54% 48% 52% / 58% 44% 56% 42%;
  box-shadow: 0 20px 50px rgba(70,110,140,.16);
  opacity: .96;
}
/* 上沿那几个鼓包。**要三个以上、而且大小不一。**
   一边一个、还差不多大的话，那不是一朵云，是一只熊的两只耳朵 ——
   而它偏偏就摆在一个卖桌宠的页面上，很难不被读成一张脸。
   多出来的那几个用 box-shadow 摊（圆形 + spread 就是又一个圆），
   不用再加空 div。 */
.cloud-plate::before,
.cloud-plate::after {
  content: '';
  position: absolute;
  background: var(--cream);
  border-radius: 50%;
}
.cloud-plate::before {
  width: 122px; height: 96px; left: 4%; top: -30px;
  box-shadow:
    118px -22px 0 -6px var(--cream),
    228px -6px  0 -16px var(--cream);
}
.cloud-plate::after {
  width: 150px; height: 116px; right: 6%; top: -40px;
  box-shadow:
    -104px 16px 0 -22px var(--cream),
    -196px -4px 0 -12px var(--cream);
}

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral-hot);
  margin-bottom: 6px;
}
html[data-lang="zh"] .eyebrow { letter-spacing: .04em; text-transform: none; }

.wordmark { position: relative; margin: 0 0 10px; }
/* 参考图那一套：**实心的暖色字 + 一圈厚白描边 + 底下垫两层**。
   第一版这里是 `background-clip: text` 的渐变字 —— 渐变确实在，
   但白描边（paint-order 先画描边）把字芯盖掉了大半，
   剩下能看见的只有 text-shadow 那两层淡蓝，于是整个 Logo 是浅蓝色的。
   一个渐变 + 一圈描边同时要，得叠两层 DOM；而这个 Logo 本来就该是平涂的。 */
.wordmark-text {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(52px, 9.4vw, 108px);
  letter-spacing: -.015em;
  color: #FF8A73;
  -webkit-text-stroke: .105em #FFFFFF;
  paint-order: stroke fill;
  text-shadow:
     0 .055em 0 #FFFFFF,      /* 描边在底下再厚一点，字就「坐」下来了 */
     0 .105em 0 #CFE7F7,      /* 那一层淡蓝 = 立体感的全部来源 */
     0 .16em .28em rgba(60,110,145,.28);
}
.wordmark-zh {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 22px);
  color: var(--ink-soft);
  letter-spacing: .22em;
  margin-top: -2px;
}
html[data-lang="en"] .wordmark-zh { display: none; }

/* 擦到位之后那一下落定 */
@keyframes settle {
  0%   { transform: scale(.94) translateY(6px); }
  55%  { transform: scale(1.035) translateY(-3px); }
  100% { transform: scale(1) translateY(0); }
}
.wordmark.revealed .wordmark-text { animation: settle .62s cubic-bezier(.34,1.4,.64,1) both; }

.tagpill {
  display: inline-block;
  padding: 7px 20px;
  border: 2px dashed var(--cream-deep);
  border-radius: 999px;
  font-size: clamp(13px, 1.5vw, 15px);
  font-weight: 600;
  color: var(--ink-soft);
  background: rgba(255,255,255,.5);
  margin-bottom: 20px;
}

.hero-cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.os-note { margin-top: 13px; font-size: 13px; color: var(--ink-soft); }

/* --- 舞台：地面、宠物、明信片、小屋 --- */
.hero-stage { position: absolute; inset: 0; z-index: 2; }
.ground {
  position: absolute;
  left: -4%; right: -4%;
  bottom: -6%;
  height: 30%;
  background: linear-gradient(180deg, #FFF3DF 0%, var(--cream) 42%);
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
  box-shadow: 0 -8px 30px rgba(120,160,190,.12);
}

.pet-unit { position: absolute; }
.pet-unit.flip { transform: scaleX(-1); }
.pet {
  position: relative;
  width: calc(var(--pet-w, 88px) * var(--pet-scale, 1));
  height: calc(var(--pet-h, 88px) * var(--pet-scale, 1));
}
.pet .body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.pet .body > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pet .shadow {
  position: absolute;
  left: 50%; bottom: -3%;
  width: 62%; height: 9%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(120,150,175,.30) 0%, rgba(120,150,175,0) 70%);
}
/* 呼吸。app 里这条在 pet-gait.css，这儿只要最轻的一档 */
@keyframes breathe { 0%,100% { transform: scaleY(1) } 50% { transform: scaleY(1.014) } }
.pet .body { animation: breathe 3.4s ease-in-out infinite; }

.pet-dog     { left: 15%; bottom: 8%; }
.pet-giraffe { right: 15%; bottom: 8%; }

/* 飘进来的那张明信片 */
.postcard-fly {
  position: absolute;
  right: 6%;
  top: 46%;
  width: clamp(150px, 17vw, 230px);
  transform: rotate(7deg);
  animation: card-in 1.1s cubic-bezier(.2,.9,.3,1) .35s both, card-bob 5.5s ease-in-out 1.6s infinite;
}
.pc-inner {
  position: relative;
  padding: 8px 8px 22px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 16px 34px rgba(70,110,140,.26);
}
.pc-inner img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 2px; }
.pc-stamp {
  position: absolute;
  right: 10px; top: 12px;
  width: 26px; height: 32px;
  background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0/6px 6px, var(--mint);
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,.14);
}
@keyframes card-in {
  from { opacity: 0; transform: translate(120px, -50px) rotate(24deg) scale(.86); }
  to   { opacity: 1; transform: translate(0,0) rotate(7deg) scale(1); }
}
@keyframes card-bob {
  0%,100% { transform: translateY(0) rotate(7deg); }
  50%     { transform: translateY(-11px) rotate(4.6deg); }
}

.hut {
  position: absolute;
  right: 3%;
  bottom: 7%;
  width: clamp(88px, 10vw, 130px);
}

/* --- 玻璃那两层 --- */
.glass-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;   /* 指针事件全归 .glass-screen 收，canvas 只画 */
  transition: opacity .65s ease;
}
#drips { z-index: 11; }
.glass-layer.gone { opacity: 0; }

/* --- 擦拭工具 --- */
.squeegee {
  position: absolute;
  z-index: 20;
  left: 0; top: 0;
  /* 跟着 R 走。手上那块布比擦出来的道还窄的话，一眼就不对 */
  width: 118px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  filter: drop-shadow(0 6px 12px rgba(60,100,130,.3));
}
.squeegee svg { display: block; width: 100%; height: auto; }
.squeegee.on { opacity: 1; }
.squeegee.ghost { opacity: .55; }
.squeegee.press svg { transform: scale(.93); transition: transform .12s; }

/* --- 提示 --- */
.hero-hint {
  position: absolute;
  z-index: 21;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.hero-hint.on { opacity: 1; pointer-events: auto; }
.hint-pill {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(91,70,54,.82);
  color: var(--cream);
  font-size: 13.5px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  animation: hint-bob 2.4s ease-in-out infinite;
}
@keyframes hint-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
.hint-all {
  border: 0;
  background: none;
  font-family: var(--body);
  font-size: 12.5px;
  color: rgba(91,70,54,.62);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hint-all:hover { color: var(--ink); }

.scroll-cue {
  position: absolute;
  z-index: 21;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 2.5px solid rgba(91,70,54,.30);
  border-radius: 999px;
}
.scroll-cue span {
  position: absolute;
  left: 50%; top: 7px;
  width: 4px; height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: rgba(91,70,54,.45);
  animation: cue 1.7s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(13px); opacity: 0 } }

/* ═════════════════════════════════════════════════════════ 通用区块 ═══ */

.sec { padding: clamp(72px, 11vh, 128px) clamp(18px, 5vw, 64px); position: relative; }
.sec-cream { background: var(--cream); }
.sec-warm  { background: var(--cream-warm); }
.sec-sky {
  background: linear-gradient(180deg, #EAF6FE 0%, #DCEFFB 55%, #EAF6FE 100%);
}
.sec-band { background: var(--cream); padding-top: 0; }

.sec-head { max-width: 760px; margin: 0 auto clamp(38px, 6vh, 60px); text-align: center; }
.sec-head-left { margin: 0; text-align: left; }
.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--coral-hot); margin-bottom: 10px;
}
html[data-lang="zh"] .kicker { letter-spacing: .04em; text-transform: none; }
.sec-head h2 { font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; margin-bottom: 14px; }
.lede { font-size: clamp(15px, 1.7vw, 18px); color: var(--ink-soft); }

/* 出现动画：只观察 section，卡片按 --i 错开 */
.sec .card, .sec .pc, .sec .tile, .sec .steps li, .sec .room-shot, .sec .zoo-cell {
  opacity: 0;
  transform: translateY(22px);
}
.sec.in .card, .sec.in .pc, .sec.in .tile, .sec.in .steps li, .sec.in .room-shot, .sec.in .zoo-cell {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.8,.3,1);
  transition-delay: calc(var(--i, 0) * 55ms);
}

/* ══════════════════════════════════════════════════ 行为卡片条 ═══ */

.rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 4px 26px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--cream-deep) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--cream-deep); border-radius: 99px; }
.card {
  flex: 0 0 clamp(230px, 26vw, 285px);
  scroll-snap-align: start;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 24px 22px 26px;
  box-shadow: var(--shadow-soft);
  border: 2px solid rgba(246,227,198,.6);
}
.card:nth-child(1) { --i: 0 } .card:nth-child(2) { --i: 1 }
.card:nth-child(3) { --i: 2 } .card:nth-child(4) { --i: 3 }
.card:nth-child(5) { --i: 4 } .card:nth-child(6) { --i: 5 }
.card:nth-child(7) { --i: 6 } .card:nth-child(8) { --i: 7 }
.card-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 16px;
  margin-bottom: 14px;
  background: var(--sky-pale);
  color: var(--sky-deep);
}
.card:nth-child(3n+2) .card-ico { background: #FFE8DF; color: var(--coral-hot); }
.card:nth-child(3n+3) .card-ico { background: #E3F3EC; color: #5FA98C; }
.card-ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 7px; }
.card p { font-size: 14.2px; color: var(--ink-soft); line-height: 1.6; }

/* ═══════════════════════════════════════════════ 明信片与旅行 ═══ */

.trip {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  max-width: 1060px;
  margin: 0 auto clamp(40px, 6vh, 66px);
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.steps li {
  display: flex;
  gap: 15px;
  background: rgba(255,255,255,.72);
  border-radius: var(--r-md);
  padding: 15px 18px;
  backdrop-filter: blur(4px);
}
.steps li:nth-child(1) { --i: 0 } .steps li:nth-child(2) { --i: 1 }
.steps li:nth-child(3) { --i: 2 } .steps li:nth-child(4) { --i: 3 }
.step-n {
  flex: none;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--coral-hot);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
}
.steps h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 3px; }
.steps p { font-size: 14px; color: var(--ink-soft); }

.mailbox-wrap { text-align: center; }
.mailbox { width: min(190px, 46vw); height: auto; overflow: visible; }
/* 旗子放下来是**贴着箱子躺平**（≈90°），不是斜指着地。
   64° 那一档看着像旗子要掉下来了 */
.mb-flag { transform-origin: 78px 68px; animation: flag-up 4.4s ease-in-out infinite; }
@keyframes flag-up {
  0%, 22%   { transform: rotate(88deg); }
  34%, 82%  { transform: rotate(0deg); }
  100%      { transform: rotate(88deg); }
}
.mb-dot { animation: dot-pulse 1.9s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.mailbox-cap { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }

/* --- 明信片墙 --- */
.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  max-width: 1180px;
  margin: 0 auto;
}
.pc {
  margin: 0;
  transform: rotate(var(--tilt));
  transition: transform .3s cubic-bezier(.2,.9,.3,1), filter .3s;
}
.sec.in .pc { transform: rotate(var(--tilt)); }
.pc:hover { transform: rotate(0deg) translateY(-9px) scale(1.035); z-index: 2; }
.pc-photo {
  position: relative;
  padding: 9px;
  background: #FFFDF8;
  border-radius: 3px;
  box-shadow: 0 12px 26px rgba(60,100,135,.20);
}
/* `height: auto` 不能省。标签上的 `height="800"` 会以「表现性提示」的身份
   变成一条 `height: 800px` —— 而 `aspect-ratio` 只在有一边是 auto 时才算数。
   少了这一行，每张明信片都是一根 800px 高的竖条，图被 cover 裁成一道缝。
   （宽高属性本身要留着：它给浏览器占位，不然整面墙在图到之前会跳一次。） */
.pc-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 1px;
}
/* 相角 */
.corner {
  position: absolute;
  width: 17px; height: 17px;
  background: rgba(120,92,66,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.corner.tl { left: 2px;  top: 2px;    clip-path: polygon(0 0, 100% 0, 0 100%); }
.corner.tr { right: 2px; top: 2px;    clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner.bl { left: 2px;  bottom: 2px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.corner.br { right: 2px; bottom: 2px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.pc figcaption { padding: 9px 4px 0; }
.pc-title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.3;
}
/* 日期在左、地点在右、当中一条点线撑开 —— 抄的是 app 相册那一行图注 */
.pc-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-style: normal;
}
.pc-line i { font-style: normal; }
.pc-line s {
  flex: 1;
  height: 0;
  border-bottom: 1.5px dotted rgba(138,117,99,.5);
  text-decoration: none;
}

.stats {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(24px, 6vw, 74px);
  margin: clamp(40px, 6vh, 62px) 0 0;
  padding: 0;
}
.stats li { text-align: center; }
.stats b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 48px);
  color: var(--sky-deep);
  line-height: 1;
}
.stats span { font-size: 13.5px; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════ 房间 ═══ */

.house-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(28px, 4.5vw, 62px);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.pins { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.pins li {
  position: relative;
  padding-left: 26px;
  font-size: 14.6px;
  color: var(--ink-soft);
}
.pins li::before {
  content: '';
  position: absolute;
  left: 4px; top: 9px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(247,158,142,.22);
}
.fineprint { margin-top: 18px; font-size: 13px; color: var(--ink-soft); opacity: .85; }
.room-shot { margin: 0; }
.room-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  border: 6px solid #fff;
}
.room-shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}

/* ════════════════════════════════════════════════════════ 收集 ═══ */

.earn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto clamp(38px, 5vh, 56px);
}
.tile {
  background: #fff;
  border-radius: var(--r-md);
  padding: 22px 16px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.tile:nth-child(1) { --i: 0 } .tile:nth-child(2) { --i: 1 }
.tile:nth-child(3) { --i: 2 } .tile:nth-child(4) { --i: 3 }
.tile b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  color: var(--coral-hot);
  line-height: 1.1;
}
.tile span { font-size: 13.5px; color: var(--ink-soft); }

.zoo-wrap { max-width: 1000px; margin: 0 auto; text-align: center; }
.zoo-cap { font-size: 15px; color: var(--ink-soft); max-width: 620px; margin: 0 auto 26px; }
/* 十一只是个质数，怎么切都会剩一个孤零零的尾巴。
   所以不用 grid —— flex 换行 + 居中，最后一行短了也是居中的，看着像有意的 */
.zoo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.zoo-cell { flex: 0 0 clamp(88px, 9vw, 118px); }
.zoo-cell {
  display: grid;
  place-items: end center;
  aspect-ratio: 1;
  padding: 10px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: 0 6px 16px rgba(91,70,54,.08);
  transition: transform .25s cubic-bezier(.34,1.5,.64,1), box-shadow .25s;
}
.zoo-cell:nth-child(1){--i:0} .zoo-cell:nth-child(2){--i:1} .zoo-cell:nth-child(3){--i:2}
.zoo-cell:nth-child(4){--i:3} .zoo-cell:nth-child(5){--i:4} .zoo-cell:nth-child(6){--i:5}
.zoo-cell:nth-child(7){--i:6} .zoo-cell:nth-child(8){--i:7} .zoo-cell:nth-child(9){--i:8}
.zoo-cell:nth-child(10){--i:9} .zoo-cell:nth-child(11){--i:10}
.zoo-cell:hover { transform: translateY(-6px); box-shadow: 0 14px 26px rgba(91,70,54,.14); }
.zoo-cell .pet-unit { position: relative; }

/* ═════════════════════════════════════════════════════ 下载带 ═══ */

.band {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  gap: 30px;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 64px) clamp(28px, 5vw, 62px);
  border-radius: clamp(28px, 4vw, 44px);
  background: linear-gradient(140deg, #FFE9D2 0%, #FFF4E3 46%, #E8F4FD 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.band .lede { max-width: 470px; }
.band .hero-cta { justify-content: flex-start; margin-top: 22px; }
.band .os-note { text-align: left; }
.band-pets { position: relative; height: 190px; }
.band-pets .pet-unit { position: absolute; bottom: 0; }
.pet-wave  { left: 8%; }
.pet-wave2 { right: 12%; bottom: 4px; }

/* ═══════════════════════════════════════════════════════ 页脚 ═══ */

.foot {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 54px 24px 46px;
  text-align: center;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.foot-thin { opacity: .72; font-size: 12.5px; max-width: 560px; }

/* ═════════════════════════════════════════════════════ 响应式 ═══ */

@media (max-width: 1000px) {
  .trip, .house-grid, .band { grid-template-columns: 1fr; }
  .band-pets { height: 150px; }
  .band .hero-cta { justify-content: center; }
  .band .os-note, .band-copy { text-align: center; }
  .band .lede { margin: 0 auto; }
  .mailbox-wrap { order: -1; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  /* 第 0 屏：窄屏上这几样会挤到那只大的身上，收掉。
     留的是地面、草、屋 —— 「它住在这儿」那句话还在 */
  .gl-card, .gl-mail, .gl-friend, .gl-birds { display: none; }
  .gl-hut { right: 4%; bottom: 10%; }
  .gl-ball { left: 12%; }
  .big-pet .pet { width: min(46vh, 76vw, 420px); height: min(46vh, 76vw, 420px); }
  .pet-dog     { left: 6%;  bottom: 6%; --pet-scale: 1.5 !important; }
  .pet-giraffe { right: 5%; bottom: 6%; --pet-scale: 1.7 !important; }
  .postcard-fly { display: none; }
  .hut { display: none; }
}
@media (max-width: 720px) {
  .glass-screen { cursor: auto; }
  .squeegee { display: none; }
  .hero-copy { top: 76px; padding: 22px 18px 26px; }
  .wordmark-text { -webkit-text-stroke-width: 6px; }
  .btn-lg { padding: 12px 20px; font-size: 15.5px; }
  .hero-cta { gap: 9px; }
  .wall { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pc:hover { transform: rotate(var(--tilt)); }
  .stats { gap: 22px; }
  .stats b { font-size: 30px; }
}
@media (max-width: 430px) {
  .wall { grid-template-columns: 1fr; }
  .pet-dog     { --pet-scale: 1.2 !important; }
  .pet-giraffe { --pet-scale: 1.35 !important; }
}

/* 用户要求减少动效：把所有会自己动的东西停掉。
   雾那一层由 fog.js 自己散开（一个必须拖着擦才看得到内容的首屏，
   在这种设置下就是一堵墙）*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .sec .card, .sec .pc, .sec .tile, .sec .steps li, .sec .room-shot, .sec .zoo-cell {
    opacity: 1; transform: none;
  }
}