/* Keep the original three-panel clipping and full-screen expansion. */
[data-tilt="home / journey / arrival card / tilt surface"] {
  position: relative;
}

/* ══ 相遇横幅的「实心衬底」（2026-10-31 补原设计退场用）══════════════════════════
   原设计 floorboards 卡的退场是 `opacity 3.367→3.433` **加 `scale 100→80`**，
   观感是"卡片往后退一步、让出四周"，靠的是它本身是**不透明矩形照片**。
   我们的相遇横幅是撕纸水彩（RGBA，边缘 2.89% 面积是羽化 alpha），
   10-30 试过长溶解 ⇒ 羽化边把下面的三块面板透出来，成了"patchy"。

   解法不是去掉溶解，是给撕纸**垫一层同形状的实心纸底**：
   `meeting-art-solid.webp` 是原图 alpha≥64 的剪影、填撕纸自身的纸色
   （rgb 252,247,238，取自原图 alpha>250 的中性亮像素中位数）。
   它盖住 98.08% 的可见面积，且**不比原图多出一像素**（逐像素比对过）——
   所以撕纸轮廓一点没变，只是羽化边下面不再透层。
   6.2 KB：整张是纯色，WebP 压到极低。

   ⚠️ 两层必须**完全同框**（同 left/top/宽，高按同比例 auto），
      并且**吃同一组 opacity / scale 轨道**（`… / meeting-art / backing`，
      在 triptych 脚本里由同一份关键帧复制）—— 否则缩放时两层会错位。
   ⚠️ 层级：backing 是 absolute，会画在 static 的 img 之上 ⇒ img 必须
      `position:relative; z-index:1`，backing 用 `z-index:0`。 */
.ws-meeting-backing {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  max-width: none;
  z-index: 0;
  pointer-events: none;
}

.ws-meeting-art {
  position: relative;
  z-index: 1;
}

/* ══ 第三块窗口的「初始态」兜底（2026-10-31）════════════════════════════════════
   这一层 `0` 是 138.9% 卡宽、上下各外扩 51.9% / 82% 的大盒子（要够大才能张成满屏），
   它靠**引擎每帧写内联 clip-path** 才呈现"第三块那个小窗口"。
   引擎一旦缺席（时间轴数据没到、脚本报错、首帧未就绪），这层就没有 clip ⇒
   整块山景水彩直接铺满右半屏，与相遇横幅、三块面板三层同叠 ——
   一次实测里最刺眼的那一块就是它。

   下面这条就是原设计 clip 轨道的**起点值**（16/25.4 → 37.7/64.5）。
   为什么可以写死在这里：引擎写的是**内联** style，优先级高于这条样式表规则，
   所以引擎正常时它一点作用都没有；引擎缺席时它兜住"一整块裸图"这个最坏形态。
   ⚠️ 若将来改原设计起点，两处必须一起改（`_handoff_guard.mjs` 会读这里的数值自检）。 */
[data-tl="home / journey / arrival card / 0"] {
  clip-path: polygon(16% 25.4%, 37.7% 26.8%, 37.7% 64.5%, 16.1% 64.4%);
}

/* The old vehicle and its passengers remain in the DOM for timeline continuity. */
[data-tl="home / journey / arrival card / 0 / truck, side, right"] {
  display: none !important;
}

/* ── farmer card 换成 Wild Signal 的雨中分岔（2026-10-21）─────────────────────
   底图已由 farm-farmer（门内农夫背影，纯场景）换成
   rainy-alluvial-fork-rear-view-v1（雨中冲积扇分岔），而新图**自带雪豹与
   长臂猿的背影**。原设计前景那层「pig + dog, backlit」是独立的透明叠图，
   若不关掉，画面上会同时出现四个动物。
   它的 scale 140→100 / position.y 40→0 两条轨道仍由时间线照常写入，
   只是不再渲染 —— 与上面 truck 的处理一致，不影响任何 tween。 */
