feat(首页头图): 羊水囊不再动，改成囊里的宝宝自己动（吸手指、蹬腿） (v26093006)

- 去掉整层浮动和整图「胎动」扭动（用户：球不要动，要里面的宝宝动）。
- 母婴作图的 25w.mp4 取前 10s，只截囊内 600×600，正放 + 倒放拼成 20s 无缝循环，
  400×400 / 288KB（assets/video/b6476cfce328.mp4），遮罩只露囊内，叠在静态囊图上。
- 静态囊图换成视频第 1 帧（70812d56ec5f.jpg），视频淡入时画面对得上；放不了就停在静态图。
- 微信 iOS 等 WeixinJSBridgeReady 再 play()；页面隐藏时暂停；减少动态效果下不放。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

index.html

@@ -7,7 +7,7 @@
 <meta name="mobile-web-app-capable" content="yes">
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>兜爸心选 · 孕育陪伴</title>
-<!-- V:26093005 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26093006 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
 <link rel="stylesheet" href="mama-box.css">
 <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 <!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->
@@ -60,10 +60,14 @@
       <div class="home-hero">
         <div class="petals" id="petals"></div>
         <!-- 2026-09-30：宝宝不再是右上角一张圆形 PNG，孕 25 周图。拆成两层：
-             散景光点底子是 .home-hero 的背景（不动），羊水囊 + 宝宝是这里单独一张图，
+             散景光点底子是 .home-hero 的背景（不动），羊水囊 + 宝宝是这里单独一层：
-             才能让宝宝自己「时不时动一下」（胎动），嘴边气泡挂在同一层里跟着动。 -->
+             静态图 .hero-sac 垫底（= 视频第 1 帧），上面叠一段只截了囊内的循环短视频 .hero-kid，
+             宝宝自己吸手指、蹬腿，囊本身不动。视频放不起来（微信拦自动播放等）就停在静态图上。 -->
         <div class="hero-baby" aria-hidden="true">
-          <img class="hero-sac" src="assets/img/bc6367fcad38.jpg" alt="">
+          <img class="hero-sac" src="assets/img/70812d56ec5f.jpg" alt="">
+          <video class="hero-kid" id="heroKid" src="assets/video/b6476cfce328.mp4"
+                 muted autoplay loop playsinline webkit-playsinline x5-playsinline
+                 preload="auto" disablepictureinpicture></video>
           <span class="hb-bub b1"></span><span class="hb-bub b2"></span><span class="hb-bub b3"></span>
         </div>
         <!-- 右上角原来有个消息圆钮，点开只弹「暂无新消息」——一个永远没有内容的入口，

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26093005';
+  var VER = '26093006';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -3445,6 +3445,26 @@
     if (document.visibilityState !== 'hidden') resetScreenOnShow();
   });
 
+  /* 首页头图里会动的宝宝（2026-09-30）。视频是装饰：静音、循环、放不了就停在底下的静态图上。
+     ⚠️ 微信 iOS 的 web-view 不认 autoplay 属性，要等 WeixinJSBridgeReady 再手动 play()；
+        页面切走时暂停，切回来再放，省电也省流量。「减少动态效果」下 CSS 直接隐藏，这里也不放。 */
+  (function heroKid() {
+    var v = document.getElementById('heroKid');
+    if (!v) return;
+    var reduce = false;
+    try { reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
+    if (reduce) { try { v.removeAttribute('autoplay'); v.pause(); } catch (e) {} return; }
+    v.muted = true;
+    function play() { try { var p = v.play(); if (p && p.catch) p.catch(function () {}); } catch (e) {} }
+    v.addEventListener('playing', function () { v.classList.add('is-on'); });
+    document.addEventListener('WeixinJSBridgeReady', play, false);
+    if (window.WeixinJSBridge) play();
+    document.addEventListener('visibilitychange', function () {
+      if (document.visibilityState === 'hidden') { try { v.pause(); } catch (e) {} } else play();
+    });
+    play();
+  })();
+
   if (document.readyState === 'complete') init();
   else window.addEventListener('load', init);
 })();

mama-box.css

