feat(首页头图): 宝宝按孕周 9 阶段换形态、孕囊随之缩放；花瓣换成阳光水波 (v26100407)

- 背景换成去掉羊水囊的空背景，羊水囊+宝宝整幅按阶段换（4/8/11/14/18/24/28/32/36 周）
- 每阶段一张本地程序化形变 GIF（呼吸、轻浮、小手、蹬脚；脸不动，闭眼闭嘴）+ 同帧静图打底
- 孕囊直径按阶段 .42～1.03 倍，围绕原圆心缩放
- 去掉花瓣飘落；新增 #heroFx 画布：斜照光束 + 水波焦散，离开首页/不可见时停画
- 逻辑独立在 js/hero-fx.js，调试 ?kidweek=N

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:26100406 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100407 缓存版本标记：改 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,14 +60,16 @@
 
 <section class="screen is-active" id="screen-home" data-screen="home">
       <div class="home-hero">
-        <div class="petals" id="petals"></div>
-        <!-- 2026-09-30：头图背景 = 孕 25 周动图（母婴作图 v7）的静帧，这里只叠一张截了羊水囊的同源 GIF .hero-kid：
-             镜头固定、同一帧起步，所以和背景严丝合缝；宝宝侧身闭眼睡、小手在嘴边自己动，囊和脐带不动。
-             GIF 没加载出来就停在背景那一帧。（v6 起嘴边的小气泡去掉了，v7 没加回来。）
-             2026-10-01 换 v8：静帧不变，动作加大——整体轻摇±1.8°+微浮、呼吸、点头、小手、每周期蹬一下脚，4 秒一圈。 -->
-        <div class="hero-baby" aria-hidden="true">
-          <img class="hero-kid" id="heroKid" src="assets/img/250bb167b0f1.gif" alt="" decoding="async">
+        <!-- 2026-10-04 头图改版（用户：宝宝按孕周换形态、孕囊跟着宝宝大小变、去掉飘落的花瓣、加阳光和水波纹）：
+             背景换成「去掉羊水囊的空背景」，羊水囊 + 宝宝整体都在 .hero-baby 里，按孕周 9 个阶段换图（js/hero-fx.js）。
+             每阶段一张会动的 GIF（本地程序化形变：呼吸、轻浮、小手、蹬脚；脸不动，所以永远闭眼闭嘴）+ 一张同帧静图打底，
+             静图先出、GIF 加载完再盖上。孕囊大小 = .hero-baby 的 --k，由 JS 按阶段写。
+             .hero-fx 是阳光光束 + 水波焦散的画布，叠在宝宝之上、文字之下。 -->
+        <div class="hero-baby" id="heroBaby" aria-hidden="true">
+          <img class="hero-kid hero-kid-still" id="heroStill" alt="" decoding="async">
+          <img class="hero-kid" id="heroKid" alt="" decoding="async">
         </div>
+        <canvas class="hero-fx" id="heroFx" aria-hidden="true"></canvas>
         <!-- 右上角原来有个消息圆钮，点开只弹「暂无新消息」——一个永远没有内容的入口，
              还顶着一颗红点天天提示。整个删掉；这一排现在只剩左边的品牌字。
              .hero-top 本身留着：它的 height:32 + margin-top:10 撑着下面整列的起点
@@ -1965,6 +1967,8 @@
 <script src="js/app.js"></script>
 <!-- 2026-10-03 首页彩蛋：宝宝在肚皮底下动（独立文件，删掉这一行即整体下线；开关在「隐私权限」） -->
 <script src="js/bump.js"></script>
+<!-- 2026-10-04 首页头图：按孕周换宝宝 + 阳光水波（独立文件） -->
+<script src="js/hero-fx.js"></script>
 
 </body>
 </html>

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100406';
+  var VER = '26100407';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 
@@ -445,22 +445,6 @@
     requestAnimationFrame(() => { b.style.width = p + '%'; });
   }
 
-  /* ================= 花瓣飘落 ================= */
-  (function petals() {
-    const box = $('#petals');
-    if (!box) return;
-    for (let i = 0; i < 10; i++) {
-      const p = document.createElement('i');
-      p.style.left = Math.random() * 100 + '%';
-      p.style.animationDuration = (6 + Math.random() * 6) + 's';
-      p.style.animationDelay = (Math.random() * 8) + 's';
-      p.style.opacity = 0.3 + Math.random() * 0.5;
-      const s = 5 + Math.random() * 7;
-      p.style.width = s + 'px'; p.style.height = s + 'px';
-      box.appendChild(p);
-    }
-  })();
-
   /* ================= 分段控件（档案） ================= */
   function initSegmented(segId, thumbId, attr, onChange) {
     const seg = $(segId), thumb = $(thumbId);
@@ -5172,15 +5156,7 @@
     if (document.visibilityState !== 'hidden') resetScreenOnShow();
   });
 