[data-tl="home / journey / farmer card / pig + dog, backlit"] {
  display: none !important;
}

/* ── 展开后必须真正铺满画框（2026-10-20 二次修正）────────────────────────────
   原设计的这张底图是 2149×1205，而展开框稳定是「1.11 × 视口宽」（1732 视口下
   1925×1077）。原设计靠 img 的天然尺寸 + max-width:100% 恰好盖住；先前换上去的
   v3 只有 1672×941 ⇒ 视口宽超过约 1505px 时图不再长大，右边与下边各露一段底。
   那段底又被 journey 段的 backdrop-filter: saturate(0) 抽成灰带，看上去就像
   「还没全屏就切下一幕」。
   2026-10-21 v4 已换成 2200×1238（原设计同级余量），但这条规则仍然保留 ——
   它让覆盖关系与素材尺寸、视口宽度彻底无关，以后再换图也不会复发。 */
[data-tl="home / journey / arrival card / 0 / farm, dawn"] {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.ws-journey-travellers {
  --tw-translate-x: 0px;
  --tw-translate-y: 0px;
  --tw-rotate: 0deg;
  --tw-skew-x: 0deg;
  --tw-skew-y: 0deg;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  position: absolute;
  z-index: 5;
  left: 0;
  bottom: 0;
  width: 35%;
  height: auto;
  max-width: none;
  pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 5px 5px rgb(31 36 25 / 18%));
}

@media (max-width: 700px) {
  .ws-journey-travellers { width: 48%; }
  /* Keep the waypoint dots usable; the previous chapter label crosses the path. */
  body.ws-journey-expanded [data-wp-i="0"] > div:first-child {
    opacity: 0 !important;
    pointer-events: none;
  }
}

/* ============================================================================
   10-21 · separation 段两张卡换成水彩插画（插画稿 inkwash v5）
   ----------------------------------------------------------------------------
   原设计这两张卡的容器是超宽银幕：take pig card = 3.0097:1、dog copium card = 3.1183:1，
   而新图是 16:9 的整幅插画（透明底）。用 cover 会按 41% 裁掉上下 —— 图2 的雪豹
   会变成半身；所以统一走 contain，让整幅画完整落在纸色卡面上。
   几何（aspect / w-80% / clip 动画 / tilt）一律不动，只换内容与取景方式。
   ========================================================================= */

/* 纸色（#fffbf3）已直接合成进图片本身 —— 卡片不再设背景色，
   否则 clip 遮罩未揭开的区域会变成白块（实测 p=7.5 整片白）。 */

