/* ============================================================
   MEET NESTIE — 小鸟先出场，然后每往下滑一段就出一个词，
   同时这个词的两张卡从小鸟身上飞出来、亮一下再暗回背景。
   五个词出完全部转清晰，再往下滑是冲向镜头的飞越，交给下面的
   Family Hub。整段站在页面的地上（--page-bg），不自带底 —— 见
   .meet__stage 上的注释。

   🔴 卡片几何、漂移参数、飞越的变换与缓动是从豆包官网 about_page
   的 bundle 里扒出来的原值（见 meet.js 顶部）。基准画布 1440×810，
   --meet-cover 负责铺满视口 —— 和 .hero 一样是 sticky 舞台，不是
   transform 包裹层，所以 Lenis 和 IntersectionObserver 都还读得到
   真实滚动位置。

   🔴 段高由 meet.js 按时间轴算出来写进 --meet-h，别在这里写死：
   改 WORD_SPAN 而忘了改高度，最后一个词就会被挤出 sticky 区间。
   ============================================================ */

.meet {
  position: relative;
  height: var(--meet-h, 564svh);
  --meet-cover: 1;
}

.meet__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* 🔴 站在页面的地上，不自带底。这里曾经有两层：这块 --nes-cream，
   加上一层 .meet__bg（暖黄中心光晕 + 天蓝外圈的三段径向渐变，由
   meet.js 驱动透明度/漂移旋转/飞越模糊）。两层一起去掉了，理由是
   styles.css 的 one-ground 规则——整站只有一块地（--page-bg =
   --nes-sand），只有 privacy 段是有意的深色例外；这一段自己铺一层
   蓝黄渐变，等于在 hero 和 hub 之间插了第三块地，滑过去两道接缝。

   卡片本来就是白底 + 深阴影、词是 ink→#8d867a 的渐变字，都不靠那层
   底衬托，去掉后对比度不受影响（实测见本次改动）。 */
.meet__stage {
  position: relative;
  height: 100svh;
  background: var(--page-bg);
}

.meet__scene {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1440px;
  height: 810px;
  transform: translate(-50%, -50%) scale(var(--meet-cover));
}

.meet__cards {
  position: relative;
  width: 1440px;
  height: 810px;
  overflow: visible;
}

/* ---------- 卡片 ---------- */
.meet__card {
  position: absolute;
  transform-style: preserve-3d;
  opacity: 0;
}

.meet__rot {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .4s ease;
}

.meet__hover:hover { transform: var(--rot) scale(1.16); }


.meet__card .meet__face {
  width: 100%;
  height: 100%;
}

.meet__card img.meet__face {
  object-fit: cover;
  border-radius: 44px;
  box-shadow: 0 42px 90px rgba(26, 26, 26, .22);
}

/* 🔴 用 HTML 画的卡（Nestie 那句话 / 便签 / 任务清单）内容按 3~4 倍放大画，
   因为外层 scale3d 会把整张卡缩到 15%~55%。直接按成品尺寸写字号，
   缩完就只剩几个像素高。 */
.meet__ch {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 44px;
  box-shadow: 0 42px 90px rgba(26, 26, 26, .18);
  overflow: hidden;
}