-  /* 首页头图里会动的宝宝（2026-09-30，v6 起是 GIF）。装饰用：加载完再淡入，没加载出来就停在底下的静态图上。
-     「减少动态效果」下 CSS 直接隐藏。 */
-  (function heroKid() {
-    var g = document.getElementById('heroKid');
-    if (!g) return;
-    function on() { g.classList.add('is-on'); }
-    if (g.complete && g.naturalWidth) on();
-    else g.addEventListener('load', on);
-  })();
+  /* 首页头图里会动的宝宝：2026-10-04 起按孕周换图，整段移到 js/hero-fx.js */
 
   if (document.readyState === 'complete') init();
   else window.addEventListener('load', init);

js/hero-fx.js

@@ -0,0 +1,138 @@
+/* ================= 首页头图：按孕周换宝宝 + 阳光水波（2026-10-04） =================
+   用户：「宝宝按孕周换、孕囊跟着宝宝大小变；顶部往下落的花瓣去掉，换成阳光和水波纹」。
+
+   ① 换宝宝：孕周来自 app.js 的 mb-preg 事件（syncPregnancy 跑完广播，首屏一次、远程档案回来再一次）。
+      9 个阶段各一张「羊水囊 + 宝宝」整幅图：静图（首帧）先出，GIF 加载完再盖上淡入。
+      没建档 / 产后 / 事件迟迟不来 → 用第 6 阶段（原来那个 25 周的宝宝）。
+      孕囊大小 = .hero-baby 的 --k（相对原 25 周囊的倍数），CSS 里围绕同一圆心缩放、带过渡。
+      调试：URL 带 kidweek=12 强制按 12 周显示。
+   ② 阳光水波：#heroFx 一张画布，screen 混合叠在宝宝上、文字下。
+      光束 = 右上角斜照下来的几道软光，慢慢摆；水波 = 低分辨率算一张焦散网再放大（糊一点正好像水底光斑）。
+      不在首页 / 页面隐藏 / 头图滚出视口时停画；系统「减少动态效果」下整块不画（CSS 也隐藏）。 */
+(function () {
+  'use strict';
+  // [起始孕周, 静图, GIF, 孕囊倍数 k]
+  const STAGES = [
+    [0,  '6fff51c80fe6.jpg', '2ad895e978db.gif', .42],   // 1  4–7 周  胚芽 + 卵黄囊
+    [8,  'a75f4970478c.jpg', '90bd965c9c20.gif', .52],   // 2  8–10 周 小豆芽胚胎
+    [11, '42d00e242622.jpg', 'd7eda80e7d45.gif', .62],   // 3  11–13 周 刚有人形
+    [14, '23302f9bfb42.jpg', 'f8252c0c0c22.gif', .72],   // 4  14–17 周 身子拉长、吮手
+    [18, '7e6c3509097a.jpg', '993c4174c867.gif', .86],   // 5  18–23 周 比例接近新生儿、偏瘦
+    [24, 'c0cbdd749ab0.jpg', '9c682de32bc3.gif', 1],     // 6  24–27 周 原来那个宝宝
+    [28, 'bbaebc03aaf7.jpg', '01529c30ecc6.gif', 1.01],  // 7  28–31 周 大一圈、有胎发
+    [32, '086e4e001a89.jpg', '11061c1c24c1.gif', 1.02],  // 8  32–35 周 肉嘟嘟、抱腿
+    [36, 'f6d3a8d56d5b.jpg', '2262d424d7e2.gif', 1.03]   // 9  36 周起 头朝下入盆
+  ];
+  const DEFAULT = 5;
+  const IMG = 'assets/img/';
+  const box = document.getElementById('heroBaby');
+  const still = document.getElementById('heroStill');
+  const kid = document.getElementById('heroKid');
+  if (!box || !still || !kid) return;
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+  const force = (location.search.match(/[?&]kidweek=(\d+)/) || [])[1];
+  function stageOf(week) {
+    if (week == null || isNaN(week)) return DEFAULT;
+    let i = 0;
+    while (i + 1 < STAGES.length && week >= STAGES[i + 1][0]) i++;
+    return i;
+  }
+  let cur = -1, seq = 0;
+  function show(i) {
+    if (i === cur) return;
+    cur = i;
+    const [, png, gif, k] = STAGES[i], my = ++seq;
+    box.style.setProperty('--k', k);
+    // 先把旧图淡掉再换，避免新旧宝宝叠在一起闪一下
+    kid.classList.remove('is-on'); still.classList.remove('is-on');
+    const s = new Image();
+    s.onload = () => { if (my !== seq) return; still.src = s.src; still.classList.add('is-on'); };
+    s.src = IMG + png;
+    if (reduce) return;
+    const g = new Image();
+    g.onload = () => { if (my !== seq) return; kid.src = g.src; kid.classList.add('is-on'); };
+    g.src = IMG + gif;
+  }
+  function onPreg(d) { show(stageOf(force != null ? +force : (d && d.week))); }
+  addEventListener('mb-preg', e => onPreg(e.detail));
+  if (force != null || window.__mbPreg) onPreg(window.__mbPreg);
+  else setTimeout(() => { if (cur < 0) show(DEFAULT); }, 2500);
+
+  /* ---------------- 阳光 + 水波 ---------------- */
+  const cv = document.getElementById('heroFx');
+  if (!cv || reduce) return;
+  const hero = cv.parentNode, home = document.getElementById('screen-home');
+  const ctx = cv.getContext('2d');
+  const CW = 72;                       // 焦散低分辨率宽
+  const off = document.createElement('canvas'), oc = off.getContext('2d');
+  let W = 0, H = 0, dpr = 1, ch = 0, img = null, seen = true, raf = 0, last = 0;
+  function size() {
+    const r = hero.getBoundingClientRect();
+    dpr = Math.min(devicePixelRatio || 1, 2);
+    W = r.width; H = r.height;
+    cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
+    ch = Math.max(8, Math.round(CW * H / W));
+    off.width = CW; off.height = ch; img = oc.createImageData(CW, ch);
+  }
+  // 光束：从右上角画外斜着照进来，每道各自慢慢摆、忽明忽暗
+  const RAYS = [[-.10, .07, .55], [.02, .045, .4], [.12, .09, .5], [.24, .05, .35], [.34, .07, .3]];
+  function rays(t) {
+    const ox = W * .92, oy = -H * .55, L = H * 2.1;
+    ctx.globalCompositeOperation = 'lighter';
+    RAYS.forEach(([a0, w, al], i) => {
+      const a = Math.PI * .62 + a0 + Math.sin(t * .13 + i * 1.7) * .035;
+      const ww = w * (1 + .25 * Math.sin(t * .21 + i));
+      const k = al * (.65 + .35 * Math.sin(t * .37 + i * 2.3));
+      const x1 = ox + Math.cos(a - ww) * L, y1 = oy + Math.sin(a - ww) * L;
+      const x2 = ox + Math.cos(a + ww) * L, y2 = oy + Math.sin(a + ww) * L;
+      const gr = ctx.createLinearGradient(ox, oy, ox + Math.cos(a) * L * .8, oy + Math.sin(a) * L * .8);
+      gr.addColorStop(0, 'rgba(255,248,225,0)');
+      gr.addColorStop(.3, 'rgba(255,244,215,' + (.16 * k).toFixed(3) + ')');
+      gr.addColorStop(.62, 'rgba(255,236,205,' + (.07 * k).toFixed(3) + ')');
+      gr.addColorStop(1, 'rgba(255,230,200,0)');
+      ctx.fillStyle = gr;
+      ctx.beginPath(); ctx.moveTo(ox, oy); ctx.lineTo(x1, y1); ctx.lineTo(x2, y2); ctx.closePath(); ctx.fill();
+    });
+  }
+  // 水波焦散：几层正弦叠出起伏，取「接近 0 的那条线」做亮线，越往下越淡
+  function caustics(t) {
+    const d = img.data, cx = CW * .7, cy = ch * .1;
+    for (let y = 0; y < ch; y++) {
+      const fall = 1 - y / ch * .55;
+      for (let x = 0; x < CW; x++) {
+        const v = Math.sin(x * .23 + t * .8) + Math.sin(y * .31 - t * .6 + x * .05)
+          + Math.sin((x + y) * .14 + t * .45) + Math.sin(Math.hypot(x - cx, y - cy) * .27 - t * 1.05);
+        let c = 1 - Math.abs(Math.sin(v * 1.15));
+        c = c * c; c = c * c * c;                  // 六次方：只留细细的亮网
+        const o = (y * CW + x) * 4;
+        d[o] = 255; d[o + 1] = 242; d[o + 2] = 222; d[o + 3] = c * 120 * fall;
+      }
+    }
+    oc.putImageData(img, 0, 0);
+    ctx.globalCompositeOperation = 'lighter';
+    ctx.imageSmoothingEnabled = true;
+    ctx.globalAlpha = .55;
+    ctx.drawImage(off, 0, 0, W, H);
+    ctx.globalAlpha = 1;
+  }
+  function frame(now) {
+    raf = 0;
+    if (!(seen && !document.hidden && (!home || home.classList.contains('is-active')))) return;
+    raf = requestAnimationFrame(frame);
+    if (now - last < 33) return;               // ≈30fps 足够，省电
+    last = now;
+    const t = now / 1000;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, W, H);
+    caustics(t); rays(t);
+  }
+  function kick() { if (!raf) raf = requestAnimationFrame(frame); }
+  size();
+  addEventListener('resize', () => { size(); kick(); });
+  document.addEventListener('visibilitychange', kick);
+  if (home) new MutationObserver(kick).observe(home, { attributes: true, attributeFilter: ['class'] });
+  if ('IntersectionObserver' in window) new IntersectionObserver(es => { seen = es[0].isIntersecting; kick(); }).observe(hero);
+  cv.classList.add('is-on');
+  kick();
+})();