/* 两张主图：撑满卡框 + contain（保留 alpha，不裁切） */
[data-tl="home / separation / take pig card / -1 / farm, foggy"],
[data-tl="home / separation / dog copium card / -1 / farm, road"] {
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

/* 被替换掉的旧图层：猪、左右猿臂、跑动的狗尾、狗背影、对话气泡 */
[data-tl="home / separation / take pig card / 0 / pig, squirm"],
[data-tl="home / separation / take pig card / -1 / arm, left"],
[data-tl="home / separation / take pig card / 1 / arm, right"],
[data-tl="home / separation / take pig card / -1 / dog, tail, running"],
[data-tl="home / separation / dog copium card / 0 / dog, back"],
[data-tl="home / separation / dog copium card / 1 / speech bubble"] {
  display: none !important;
}

/* 卡框比例改成 16:9（图片同比例 ⇒ cover 刚好铺满、不裁切）。
   必须用自定义 CSS 覆盖：原设计 Tailwind 是预编译产物，写新的
   `aspect-[1.7777777777777777]` 类在 CSS 里不存在，会静默塌成内容高度（实测 34px）。 */
[data-tl="home / separation / take pig card / ^"],
[data-tl="home / separation / dog copium card / ^"] {
  aspect-ratio: 16 / 9 !important;
}

/* ============================================================================
   10-21 · zoom out card 改与素材同比例
   ----------------------------------------------------------------------------
   卡片原为 3.0097:1。铺满视口高度时（970px），3:1 的宽度必然是 2919，
   超出视口 1.685 倍 ⇒ 只能看到中间 59.3% 宽；再叠加 inside 的 scale 120%，
   实际只剩图片中间 **50% 宽 × 59.3% 高** 的一块。
   猪场是走廊透视，裁得动；河谷风景（涵洞在 x<17%、远山在 y<20%）裁完只剩草地。
   素材 2912×1632 = 1.7843，与视口 1732×970 = 1.7856 几乎一致 ⇒ 改成同比例。
   ⚠️ 卡片根节点没有 data-tl，必须靠 .ws-zoom-card 这个 class 命中。
   ========================================================================= */
.ws-zoom-card {
  aspect-ratio: 2912 / 1632 !important;
}

/* ============================================================================
   10-21 · household 三张 Danny 卡换成「长臂猿 + 雪豹」水彩序列
   ----------------------------------------------------------------------------
   原设计每卡是三层：背景房（object-cover 矩形照片）＋ 透明角色 ＋ 白色气泡。
   新素材是「背景 + 角色」一体的水彩撕边插画（RGBA，1855×848 = 2.1875:1），
   所以：背景槽换成新图，角色层隐藏，气泡暂留（它是交互层，只有 position.y 落位轨道）。

   🔴 卡片比例必须跟着改：
      卡片根原为 aspect-[2.40478652404]，新图 2.1875 更「高」。
      若沿用 2.4048，object-cover 会左右各裁 4.52% ——
      而三张图的墨迹都铺到 x 0.1%–99.9%（雪豹尾巴、长臂猿都在边上），会切到主体。
      改成 2.1875 后 cover 刚好铺满、零裁切；卡片高 503 → 522（+19px），视觉几乎无感。
   ⚠️ 卡片根带 data-tl（`… / ^`），可以直接用属性选择器命中，不需要额外 class。
   ========================================================================= */

[data-tl="home / household / dog catch card / ^"],
[data-tl="home / household / dog petted card / ^"],
[data-tl="home / household / dog bath card / ^"] {
  aspect-ratio: 1855 / 848 !important;
  /* ══ 10-30 · 去掉不透明底色（需求：「这三种图都还带有矩形的灰背景，请把这里的矩形背景去掉」）
     ----------------------------------------------------------------------------
     10-21 这里垫过 #B7B7B7 + paper-block-183.avif，目的是让"依次升起"的新卡压住旧卡
     （原设计三卡是不透明矩形照片，天然遮挡）。但那块纸纹是 1024² 裁块，
     background-size:cover 拉到 721×330 后纹理被放大一倍，与页面纸差 3~5 级，
     矩形边界肉眼可辨 —— 三张卡都露边（p=13.5 / 15 实测），伪装失败。

     现在**完全透明**：画的透明区直接透出页面纸底，矩形边界消失。
     代价是两卡交叠的过渡帧（p≈14.0、p≈15.0）会看到两幅水彩的撕边互相交叠。
     为什么可以接受：水彩主体 alpha≥250（实测占 66–80%），重叠处是新画实打实盖住旧画，
     只有"画外的透明缝隙"才透出旧画 ⇒ 观感是两张手绘稿叠放，不是穿透穿帮。
     ⚠️ 别再往回垫任何不透明底：要遮挡就改 opacity 轨道，不要用色块冒充页面纸。 */
}

/* 旧角色层：新图已经包含角色，留着会「新画上盖一只旧狗」 */
[data-tl="home / household / dog catch card / -1 / dog, catch"],
[data-tl="home / household / dog petted card / -1 / dog, petted"],
[data-tl="home / household / dog bath card / -1 / dog, bath"],
[data-tl="home / household / dog petted card / 0 / hand, right"] {
  display: none !important;
}

/* 🔴 用 contain 而不是继承的 cover。
   实测卡片实际高度 = aspect 计算值 + 约 28px（1141×550 = 2.075，
   而 aspect 是 2.1875 ⇒ 1141/2.1875 = 521.6）。cover 会左右各切 2.6%，
   把水彩的撕边硬切成直角（p=14.1 左下角岩石被切是这么来的）。
   contain 让整幅画完整落进卡片，多出的 28px 由 #B7B7B7 底色填 —— 与页面同色，看不出。 */
[data-tl="home / household / dog catch card / -1 / house, porch"],
[data-tl="home / household / dog petted card / -1 / house, bedroom"],
[data-tl="home / household / dog bath card / -1 / house, bathroom"] {
  object-fit: contain !important;
}

/* ══ 工厂段：取消 cover 放大（2026-10-21 17:5x）═══════════════════════════════
   症状：谷仓夜景换上去之后观感比原设计更糊。
   根因不是编码，是**取景几何**。原设计给这张图的类：
       h-lv-[max(100vh,calc(100vw/var(--aspect)))]
       w-lv-[max(100vw,calc(100vh*var(--aspect)))]
   素材是 1859×846（2.1974:1），视口是 16:9（1.7778:1）—— 图比视口更宽，
   于是 max() 取到 100vh*2.1974 = 2373px，图片被撑成 2343×1125 的 CSS 盒
   （tilt 后实测），素材只有 1859 ⇒ **CSS 上采 1.26×，视网膜 2.52×**。
   这就是"换了图还是糊"的来源，与 AVIF 质量无关。

   修法：内容按**视口宽度 1:1 铺开**（1920/1859 = 1.03×，几乎无上采），
   多出来的上下 103px 交给 barn-night-canvas.avif 补 —— 它不是"另一张模糊图"，
   是从**本图自己的顶部 26 行 / 底部 40 行**纵向拉伸出来的延展带，
   所以接缝处色差 < 2/255（实测 16.5→15.5 / 69.1→72.0），看不出来。
   画布内容区占比 874/1080 = 80.9%，与主图按同一比例缩放 ⇒ 任何视口都对齐。

   ⚠️ 只在 ≥1024px 生效。移动端 390×844 下 cover 只需 1854.6 宽，
   素材 1859 本来就是 0.998×（不糊），且改成宽度铺满会把图压成 177px 高，
   上下补 333px，反而更糟 —— 移动端保持原设计原样。 */
@media (min-width: 1024px) {
  [data-ws-factory-solo] {
    isolation: isolate;
  }

  /* 延展画布：铺满视口，藏在主图下面 */
  [data-ws-factory-solo]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../img/barn-night-canvas.avif) center / 100% 100% no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  /* 主图抬到画布之上（track 原本是 static，会画在定位元素下面） */
  [data-ws-factory-solo] > [data-car-track] {
    position: relative;
    z-index: 1;
  }

  /* 宽度 1:1。min/max/aspect 必须一并重置 ——
     原设计的 min-w-full / min-h-full 是相对父级 w-max 的循环依赖，
     留着会把盒子重新撑回 cover 尺寸。 */
  img[data-ws-barn] {
    width: 100vw !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    aspect-ratio: auto !important;
  }
}