.meet__ch--wide {
  flex-direction: row;
  align-items: center;
  gap: 40px;
  padding: 0 72px;
  border-radius: 120px;
}
.meet__ch-avatar {
  flex: none;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--nes-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.meet__ch-avatar svg { width: 80px; height: 80px; }
.meet__ch--wide p {
  margin: 0;
  font-size: 62px;
  line-height: 1.34;
  font-weight: 500;
  letter-spacing: -.01em;
}
.meet__ch--wide b { color: var(--nes-blue-3); font-weight: 600; }

.meet__ch--note { padding: 52px 48px; gap: 26px; }
.meet__ch-tag {
  align-self: flex-start;
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 34px;
  font-weight: 600;
}
.meet__ch-tag--blue  { background: var(--nes-sky); color: var(--nes-blue-3); }
.meet__ch-tag--amber { background: #fdf0d0; color: #9a6a06; }
.meet__ch--note h4 {
  margin: 0;
  font-size: 50px;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -.01em;
}
.meet__ch--note p {
  margin: 0;
  font-size: 38px;
  line-height: 1.4;
  color: var(--nes-muted);
}

.meet__ch--task { padding: 46px 36px; gap: 30px; }
.meet__ch--task h4 { margin: 0; font-size: 44px; font-weight: 600; letter-spacing: -.01em; }
.meet__ch-row {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 30px;
  white-space: nowrap;
  color: var(--nes-muted);
}
.meet__ch-tick {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid var(--nes-tan);
}
.meet__ch-row.is-done .meet__ch-tick { background: var(--nes-blue); border-color: var(--nes-blue); }
.meet__ch-row.is-done span { text-decoration: line-through; color: var(--nes-tan); }

/* ---------- hero 末屏那支片子 → 小鸟的头（页面级接力层） ----------
   🔴 fixed，且挂在 body 上，不在任何一个段落里——两个舞台都
   overflow:hidden（.hero__stage / .meet__sticky），装进去就飞不出来。
   位置/尺寸/圆角全部由 meet.js 每帧写，这里只定死"它是什么"。

   🔴 圆角由 JS 写成百分比而不是 px：JS 同时在改 width/height，px 圆角在
   缩到小鸟大小时会变成一个几乎方的小块；百分比跟着盒子走，3.3%（对齐
   hero 的 border-radius: 24px / 720）一路补间到 50% 就是正圆。

   z-index 40：要盖住 meet 的舞台（它是不透明的），又要让 .site-header
   （52）压在它上面。 */
.film-relay {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 40;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, height, border-radius, opacity;
}
.film-relay__v {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Nestie 本体 ---------- */
/* 🔴 405 = 画布正中。开场这一拍只有小鸟和它的气泡，所以它站正中（豆包
   about 页同款构图）；五个词是它退场之后的事，两者不同框，不会打架。
   接力那支片子也落在这个点上（meet.js 的 BIRD）。 */
.meet__bird {
  position: absolute;
  left: 720px;              /* 要和 meet.js 里的 BIRD 常量一致 */
  top: 405px;               /* 改这里必须同步改 meet.js 的 BIRD.y */
  width: 158px;
  height: 158px;
  margin: -79px 0 0 -79px;
  opacity: 0;
}
.meet__bird-c { width: 100%; height: 100%; display: block; }

/* 每个词一只鸟，五张叠在同一个位置上交叉淡化——谁亮由 meet.js 按词的进度写。
   🔴 contain 不是 cover：这几张不是头像，是"小鸟在做那件事"的全身图，带着
   纸、铅笔、日历这些道具，比例也各不相同（1.000 / 1.041 / 0.994…）。cover
   会把道具裁掉，而道具正是这五张之间唯一的区别。
   🔴 定位盒沿用 .meet__bird 的 158 见方，所以这五张和 Rive 那只共用同一个
   落点——换鸟不会挪位置。

   🔴 --bs 是**每张自己的**放大倍数，由 meet.js 逐张写，值是量出来的（见
   BIRD_PICS 的注释）。目标只有一个：让六张 PNG 和 Rive 那只的**头**一样大。

   走过一版统一的 scale(1.25)，那是错的。当时的推理是"补 SINK 那一下 0.74
   的收缩"，方向就不对——Rive 和 PNG 在同一个容器里，SINK 缩的是容器，两边
   一起缩，根本不需要补。真正对不上的是**头在各自图里的占比**：

     Rive 那只            头占容器 67.2%
     六张 PNG             头占长边 62.2% ~ 65.3%

   差这 5% 就够看见了：换鸟时两只同一张脸、不同大小叠着淡入淡出，读起来
   就是一层幻影（用户 2026-08-29："它们是一样的图片，只是一个静态一个动态
   ……把它们量的一模一样大，就不会让我看到这个幻影"）。1.25 反而把差距从
   5% 拉到 16%，幻影更明显。

   ⚠️ 换任何一张鸟图都要重量 --bs，别沿用旧值——道具画多画少会改变头的占比。 */
.meet__bird-p {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--bs, 1.07));
  opacity: 0;
  pointer-events: none;
}

/* ---------- 小鸟的气泡 ----------
   🔴 整句用 logo 的脸（Baloo Chettan 2）。字距 -.01em 抄 device.css 的
   .dv__hero-name——全站标题那套 -.03em 会把 Baloo 收成一个商标。字号 27 不
   再大：Baloo 的 cap height 占比大，同号数下比 Google Sans 明显更粗更满。
   只有 "Nestie" 是品牌蓝（.meet__brand），其余留墨色——名字才是要被记住的
   那个词，整句都蓝就没有重音了。蓝字白底 3.11:1，正文尺寸不合规，但这里是
   27px Baloo 600，属 WCAG large text（≥18.66px bold），门槛 3:1，过。
   **别照抄到小字上。**

   🔴 圆角 18。走过 999（整颗胶囊，读成一枚标签）→ 30（还是偏圆）→ 18。

   🔴 顶在小鸟头上、水平居中于它，translateX(-50%) 从中心往两边长，文案变长
   仍然对称。top 242。

   🔴 尾巴是**两颗圆**，不是一颗也不是尖角（对照豆包 about 页）：
     ::before 22px 往上压进气泡 10px —— 和气泡**融成一体**，只在下沿留一段弧，
              这就是"另一个气泡融在对话框里"的那颗；
     ::after  11px 再往下，是脱开的那颗小的。
   两颗都往**右**偏，且大的在小的**外侧**（中线 +42 / +29.5，用户 2026-08-28
   定；试过大的在内侧被否）。正下方对齐会读成"一个居中的装饰点"。

   🔴 位移由 meet.js 每帧写（进场的 10px 上浮 + SINK 时跟小鸟一起上飞 156），
   这里只定死静态形态。 */
.meet__bubble {
  position: absolute;
  left: 720px;
  top: 242px;
  transform: translateX(-50%);
  margin: 0;
  padding: 16px 32px;
  border-radius: 18px;
  background: var(--nes-white);
  box-shadow: 0 10px 26px rgba(26, 26, 26, .07);
  font-family: "Baloo Chettan 2", var(--font--primary);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--nes-ink);
  opacity: 0;
  will-change: opacity, transform;
}