mama-box.css

@@ -191,20 +191,16 @@ a.skip:focus{left:16px;top:16px}
      hero 橙色区底缘：中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
    ⚠️ 上面这些是**设计稿**的数，不是现在的实现值。设计稿里没有 slogan，
       加进去之后品牌字以下整列都下移了，实际纵向排布以 .home-hero 里那笔账为准。 */
-/* 2026-09-30 头图 = 孕 25 周（母婴作图 v7，替代 v6：用户否了 v6 的背对造型，改回 v5 姿势——侧身、闭眼睡、
-   小手在嘴边、正脸可见；画风稍卡通，脐带从囊壁右上方垂下、更清晰、全程不动；不规则羊水囊、暖桃底；镜头固定）。
-   画幅 16:9（静帧 1280×720），构图、囊位置和 v6 一致，所以摆位数全部沿用。
-   背景 assets/img/5aec5c71b009.jpg（1560×750 = 3 倍图 520×250）= 静帧 yun25w-still.png 缩到 .88，
-   截取块中心 (656,360) 摆在 (1240,375)；左/上/下不够的地方按边缘色拉伸补齐并羽化。
-   图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #dc8569（=图左缘色）。
-   会动的宝宝是叠在上面的同源 GIF，见 .hero-baby。
+/* 2026-10-04 头图背景换成 assets/img/6a268e7269b7.jpg：原 25 周静帧去掉羊水囊、宝宝、脐带后的空背景（AI 补底，1560×750，
+   摆法同旧图：图高 = 橙区高、右对齐，屏宽 ≤520 都铺得满，再宽露底色 #dc8569）。
+   羊水囊 + 宝宝整体都在 .hero-baby 里，按孕周换（js/hero-fx.js）。
    上面叠一层很淡的暖色左深右透渐变，只为让左边白字（孕周环、天数卡）再稳一点。
    形状（高度、底部椭圆弧）不变。 */
 .home-hero{
   position:relative;color:#fff;overflow:hidden;
   background:
     linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%),