/* ============================================================================
   meal 段第三张卡（结局位）· 段高与卡片错位
   ----------------------------------------------------------------------------
   🔴 为什么不是 `h-lv-[500vh]` / `mt-lv-[45vh]`：
      原设计的 Tailwind 是**预编译产物**，`h-lv-[Nvh]` 只生成了用到的档位
      （350/550/750/180/240/100…）。写一个没被生成的任意值类，浏览器不会报错，
      它只是**静默失效** —— 段高退回 auto（= 子元素之和），
      于是第三张卡没有任何 pin 时间，整段少 1620px，后面全部提前。
      所以这里用两个具名类，写法与产物里的 `.h-lv-\[350vh\]`{height:350vh;height:350lvh}
      完全等价（双写：vh 兜底 + lvh 覆盖）。
   ========================================================================= */
.ws-meal-three {
  height: 500vh;
  height: 500lvh;
}

/* 45lvh 是「第二张卡与第三张卡的错位量」，不是随手留白：
   有了它，第三张卡到达视口顶端的时刻正好落在 p≈20.85，
   与原设计字幕的收尾（opacity 20.800→20.833 归零）对齐 ——
   结局卡满屏的那一刻，字幕刚好消失，中间不留"文案与画面对不上"的空档。
   没有它 → 第三张卡 0.45 个单位提前，字幕会压在结局画面上。 */