@@ -192,7 +192,7 @@ a.skip:focus{left:16px;top:16px}
    ⚠️ 上面这些是**设计稿**的数，不是现在的实现值。设计稿里没有 slogan，
       加进去之后品牌字以下整列都下移了，实际纵向排布以 .home-hero 里那笔账为准。 */
 /* 2026-09-30 背景换成孕 25 周图（底子 assets/img/7dfe5be4e828.jpg，1560×750 = 3 倍图 520×250；
-   羊水囊 + 宝宝单独一层 bc6367fcad38.jpg，见 .hero-baby）：
+   羊水囊 + 宝宝单独一层 70812d56ec5f.jpg + 视频 b6476cfce328.mp4，见 .hero-baby）：
    只抠了原图里的羊水囊 + 宝宝（孕肚太写实，用户要求去掉），缩到原来约 8 成放在右侧，
    底子是按原图色调重铺的紫玫瑰渐变 + 囊后一圈暖光晕 + 散景光点。
    图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #5c344e（=图左缘色）。
@@ -297,33 +297,30 @@ a.skip:focus{left:16px;top:16px}
    底子背景图右对齐、高 = 橙区高 H；这张囊图是从同一张 1560×750 合成图里原样切出来的
    (x 940..1560, y 50..710)，所以按 H 换算摆回原位就严丝合缝：
      宽 620/750 = .8267H，高 660/750 = .88H，顶 50/750 = .0667H，右 0。
-   方图四角带着底色，用径向渐变遮罩把边缘羽化掉 —— 这样宝宝动起来，边上不会露出方块。
+   方图四角带着底色，用径向渐变遮罩把边缘羽化掉。
-   动效分两层，transform 才不会互相覆盖：
+   2026-09-30 用户要求：「球」（羊水囊）不动，只让里面的宝宝自己动（吸手指、蹬腿）。
-     外壳 .hero-baby  慢慢上下浮（6s，像漂在羊水里）
+   所以去掉了整层浮动和整图扭动，改成：
-     图片 .hero-sac   「胎动」：大部分时间静止，每 7.3s 里突然小幅扭一下、再轻轻蹬一下，
+     .hero-sac  静态图垫底 = 母婴作图给的 25w.mp4 第 1 帧（囊内 600×600 摆在容器 (10,30)）
-                      周期和外壳的 6s 错开，叠起来就不像在同一个节拍上重复。 */
+     .hero-kid  同一块 600×600 截成的短视频：原片前 10s 正放 + 倒放 = 20s 无缝循环
+                （原片镜头在慢慢推近、结尾姿势和开头对不上，直接 loop 会跳；倒放回来首尾就是同一帧）。
+                只露囊内（遮罩 86%→98%），囊壁用底下静态图的，镜头推近时囊壁不会跟着胀。
+                放起来之前 opacity:0，JS 收到 playing 再淡入 —— 放不了就一直是静态图，不会出现黑框/播放按钮。 */
 .hero-baby{position:absolute;z-index:2;right:0;
   top:calc((250px + env(safe-area-inset-top)) * .0667);
   width:calc((250px + env(safe-area-inset-top)) * .8267);
   height:calc((250px + env(safe-area-inset-top)) * .88);
-  pointer-events:none;user-select:none;animation:float 6s ease-in-out infinite}
+  pointer-events:none;user-select:none}
-.hero-sac{display:block;width:100%;height:100%;transform-origin:52% 55%;
+.hero-sac{display:block;width:100%;height:100%;
   -webkit-mask-image:radial-gradient(closest-side,#000 91%,transparent 100%);
-          mask-image:radial-gradient(closest-side,#000 91%,transparent 100%);
+          mask-image:radial-gradient(closest-side,#000 91%,transparent 100%)}
-  animation:kick 7.3s ease-in-out infinite}
+.hero-kid{position:absolute;left:1.613%;top:4.545%;width:96.774%;height:90.909%;
-@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
+  object-fit:cover;background:transparent;opacity:0;transition:opacity .8s ease;
-@keyframes kick{
+  -webkit-mask-image:radial-gradient(closest-side,#000 86%,transparent 98%);
-  0%,52%,100%{transform:none}
+          mask-image:radial-gradient(closest-side,#000 86%,transparent 98%)}
-  56%{transform:rotate(-2.6deg) translate(-2px,1px) scale(1.012)}
+.hero-kid.is-on{opacity:1}
-  61%{transform:rotate(1.4deg) translate(1px,-1px)}
+/* 嘴边的小气泡。起点定在视频里嘴（拳头）大致的位置（50%/47%），往左上飘 ——
-  66%{transform:none}
+   宝宝头朝右上侧躺，左上正好是「水面」方向。z-index 压在视频上面。 */
-  80%{transform:none}
+.hb-bub{position:absolute;z-index:1;left:50%;top:47%;width:7px;height:7px;border-radius:50%;
-  83%{transform:rotate(-1.2deg) translate(-1px,0)}
-  87%{transform:none}
-}
-/* 嘴边的小气泡。起点定在囊图里嘴（拳头）的位置（50.6%/48.2%），往左上飘 ——
-   宝宝头朝右上侧躺，左上正好是「水面」方向。 */
-.hb-bub{position:absolute;left:50.6%;top:48.2%;width:7px;height:7px;border-radius:50%;
   background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
   opacity:0;animation:bub 4.2s ease-in-out infinite}
 @keyframes bub{
@@ -333,11 +330,11 @@ a.skip:focus{left:16px;top:16px}
   100%{transform:translate(-16px,-46px) scale(1.15);opacity:0}
 }
 /* 三颗错开大小、时长和出发点，才不像在同一个节拍上打点 */
-.hb-bub.b2{left:47.8%;top:50%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
+.hb-bub.b2{left:47.2%;top:48.8%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
-.hb-bub.b3{left:52.4%;top:46.8%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
+.hb-bub.b3{left:51.8%;top:45.6%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
 /* 系统开了「减少动态效果」就全部停下：这类装饰性循环动画是前庭不适的常见诱因 */
 @media (prefers-reduced-motion:reduce){
-  .hero-baby,.hero-sac{animation:none}
+  .hero-kid{display:none}
   .hb-bub{animation:none;opacity:0}
 }