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>

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}
 }
 
 /* 天数文案：一张毛玻璃小卡，不再是裸字浮在橙底上。