.ws-meal-card-3 {
  margin-top: 45vh;
  margin-top: 45lvh;
}

/* ============================================================================
   meal 段第三张卡（结局位）· 已换真图
   ----------------------------------------------------------------------------
   2026-10-22：结局插画（雪豹 + 长臂猿在谷仓里，农夫与小女孩推门进来）已到位，
   原来的虚线占位块 `.ws-ending-slot` 整个删掉，换成原设计结构的 <img>
   （`data-tl="home / meal / ending card / -1 / farm, house"`，路径早已在
   timeline.json 里登记，时间轴**一行没改**）。

   白纸边（这版是邮票式锯齿边）沿用卡 2 的做法染成页面底色：
   `内部校验 --mode ring`。
   ⚠️ 不能用 `--mode all`：雪豹的胸腹毛、门口的天光都是近白，
   全图阈值 + 膨胀会把它们一起吃掉（卡 2 的云已经踩过这个坑）。
   ========================================================================= */

/* ============================================================================
   meal 卡 2 · 卡片比例必须跟素材一致，否则 object-cover 会**切掉上下撕边**
   ----------------------------------------------------------------------------
   为什么改：素材（需求的水彩）是 1920×779 = 2.4647，原设计这张卡的类
   `aspect-[2.88135488521]` 是照着原设计那张 2100×730 = 2.8767 的图定的。
   比例不匹配 + `object-cover` ⇒ 浏览器按宽度铺满，**上下各切掉 45 CSS px
   （≈56 自然像素）**，正好把撕纸边切光，留下两条笔直的硬切边。

   所以这里把卡 2 的比例改成素材自身的比例（3072 / 1246 = 2.46549），裁切量 = 0。
   副作用（是好事）：卡 2 由 1536×533.08 变成 1536×623，与卡 1 / 卡 3 的
   622.02 **几乎完全同高**，「三拍」尺寸终于一致了。
   段高 / 时间轴 / sticky 全都不受影响 —— 卡片是 flex 居中的，只改自身高度。

   ⚠️ 用 !important 覆盖：原设计 Tailwind 是**预编译产物**，新写任意值类
   `aspect-[...]` 不会生成规则（静默失效）；且属性选择器与类选择器同权重。

   卡 3（结局）的素材与卡 2 同规格（1920×779 → 2x 3072×1246），所以共用同一个
   比例令牌，两张新卡因此**逐像素同高**（1536×622.99），卡 1 仍是 622.02。
   ========================================================================= */
[data-tl="home / meal / pig meal card / ^"],
[data-tl="home / meal / ending card / ^"] {
  aspect-ratio: 3072 / 1246 !important;
}

