/* ============================================================
 * 问稷 AgriMind · 动效层 v4.1「FIELD MOTION」
 * ------------------------------------------------------------
 * 参考了 scroll-driven / data-storytelling 的做法，但动作本身取自农事，
 * 不用 AI 生成页那几件套（渐变流光、浮起漂}-\, 光晕脉冲、跟手倾斜）：
 *
 *   ① 垄线进度 —— 页面读了多少，页顶那条 lime 就推进多少（--scroll）
 *   ② 破土生长 —— 卡片从地面往上「长」出来，不是淡入上浮
 *   ③ 描边成线 —— 图表折线像犁沟一样被画出
 *   ④ 尺随页动 —— 页缘刻度尺随滚动位移，像在量地
 *   ⑤ 打印吐出 —— 账单/收据自上而下吐出
 *   ⑥ 节点依次亮 —— 一季日程的日期逐个点亮
 *
 * 全部尊重 prefers-reduced-motion。
 * 本文件是纯叠加层：**删掉 <link> 即可回到静态**。
 * ========================================================== */

/* ---------- ① 垄线滚动进度 ---------- */
body::before{
  content:"";position:fixed;inset:0 0 auto 0;height:2px;z-index:120;
  background:var(--brand);transform-origin:0 50%;
  transform:scaleX(var(--scroll,0));
  transition:transform 90ms linear;
  pointer-events:none;
}
/* 垄不是实线：等距短刻——让人看出「读到哪了」而不是「进度条」 */
body::after{
  content:"";position:fixed;inset:0 0 auto 0;height:2px;z-index:119;
  background:repeating-linear-gradient(90deg,
    var(--brand) 0 6px, transparent 6px 11px);
  opacity:.28;pointer-events:none;
  transform:scaleX(var(--scroll,0));transform-origin:0 50%;
  transition:transform 90ms linear;
}

/* ---------- ② 破土生长：替换通用的淡入上浮 ----------
   只给「不含按钮」的展示容器用 clip-path。
   重要：clip-path 参与命中测试——正在生长的容器里的按钮点不到。
   所以 .ledger / .mf-rain / .mf-bill 这类带交互的容器一律不用它，
   否则手机上会出现「按钮看得见却按不动」。 */
.panel.rv,.rx-card.rv,.impact.rv,.feat.rv{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translateY(14px);
  transition:
    clip-path 620ms var(--ease-out),
    transform 620ms var(--ease-out),
    opacity 260ms linear;
}
.panel.rv.in,.rx-card.rv.in,.impact.rv.in,.feat.rv.in{
  opacity:1;clip-path:inset(0 0 0 0);transform:none;
}
/* 同一容器内的块，逐个长出，像一行苗 */
.mf-card.rv:nth-child(2){transition-delay:60ms}
.mf-card.rv:nth-child(3){transition-delay:120ms}
.mf-card.rv:nth-child(4){transition-delay:180ms}
.mf-card.rv:nth-child(n+5){transition-delay:220ms}

/* 带按钮的容器：改用「逐行落下」，不遮命中区域 */
.mf-rain.rv>*,.mf-bill.rv>*{
  opacity:0;transform:translateY(5px);
  transition:opacity 300ms linear,transform 420ms var(--ease-out);
}
.mf-rain.rv.in>*,.mf-bill.rv.in>*{opacity:1;transform:none}
.mf-bill.rv.in>.mf-bill-row{transition-delay:90ms}
.mf-bill.rv.in>.mf-bill-prev{transition-delay:150ms}
.mf-bill.rv.in>.mf-bill-tip{transition-delay:210ms}
.mf-bill.rv.in>.mf-bill-cap{transition-delay:250ms}
.mf-rain.rv.in>.mf-rain-bars{transition-delay:80ms}
.mf-rain.rv.in>.mf-rain-tip{transition-delay:140ms}
.mf-rain.rv.in>.mf-rain-act{transition-delay:200ms}