-    url(assets/img/5aec5c71b009.jpg) right center/auto 100% no-repeat,
+    url(assets/img/6a268e7269b7.jpg) right center/auto 100% no-repeat,
     #dc8569;
   padding:env(safe-area-inset-top) 15px 0 16px;
   /* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的，
@@ -234,9 +230,6 @@ a.skip:focus{left:16px;top:16px}
   height:calc(250px + env(safe-area-inset-top));
   border-radius:0 0 50% 50% / 0 0 44px 44px;
 }
-.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
-.petals i{position:absolute;width:8px;height:8px;background:rgba(255,255,255,.5);border-radius:60% 0 60% 0;animation:petal linear infinite}
-@keyframes petal{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translateY(340px) rotate(320deg);opacity:0}}
 .hero-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;height:32px;margin-top:10px}
 .hero-brand{font-size:21px;font-weight:800;letter-spacing:.5px;line-height:1}
 .hero-brand{margin:0;display:flex}
@@ -299,28 +292,29 @@ a.skip:focus{left:16px;top:16px}
       下移之后圆心 (屏宽−25−94.75, 134.75)、下缘 40+189.5=229.5，
       必须留在「宝宝来信」卡顶（234）之上 —— 这就是橙区高必须 ≥250 的来源。
       改 top 前先读 .home-hero 里那笔竖列账。 */