/* ============================================================================
   10-30 · 对话气泡的文字：英文的字号与行高不能直接搬到中文
   ----------------------------------------------------------------------------
   现象：household 三张卡里的气泡，两行中文几乎叠在一起、单行中文顶到气泡内缘。

   量出来的原因（1440×900 实测，窄气泡 268×177、宽气泡 364×241）：
     · 字号 43.2px —— 来自原设计的 `text-[clamp(1.5rem,3vw,3rem)]`，是给
       Gurajada 的拉丁字母定的：同为 43.2px，原设计大写高只有 29.3px，
       而汉字墨迹高约 0.87em ≈ 37.6px。
     · 行高 34.56px = 0.8em（body 的 line-height:0.8 继承下来，原设计没在
       气泡上重设）—— 拉丁字母在 0.8 行高下不会撞，汉字 37.6px 的墨迹
       塞进 34.56px 的行距里必然叠：实测两行 top 相差 34.56、行盒高 85，
       竖向重叠 8.6px。这就是「快要重叠」的直接来源。
     · 内边距是固定 32px（--padding）；气泡被 min-w 压到 150px 宽时只剩
       86px 可用宽，中文 5 字必然撑满。

   改法（只动字号 / 行高 / 内边距 / 字体，气泡图形与位置一律不动）：
     · 字号上限 34px = 与原设计大写高 29.3px 等效的汉字尺寸（29.3 / 0.87）。
       下限 15px 给 390 宽（此时气泡被 min-w-[150px] 锁住，不再随视口缩）。
       中间按 2.36vw 线性跟随 —— 气泡宽度本身就是视口的 18.67%
       （66.67% 卡宽 × 28%），所以跟着 vw 走等于跟着气泡走。
     · 行高 1.35 ⇒ 34 × 1.35 = 45.9px，两行共 91.8px，占气泡高 50%，
       上下各留 45px 的呼吸位，且不会碰到气泡上下的尖角。
     · 内边距按气泡宽度的百分比给（横向 11%），窄屏 min-w 生效时自动收窄。
     · 字体显式给中文黑体栈：气泡原本继承 Gurajada，汉字走系统兜底字体，
       跨平台不一致（原设计没有中文，这条没有可继承的答案）。

   ⚠️ 覆盖优先级：`[data-tl$="speech bubble"] > div:last-child` = (0,1,1)，
   高于 Tailwind 的 `text-[clamp(...)]` / `p-[--padding]`（0,1,0），
   且本文件在 page.css 之后加载 —— 两个条件都成立，所以不用 !important。
   任何一条不成立，字号会被 utilities 抢回去（见 内部校验）。
   ========================================================================= */
[data-tl$="speech bubble"] > div:last-child {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: clamp(15px, 2.36vw, 34px);
  line-height: 1.35;
  padding: 8% 11%;
}

/* ============================================================================
   10-31 · 结尾那两张纸片（守护 / 继续消失）的两行文字：行距太挤
   ----------------------------------------------------------------------------
   现象（实测）：纸上「守护 / 他们的家」「任家园 / 继续消失」两行几乎贴在一起。

   量出来的原因（1440×900，用真实滚轮滚到底再实测，`内部校验`）：
     · 字号 16px（`.text-md`），行高 16px = 1.0（`.leading-[1]`，原设计给拉丁定的）。
     · 汉字墨迹约 0.88em ≈ 14px，两行基线只差 15.3–16px ⇒ **墨迹之间只剩 2–4px**，
       旋转 −2.52° 之后行剖面直接连成一条带（实测 32px 高，中间没有空档可量）。
     · 原设计没有中文，这条没有可继承的答案 —— 和气泡是同一类问题（见上文 10-30 那段）。

   改法：只动行高，字号/位置/纸片/插画一律不动。
     · 行高 1.0 → **1.3**（20.8px）：两行墨迹之间约 6–7px，读得出是两句、又不散。
       再大（1.4 = 8px）就开始像两段独立文案，纸片上的小字撑不住。

   ⚠️ 为什么不用改类名：`leading-[1.3]` 在 page.css 里**不存在**（原设计是预编译的
   Tailwind，任意值只生成了用到的那些），把 class 改成 `leading-[1.3]` 等于没改。
   所以给四个文案层加语义类 `ws-paper-label`，规则写在本文件：
   `div.ws-paper-label` = (0,1,1) > `.leading-[1]` = (0,1,0)，且本文件在 page.css 后加载。
   校验：`内部校验`（四档视口，含「两行不变成三行」与 docH 不变）。
   ========================================================================= */
div.ws-paper-label {
  line-height: 1.3;
}