/* 只给名字上色；字体不写在这里，整句已经是 Baloo 了 */
.meet__brand { color: var(--nes-blue); }

.meet__bubble::before,
.meet__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: 50%;
  background: var(--nes-white);
}
.meet__bubble::before { width: 22px; height: 22px; margin-left: 31px; bottom: -10px; }
.meet__bubble::after  { width: 11px; height: 11px; margin-left: 24px; bottom: -26px; }

/* ---------- 中间文案 ---------- */
/* 🔴 顶对齐，因为小鸟站在这叠词的**上面**（用户 2026-08-28）。词是往下加的，
   顶对齐让这叠的顶恒定，小鸟的落点也就恒定；反过来底对齐会让整叠随词数往上
   顶，把小鸟一路挤走。（上一版小鸟在底下，那时用的正是底对齐，同一个理由的
   镜像——谁在下面就锚哪一边。）

   🔴 这里的排布**不能按盒子算**，按盒子算两次都会偏（用户 2026-08-28：
   「字离鸟头那么远干嘛？偏离画面中心太多」）。两个盒子都比看得见的东西大：

     · 小鸟盒 158，但落位时 meet.js 给它 scale(0.74) —— **看得见的只有 117**，
       上下各多出 20 的空气。
     · 词块盒 272.5，但 47px 字配 1.16 行高，首行上方与末行下方各有约 8 的
       行距 —— **看得见的字形只有 256.5**。

   所以按盒子配的「空当 40」实际看着像 61，收到 14 也还有 42。下面这组数
   直接按**看得见的高度**配：117 + 空当 14 + 256.5 = 387.5。

   🔴 但整组不是钉在几何正中，是钉在 **365**（画布高的 45%），比正中 405
   高 40（用户 2026-08-28：「整体上移一点」）。几何居中和看着居中不是一回事
   ——一块字压在正中会显得往下坠，视觉重心本来就该略高于几何中心，45% 是
   排版上惯用的那一档。40 是从 405 到 365 的差，改画布高度时按比例走，别当常量。

     小鸟看得见 171..288（中心 229.75，故 meet.js 的落位位移 = 229.75-405 ≈ -175）
     空当 288..302
     字形 302..558.5，倒推词块盒顶 = 302 - 8 = 294

   改字号 / 行高 / 词数 / 落位缩放之后，这五个数全要按上面的方式重算一遍：
   先算三段**看得见**的高度，加起来，居中到 365，再倒推盒子的位置。 */