-/* 会动的宝宝（2026-10-01，v8，静帧同 v7）：GIF assets/img/250bb167b0f1.gif = 原 GIF（800×450，12fps，4 秒无缝循环）
-   截 x185 y0 起 450×450（整高），不缩放，按首帧原调色板无抖动重映射，2.1MB。v8 动作加了整体摇摆，
-   宝宝区域约在原 GIF x290..530 y95..390；实测运动像素全在遮罩 80% 实心半径 180px 内（之外只有囊壁极淡噪点），包得住。
-   摆位：背景里静帧缩了 .88（静帧是 GIF 的 1.6 倍），这块 = 静帧 720 → 634 画布像素，左上角落在 (923,58)，
-   换算成橙区高 H：宽高 634/750 = .8453H，顶 58/750 = .0773H，右 (1560−1557)/750 ≈ .004H。
-   背景就是同一画面的静帧、镜头固定，所以只需一圈宽羽化遮罩（80%→100%）把方块边化掉，
-   囊里光点在羽化圈冻结成静帧也看不出来。加载完之前 opacity:0，JS 收到 load 再淡入，
-   没加载出来就一直是背景那一帧。用户要求：囊不动，只让宝宝自己动 —— 所以这一层没有任何 transform 动画。 */
-.hero-baby{position:absolute;z-index:2;
-  top:calc((250px + env(safe-area-inset-top)) * .0773);
-  right:calc((250px + env(safe-area-inset-top)) * .004);
-  width:calc((250px + env(safe-area-inset-top)) * .8453);
-  height:calc((250px + env(safe-area-inset-top)) * .8453);
+/* 会动的宝宝（2026-10-04 起按孕周 9 个阶段）：每阶段 = 羊水囊 + 宝宝的整幅方图，囊壁约占图宽 86%，
+   GIF 480×480、48 帧 × 80ms，静图是同一首帧。原 25 周那颗囊的摆位：宽高 .8453H，圆心距右 .42665H、距顶 .5H（H = 橙区高），
+   其它阶段围绕同一圆心按 --k 缩放。羽化遮罩 84%→100% 把方块边化进空背景。 */
+/* 2026-10-04：孕囊大小跟着宝宝变 —— --k 是相对原 25 周那颗囊的倍数（JS 按孕周阶段写，见 js/hero-fx.js STAGES）。
+   圆心固定在原来那颗囊的圆心（距右 .42665H、距顶 .5H），只改直径，所以小囊会往圆心收、大囊往四周撑。 */
+.hero-baby{--H:calc(250px + env(safe-area-inset-top));--k:1;--d:calc(var(--H) * .8453 * var(--k));
+  position:absolute;z-index:2;
+  top:calc(var(--H) * .5 - var(--d) / 2);
+  right:calc(var(--H) * .42665 - var(--d) / 2);
+  width:var(--d);height:var(--d);
+  transition:width .9s ease,height .9s ease,top .9s ease,right .9s ease;
   pointer-events:none;user-select:none}
 .hero-kid{position:absolute;inset:0;width:100%;height:100%;
   object-fit:cover;background:transparent;opacity:0;transition:opacity .8s ease;
-  -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
-          mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}
+  -webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);
+          mask-image:radial-gradient(closest-side,#000 84%,transparent 100%)}
 .hero-kid.is-on{opacity:1}
-/* 系统开了「减少动态效果」就全部停下：这类装饰性循环动画是前庭不适的常见诱因 */
+/* 阳光 + 水波：整块橙区一张画布，加色混合，叠在宝宝上、文字下 */
+.hero-fx{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
+.hero-fx.is-on{opacity:1}
+/* 系统开了「减少动态效果」就全部停下：只留静图，光效不画 */
 @media (prefers-reduced-motion:reduce){
-  .hero-kid{display:none}
+  #heroKid,.hero-fx{display:none}
 }
 
 /* 天数文案：一张毛玻璃小卡，不再是裸字浮在橙底上。