/* ---------- ③ 图表描边：折线像犁沟被画出 ---------- */
@keyframes drawLine{ from{stroke-dashoffset:1400} to{stroke-dashoffset:0} }
.plot svg path[stroke]:not([fill]){
  stroke-dasharray:1400;stroke-dashoffset:1400;
}
.rv.in .plot svg path[stroke],
.plot.rv.in svg path[stroke],
.draw svg path[stroke]{
  animation:drawLine 1100ms var(--ease-out) both;
  animation-delay:120ms;
}
/* 折线端点：画完再落笔下去 */
.plot svg circle{fill-opacity:0;transition:fill-opacity 200ms linear 900ms}
.rv.in .plot svg circle,.plot.rv.in svg circle{fill-opacity:1}

/* ---------- ④ 页缘刻度尺随滚动位移 ---------- */
@media (min-width:1180px){
  main.page::before,main.page::after{
    background-position:0 calc(var(--scroll,0) * -60px);
    transition:background-position 120ms linear;
  }
}

/* ---------- ⑤ 已由「逐行落下」替代（见 ②）。
      原先用 clip-path inset 做「打印吐出」，但它会让容器内的按钮在
      动画期间点不动——这是真机上才暴露的问题，故弃用。 ---------- */

/* ---------- ⑥ 时间轴：节点依次点亮 ---------- */
@keyframes dotPop{
  from{transform:scale(0);opacity:0}
  60%{transform:scale(1.35);opacity:1}
  to{transform:scale(1);opacity:1}
}
.mf-tl-i.rv{opacity:0;transform:translateX(-8px)}
.mf-tl-i.rv.in{
  opacity:1;transform:none;
  transition:opacity 260ms linear,transform 420ms var(--ease-out);
}
/* 注意：.mf-tl-i 是 grid（96/92/1fr/74 四栏）。
   这里若用 inline-block 的 ::before，它就变成**第 5 个 grid item**，
   把四个格子整体挤歪：日期掉到第 2 栏、地块名被压进最后 74px 栏按字换行。
   所以圆点必须脱离文档流（absolute），并给行留出等宽的左内边距。 */
.mf-tl-i{position:relative;padding-left:15px}
.mf-tl-i.rv.in::before{
  content:"";position:absolute;left:0;top:calc(var(--s3) + 7px);
  width:6px;height:6px;background:var(--ink);
  animation:dotPop 420ms var(--ease-out) both;
  animation-delay:80ms;
}
.mf-tl-i.is-soon.rv.in::before{background:var(--brand-deep)}
.mf-tl-i.is-done.rv.in::before{background:var(--ink-4)}

/* ---------- 提示条：左侧那道线扫下来 ---------- */
@keyframes ruleIn{ from{transform:scaleY(0)} to{transform:scaleY(1)} }
.note.rv.in{
  box-shadow:none;
  animation:ruleIn 420ms var(--ease-out) both;
  transform-origin:0 0;
}
.note.rv.in{animation:none}
.note.rv.in>span:first-child{
  display:block;transform-origin:0 0;
  animation:ruleIn 520ms var(--ease-out) both;
}

/* ---------- 大标题：字下的 lime 横线扫出 ---------- */
@keyframes sweepIn{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
.phead h1 em,.hero h1 em{
  position:relative;text-decoration:none;font-style:normal;
}
.phead h1 em::after,.hero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;
  background:var(--brand);transform-origin:0 50%;z-index:-1;
  animation:sweepIn 620ms var(--ease-out) both;
  animation-delay:260ms;
}

/* ---------- 结果页主数字：到位时轻微过冲一次 ---------- */
@keyframes settle{
  0%{transform:translateY(6px)}
  70%{transform:translateY(-2px)}
  100%{transform:translateY(0)}
}
.rx-big .rx-n,.mf-sum-i .fig{will-change:transform}
.rx-card.rv.in .rx-big{animation:settle 520ms var(--ease-out) both;animation-delay:80ms}

/* ---------- 尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0ms!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .panel.rv,.rx-card.rv,.impact.rv,.feat.rv,.mf-tl-i.rv{
    opacity:1;clip-path:none;transform:none;
  }
  .mf-rain.rv>*,.mf-bill.rv>*{opacity:1;transform:none}
  .plot svg path[stroke]:not([fill]){stroke-dasharray:none;stroke-dashoffset:0}
  .plot svg circle{fill-opacity:1}
  body::before,body::after{transition:none}
}

/* ---------- 打印：动效全部退场 ---------- */
@media print{
  body::before,body::after{display:none!important}
}