.meet__copy {
  position: absolute;
  left: 50%;
  top: 294px;
  bottom: auto;
  width: 760px;
  margin-left: -380px;
  text-align: center;
  will-change: filter, opacity, transform;
}

.meet__verbs { display: flex; flex-direction: column; align-items: center; }

.meet__verb {
  display: block;
  opacity: 0;
  font-size: 47px;
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -.025em;
  /* 呼应豆包那四行标题图的「白→灰」渐变，这里换成 ink→muted */
  background: linear-gradient(96deg, var(--nes-ink) 0%, var(--nes-ink) 42%, #8d867a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* （这里曾有 .meet__verb i —— 每个词尾一个蓝色句点。用户 2026-08-28 要求去掉，
   句点连同规则一起删了，不是改成透明：留着一个不上色的 <i> 只会让下一个人
   以为它还有用。词尾现在什么都不加，和豆包那一页一致。） */

/* ---------- 减弱动效 ----------
   🔴 段高塌回一屏，JS 直接画成品状态：词都在、卡都清晰、不漂移。
   不是「隐藏这一段」—— 内容本身是有意义的，只是不再用滚动去演它。 */
@media (prefers-reduced-motion: reduce) {
  .meet { height: 100svh; }
  .meet__rot { transition: none; }
}

/* ---------- 只在这一段活着时才付合成的钱 ----------
   🔴 will-change 原来是写死在各个规则里的，等于让合成器为 11 张卡 + 场景 +
   文案 + 小鸟**长期**各留一层——这一页有 46 屏，读者在别处时这些层还占着
   显存和合成预算。meet.js 的 IntersectionObserver 进出视野时挂/摘 .is-live，
   动的时候才提升，不动就交还。 */
.meet.is-live .meet__cards          { will-change: transform, filter; }
.meet.is-live .meet__card           { will-change: opacity, filter, transform; }
.meet.is-live .meet__card .meet__face { will-change: transform, opacity; }
.meet.is-live .meet__bird           { will-change: transform, opacity, filter; }
.meet.is-live .meet__copy           { will-change: filter, opacity, transform; }
.meet.is-live .meet__verb           { will-change: opacity, transform; }

/* ============================================================
   仅手机（≤767）：这一段在窄屏上整体太小、而且卡片圈是横躺的
   ============================================================
   🔴 为什么手机上一切都小：--meet-cover 在窄屏走的是 `fit` 那一支
   （resize() 里 `Math.max(innerWidth/800, 0.42)`），390 宽的屏上只有
   0.4875。画布里写 47px 的词，屏上就只有 22.9px；158 见方的小鸟盒，
   过了 SINK 还要再乘 0.74，屏上只剩 57px。桌面端 fit 远大于 cover，
   下面这些都不生效。

   🔴 所以这里放大的是**画布里的数**，不是屏上的数——写 68px 是为了
   68 × 0.4875 ≈ 33px 落到屏上。改 fit 那个 800 会一起改动画的取景，
   不要拿它当放大手段。 */
@media (max-width: 767px) {
  /* 22.9 → 33.2 屏上 px。最长的 Coordinates 在画布里约 411px 宽，
     加上 --dx 最大 72，合计 483 × 0.4875 = 235 屏上 px，390 的屏放得下。 */
  .meet__verb { font-size: 68px; }

  /* 57 → 83 屏上 px。改的是盒子而不是 transform：JS 每帧往
     .meet__bird 的 style.transform 写位移和缩放，写在 CSS 里会被覆盖。
     margin 必须跟着走一半，否则中心离开 (720,405)，和 meet.js 的 BIRD
     常量对不上。 */
  .meet__bird { width: 230px; height: 230px; margin: -115px 0 0 -115px; }
}