祈福小树下移，卡片上沿改为渐隐露出树身 (v26100445)

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:26100444 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
+<!-- V:26100445 缓存版本标记：改 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 第四节） -->

js/app.js

@@ -3,7 +3,7 @@
 (function () {
   'use strict';
   /* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
-  var VER = '26100444';
+  var VER = '26100445';
   const $ = (s, c) => (c || document).querySelector(s);
   const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
 

mama-box.css

@@ -4665,11 +4665,12 @@ a.skip:focus{left:16px;top:16px}
 
 
 
+
 /* ============ 祈福树入口（2026-10-05） ============
    用户：「把『所有工具』取消，右上角放『祈福』两个小字」+「树藏在页面底部边缘，微微露出来，偶尔动一动」。
    · 树图用宝宝祈福会话提供的缩略图（/qifu-shu/static/tree-thumb.png，600² 裁边后缩到 150px 存本地，免得每次拉 550KB）；
    · 树放在头图（.home-hero，overflow:hidden）右下角：#homeBody 的 z-index 比头图高，工具卡上沿（≈231px）盖住树的下半截，
-     只露树冠顶 ≈17px（卡片停稳后上沿 236px，树顶 219px）；被盖住那截用 clip-path 裁掉（不然透过毛玻璃会糊成一团绿）；
+     只露树冠顶 ≈13px（卡片停稳后上沿 236px，树顶 223px），卡片上沿往下渐隐；被盖住那截用渐隐遮罩慢慢淡掉（硬裁太生硬，全透又会在毛玻璃里糊成一团绿）；
    · 「祈福」小字在卡片标题行右边（原「所有工具」的位置），正好在树下方；两处都能点（≥44px 高的点击区）；
    · 「偶尔动一动」：每 7 秒里前 6 秒静止，最后 1 秒绕树根轻轻摆 3 度左右再回正。 */
 .dock-qifu{margin-left:auto;align-self:stretch;display:flex;align-items:center;
@@ -4677,13 +4678,15 @@ a.skip:focus{left:16px;top:16px}
   text-decoration:none;-webkit-tap-highlight-color:transparent}
 .dock-qifu .dq-t{font-size:12px;font-weight:700;color:#C2503E;letter-spacing:1px}
 .dock-qifu:active{opacity:.6}
-.hero-qifu{position:absolute;z-index:1;right:4px;bottom:-1px;width:58px;height:44px;display:block;
+.hero-qifu{position:absolute;z-index:1;right:4px;bottom:-1px;width:58px;height:50px;display:block;box-sizing:border-box;
-  /* 卡片是毛玻璃，盖住的那截树会透出来糊成一团绿（10-05 用户反馈）→ 卡片上沿以下直接裁掉。
+  /* 10-05 用户两轮反馈：硬裁 → 「树完整地在卡片下边，卡片上沿慢慢把树露出来，再往下一点」。
-     裁切线 = 卡片上沿（本框内 y=17）+ 右上角 26px 圆角的圆弧（圆心在本框 x=36,y=43），多留 1px 压进卡片边免得露缝；
+     改成渐隐遮罩：外框比树高 10px 留出摆动余量（padding-top），卡片上沿在本框 y=23（框顶 213、卡片 236）；
-     clip-path 挂在不摆动的外框上，树摆动时裁切线不跟着转。卡片位置/圆角/树的位置改了，这串数要一起重算。 */
+     上沿以上全显，往下 25px 内渐隐到 0 —— 树冠露 ≈13px，再往下透过毛玻璃隐约看到一点、慢慢淡没，卡片深处是干净的白。
-  clip-path:polygon(-12px -30px,70px -30px,70px 44.0px,58px 30.1px,54px 25.2px,50px 22.1px,46px 20.0px,42px 18.7px,39px 18.2px,36px 18.0px,-12px 18px);-webkit-clip-path:polygon(-12px -30px,70px -30px,70px 44.0px,58px 30.1px,54px 25.2px,50px 22.1px,46px 20.0px,42px 18.7px,39px 18.2px,36px 18.0px,-12px 18px);
+     mask 挂在不摆动的外框上。卡片位置 / 树的位置改了，这里的 23px、48px 要一起改。 */
+  -webkit-mask-image:linear-gradient(180deg,#000 23px,rgba(0,0,0,.62) 32px,rgba(0,0,0,0) 48px);
+          mask-image:linear-gradient(180deg,#000 23px,rgba(0,0,0,.62) 32px,rgba(0,0,0,0) 48px);
   -webkit-tap-highlight-color:transparent}
-.hero-qifu img{position:absolute;left:0;top:0;width:58px;height:56px;display:block;
+.hero-qifu img{position:absolute;left:0;top:10px;width:58px;height:56px;display:block;
   transform-origin:50% 100%;animation:dqSway 7s ease-in-out infinite;
   filter:drop-shadow(0 -1px 3px rgba(80,30,10,.25))}
 @keyframes dqSway{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-3.5deg)}93%{transform:rotate(2.5deg)}97%{transform:rotate(-1deg)}}