/* ==========================================================================
   朝阳薪传 v6.9 · 朝朝动态 GIF 样式（替换 v6.7/v6.8 的四图叠放/循环关键帧）
   --------------------------------------------------------------------------
   · 每处场景一张 280×280 动态 GIF（眨眼/歪头/睁眼/趴下），逐帧手绘动画，
     不再需要叠放切换、姿态状态机与跳跃关键帧。
   · GIF 为近白底 (253,247,246)，用 mix-blend-mode:darken 让它与米白纸面
     (#FAF6EE / 卡片 #FFFDF8) 完全同化，看不到方块边。
     —— 为什么不是 multiply（v7.2 修正）：GIF 底色是 253,247,246 而不是纯白，
     multiply 是「逐通道相乘」，253×250/255=248、247×246/255=238、246×238/255=227，
     结果永远比纸面 #FAF6EE 略深一点 → 整块 GIF 方框会以「更暖的浅方块」显形
     （实测 Δ≈(2,7,11)，8 倍放大后边界清晰可见）。
     darken 是「逐通道取小」：底色 253,247,246 比纸面 250,246,238 亮，取小后
     正好落在纸面本身上 → 方框彻底消失。猫身上任何比纸面亮的像素（白肚皮、
     高光）在两种模式下都会落成纸面色，表现完全一致；猫毛等深色像素 darken
     不额外压暗，比 multiply 更接近原画。
     结论：对「近白底素材融图」这个需求，darken 恒不差于 multiply。
   · 容器（.gif-cat）保持干净——不带任何 transform/animation，混合图层
     不会被 stacking context 绝缘（v6.7 深坑 1 的教训，继续遵守）。
   · 降级：GIF 挂掉 → JS 换静态蹲坐帧（cat-pose-d.jpg）；静态帧也挂 → 整只隐藏；
     prefers-reduced-motion → JS 直接用静态帧（GIF 无法用 CSS 暂停）。
   ========================================================================== */

/* ---------- 1. 容器与图层 ---------- */
.gif-cat {
  position: relative;
  display: inline-block;
  overflow: visible;
}
.gif-cat .gif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: darken;          /* 近白底逐通道取小 → 正好落成纸面色 */
  pointer-events: none;            /* 不干扰按钮命中区域 */
}

/* ---------- 2. 场景微调 ----------
   树脚下的小猫：v6.5 的「抬头看树」仰角改在图层上做（容器归零，保住混合）
   另：v7.36.4 起树脚下用透明底 WebP（cat-gif-open-a.webp），不再靠 darken 融图。
   原因：树卡自身没有实底，猫的背景就是 body 传播的根背景，而根背景不参与混合组
   → darken 无背影可混，近白底 (253,247,246) 原样显形，就是那个「白方块」，
   还会把底下的土坡切断。透明底素材与「有没有底可混」无关，恒不显形。
   选择器用属性选择器（.gif-cat[data-alpha="1"] .gif，三档特异性）压过 .gif-cat .gif，
   与 v8 线同款；透明底素材挂 data-alpha="1" 由 v67-cat-poses.js 的 catPoseHTML 输出。 */
.tree-cat.look-up { transform: none; }
.tree-cat.look-up .gif { rotate: -1.6deg; }
.gif-cat[data-alpha="1"] .gif { mix-blend-mode: normal; }

/* ---------- 3. 静态降级 ---------- */
/* data-static="1"：GIF 已换成静态蹲坐帧（断图 / reduced-motion），样式不变 */
.gif-cat.gif-dead { display: none; }   /* 静态底图也失败：整只退场，不留破图 */

/* ---------- 4. 复盘成功页的庆祝猫 ----------
   坐在 body 传播背景上的混合图层没有可混合的对象（根背景不参与混合组，
   近白会以原样显形），所以给它一个真实的圆底——和首页功能卡同款。
   注意：换成 darken 也救不了「没有底色」这种情况（无背板时取小等于原样），
   真实底色是硬要求，别删。 */
.review-done-cat {
  display: flex;
  justify-content: center;
  margin: 4px auto 2px;
}
.review-done-cat .gif-cat {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;          /* 圆底要真的裁掉 img 四角，否则近白溢出圆外 */
  background: radial-gradient(circle at 50% 42%, #FFFEFB 0%, #FCF5E7 58%, #F3E7D0 100%);
  border: 1px solid #F1E5CE;
}
@media (max-width: 720px) {
  .review-done-cat .gif-cat { width: 80px !important; height: 80px !important; }
}
