/* 修改记录动画 —— 智能体持笔在 3D 倾斜纸上改写内容，
 * 笔尖始终对准线条进度点（逐帧同步），笔以笔尖为圆心摇摆；
 * 纸摊平后绿行抽出展开为红绿 diff。自动播放，点击场景重播。
 */

(function () {
  'use strict';

  var stage = document.getElementById('anim3Stage');
  var paper = document.getElementById('paper');
  var penPos = document.getElementById('penPos');
  var pen = document.getElementById('writerPen');
  var boxBack = document.getElementById('boxBack');
  var boxFront = document.getElementById('boxFront');
  var diffView = document.getElementById('diffView');
  var lines = Array.prototype.slice.call(paper.querySelectorAll('.pline'));
  var dlines = Array.prototype.slice.call(diffView.querySelectorAll('.dline'));

  // 挂载六边形眼睛（眨眼 + 追踪）
  if (window.AstrionAvatar) {
    AstrionAvatar.mount(document.getElementById('writerAvatar'), { mode: 'idle', blink: true, track: true });
  }

  var gen = 0;

  /* 笔尖/橡皮的精确位置不再手调像素：
   * SVG 内放了两个隐形参考点（penNibRef / penEraserRef），
   * 运行时 getBoundingClientRect 实测其渲染位置做补偿——
   * 无论笔怎么旋转/摇摆，作用点都精确钉在目标上。 */
  var nibRef = document.getElementById('penNibRef');
  var eraserRef = document.getElementById('penEraserRef');
  var penTx = 0, penTy = 0;

  /* 笔的初始位（被智能体拿着）：笔尖所在点，笔身斜跨六边形 */
  var PEN_HOME = { x: 456, y: 94 };

  function sleep(ms) {
    return new Promise(function (r) { setTimeout(r, ms); });
  }

  async function step(ms, myGen) {
    await sleep(ms);
    if (myGen !== gen) throw new Error('cancelled');
  }

  function el(tag, cls) {
    var e = document.createElement(tag);
    if (cls) e.className = cls;
    return e;
  }

  function stageRect() { return stage.getBoundingClientRect(); }

  /* 缓动 */
  function easeOut(p) { return 1 - (1 - p) * (1 - p); }
  function easeInOut(p) { return p < 0.5 ? 2 * p * p : 1 - 2 * (1 - p) * (1 - p); }

  /* rAF 逐帧驱动（返回 false/取消时提前结束） */
  function tween(ms, fn, myGen) {
    return new Promise(function (resolve) {
      var t0 = performance.now();
      function tick(now) {
        if (myGen !== gen) { resolve(); return; }
        var p = Math.min((now - t0) / ms, 1);
        fn(p);
        if (p >= 1) { resolve(); return; }
        requestAnimationFrame(tick);
      }
      requestAnimationFrame(tick);
    });
  }

  function setPen(x, y) {
    penTx = x; penTy = y;
    penPos.style.transform = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px)';
  }

  /* 手动微调（css px）：数据对准后仍有轻微视觉偏差时在这里调，用户肉眼验收 */
  var NIB_TWEAK = { x: 0, y: -1.8 };
  var ERASER_TWEAK = { x: 0, y: 0 };

  /* 把参考点精确移到舞台坐标 (x, y)：实测当前位置，差值补偿到外层 translate，一次收敛 */
  function refTo(refEl, x, y, sr) {
    var r = refEl.getBoundingClientRect();
    var cx = r.left + r.width / 2 - sr.left;
    var cy = r.top + r.height / 2 - sr.top;
    setPen(penTx + (x - cx), penTy + (y - cy));
  }
  function nibTo(x, y, sr) { refTo(nibRef, x + NIB_TWEAK.x, y + NIB_TWEAK.y, sr); }
  function eraserTo(x, y, sr) { refTo(eraserRef, x + ERASER_TWEAK.x, y + ERASER_TWEAK.y, sr); }

  /* 行右端进度点的舞台坐标：倾斜线的包围盒中心≠真实右端点，
   * 用线内右端锚点（.pline-end）的实测位置，兼容 3D 透视 + rotZ 倾斜 */
  function lineTip(line, sr) {
    var r = line.querySelector('.pline-end').getBoundingClientRect();
    return { x: r.left + r.width / 2 - sr.left, y: r.top + r.height / 2 - sr.top };
  }
  function nibToLineTip(line, sr) {
    var t = lineTip(line, sr);
    nibTo(t.x, t.y, sr);
  }

  /* 三轮内容：Dockerfile / Python / TS，不全是一种代码；
     纸上横线长度 ≈ 对应行字符数（~2.3%/字符）——线长与内容长短一致；
     file/tone：收盒前渐变覆盖的文件卡（红/黄/绿，露出一截即可分辨）。 */
  var ROUNDS = [
    {
      file: 'Docker',
      paperW: [34, 26, 59, 44],
      edits: [
        { newW: 26, del: 'EXPOSE 8080', add: 'EXPOSE 8091' },
        /* 最长行 26 字符（≈237px 宽）：diff 左缘保持在 stage 内（>15px），否则左缘描边被 stage 裁掉 */
        { newW: 53, del: 'CMD ["python", "server.py"]', add: 'CMD ["python", "main.py"]' }
      ]
    },
    {
      file: 'api.py',
      paperW: [56, 35, 46, 30],
      edits: [
        { newW: 35, del: 'MAX_RETRIES = 3', add: 'MAX_RETRIES = 5' },
        { newW: 46, del: 'request_timeout = 30', add: 'request_timeout = 60' }
      ]
    },
    {
      file: 'theme.ts',
      paperW: [46, 30, 66, 58],
      edits: [
        { newW: 37, del: "theme: 'dark'", add: "theme: 'classic'" },
        { newW: 66, del: 'fontSize: 13, lineHeight: 1.4', add: 'fontSize: 14, lineHeight: 1.6' }
      ]
    }
  ];
  /* 盒内纸堆叠透视（按盒子 SVG 侧边斜率 dx/dy=0.5 推导：每向深处 1px 两侧共收 1px）：
     每往里一张纸，顶边抬高 ~10px、宽度按侧边角度同步收窄、只露出顶部一截。
     topY/bottomY 为 stage 坐标，wRatio 为相对盒子图标宽的比例。 */
  /* 等比透视：三张文件本身差不多高，随深度每层缩 ~8%（与宽度收敛同比率）；
     底边都落在盒口附近（194/183/172）——每张收进去的瞬间都是真的插进盒子，不悬空；
     顶边各露 5px（底边落差 11px - 高度缩 6px ≈ 5px） */
  /* 等比透视：三张文件本身差不多高，随深度略缩；底边都落在盒口附近——
     每张收进去的瞬间都是真的插进盒子，不悬空；顶边各露 5px。
     （坐标基于盒子下移 50px 后：盒口 y=224） */
  var FILED_SPECS = [
    { topY: 182, bottomY: 234, wRatio: 0.66 },   /* 最前：高 52，最宽、最低、贴前壁 */
    { topY: 177, bottomY: 223, wRatio: 0.608 },  /* 中间：高 46 */
    { topY: 172, bottomY: 212, wRatio: 0.556 }   /* 最里：高 40，底边在盒口线上 */
  ];

  /* diff 行拆成单字符（初始透明占位），擦/写时字母逐个从笔处飘入落位。
     落位的 ghost 会转正替换占位符成为流内正式字符，reset 时重建占位 */
  var dlineTexts = [];
  function setDiffTexts(r) {
    var e = ROUNDS[r].edits;
    dlineTexts = [e[0].del, e[0].add, e[1].del, e[1].add];
  }
  setDiffTexts(0);
  var dlineChars = dlines.map(function () { return []; });
  function buildDlineChars() {
    dlines.forEach(function (d, di) {
      var t = d.querySelector('.dtext');
      t.textContent = '';
      dlineChars[di] = [];
      for (var i = 0; i < dlineTexts[di].length; i++) {
        var c = el('span', 'dch');
        /* 空格用不换行空格：普通空格 span 会塌缩成 0 宽/高度异常，落点歪斜 */
        c.textContent = dlineTexts[di][i] === ' ' ? ' ' : dlineTexts[di][i];
        t.appendChild(c);
        dlineChars[di].push(c);
      }
    });
  }
  buildDlineChars();

  /* 一个字母从舞台 (x0,y0)（笔的擦/写位置）飘到 diff 行目标字符位。
     落位后转正：替换占位符成为流内正式字符——genie 收纸时文字随纸一起变形；
     首个落位字符触发行容器（红/绿底色）淡入：底色与文字同步，不先于文字出现 */
  function flyChar(x0, y0, chSpan, sr, myGen) {
    var to = chSpan.getBoundingClientRect();
    var g = el('span', 'dch-ghost');
    g.textContent = chSpan.textContent;
    g.style.color = getComputedStyle(chSpan).color;
    g.style.transform = 'translate(' + (x0 - 3).toFixed(1) + 'px,' + (y0 - 8).toFixed(1) + 'px)';
    stage.appendChild(g);
    void g.offsetWidth; /* 起始位定格后再设终点，保证过渡触发 */
    g.style.transform = 'translate(' + (to.left - sr.left).toFixed(1) + 'px,' + (to.top - sr.top).toFixed(1) + 'px)';
    g.addEventListener('transitionend', function handler() {
      g.removeEventListener('transitionend', handler);
      if (myGen !== gen) { g.parentNode && g.parentNode.removeChild(g); return; }
      /* 飞行过渡真正结束后转正：清掉行内样式、换成流内字符 class、替换占位符，同帧完成无跳变 */
      g.style.cssText = '';
      g.className = 'dch is-lit';
      var row = chSpan.parentNode;      /* .dtext */
      var dline = row.parentNode;       /* .dline */
      row.replaceChild(g, chSpan);
      /* 第一个字符到位，该行的红绿背景与 +/- 符号即浮现（后续字符陆续落位在已有底色的行里） */
      dline.classList.add('is-shown');
    });
  }

  function applyWidths() {
    lines.forEach(function (l) {
      l.style.width = l.dataset.w + '%';
    });
  }

  function reset() {
    gen += 1;
    pen.classList.remove('is-writing');
    penPos.classList.remove('is-live');
    lines.forEach(function (l) {
      l.classList.remove('is-new');
      l.style.opacity = '';
    });
    lines.forEach(function (l, i) { l.dataset.w = ROUNDS[0].paperW[i]; });
    applyWidths();
    setDiffTexts(0);
    diffView.classList.add('no-fade'); /* 重播重置同样禁用过渡，防红绿块淡出闪现 */
    dlines.forEach(function (d) { d.classList.remove('is-shown'); });
    Array.prototype.slice.call(stage.querySelectorAll('.dch-ghost')).forEach(function (g) { g.parentNode.removeChild(g); });
    buildDlineChars(); /* 落位字符已转正为流内文本，重播前重建透明占位 */
    Array.prototype.slice.call(stage.querySelectorAll('.file-flight')).forEach(function (g) { g.parentNode.removeChild(g); });
    diffView.style.clipPath = '';
    diffView.style.transform = '';
    diffView.style.transformOrigin = '';
    diffView.style.opacity = '';
    diffView.style.visibility = '';
    diffView.classList.remove('is-sheet');
    void diffView.offsetWidth;
    diffView.classList.remove('no-fade');
    /* 收件箱始终显示，不在重置时隐藏 */
    pen.classList.remove('is-erasing');
    pen.style.transform = '';
    penPos.classList.add('is-live'); /* 重置瞬移，不起飞行动画 */
    nibTo(PEN_HOME.x, PEN_HOME.y, stageRect());
    void penPos.offsetWidth; /* 强制样式计算：让 transform 在 transition:none 下定格，避免移除 is-live 后触发回退过渡 */
    penPos.classList.remove('is-live');
  }

  /* 改写一行：笔尖飞到旧行末端 → 翻转 180° 露出橡皮 → 橡皮小幅度晃动擦掉（线缩短，橡皮跟随）→ 翻回行首 → 绿行从笔尖长出 */
  async function rewriteLine(line, newW, delDline, addDline, myGen) {
    var sr = stageRect();
    var oldW = parseFloat(line.dataset.w);

    // 1) 飞到该行旧内容末端（笔尖对准线右端，过渡飞行）
    penPos.classList.remove('is-live');
    nibToLineTip(line, sr);
    await step(430, myGen);

    // 2) 倒笔：先平滑平移换端（笔尖→橡皮，JS tween 驱动，无瞬移），再绕橡皮翻转 180°
    //    （同步块内连续 setPen 不触发渲染，借此算出平移的精确起止 translate）
    pen.classList.add('is-erasing');
    penPos.classList.add('is-live');
    var t0 = lineTip(line, sr);
    var fromX = penTx, fromY = penTy;
    eraserTo(t0.x, t0.y, sr);  /* 算出橡皮贴线的目标 translate */
    var toX = penTx, toY = penTy;
    setPen(fromX, fromY);      /* 设回起点，同一同步块内不渲染 */
    await tween(280, function (p) {
      var e = easeInOut(p);
      setPen(fromX + (toX - fromX) * e, fromY + (toY - fromY) * e);
    }, myGen);

    // 3) 翻转 180°：绕橡皮平滑转动，期间橡皮始终钉在线右端
    await tween(300, function (p) {
      pen.style.transform = 'rotate(' + (easeInOut(p) * 180).toFixed(1) + 'deg)';
      var t = lineTip(line, sr);
      eraserTo(t.x, t.y, sr);
    }, myGen);

    // 4) 擦除：线缩短，橡皮跟随右端；笔小幅晃动；字母随擦除从橡皮处逐个飘向左侧红行（从右往左）
    //    时长与行长成正比（等速擦除）；行容器（红底）随首个落位字符出现
    var delChars = dlineChars[dlines.indexOf(delDline)];
    var dN = delChars.length;
    var nextDel = dN - 1;
    var eraseMs = Math.round(oldW * 7);
    await tween(eraseMs, function (p) {
      line.style.width = (oldW * (1 - easeInOut(p))) + '%';
      var wob = Math.sin(p * Math.PI * 4) * 7; // 两个来回，±7°
      pen.style.transform = 'rotate(' + (180 + wob).toFixed(1) + 'deg)';
      var t = lineTip(line, sr);
      eraserTo(t.x, t.y, sr);
      while (nextDel >= 0 && p >= (dN - nextDel) / (dN + 1)) {
        flyChar(t.x, t.y, delChars[nextDel], sr, myGen);
        nextDel--;
      }
    }, myGen);

    // 5) 翻回 0°：origin 仍在笔尾，橡皮钉在行首（线宽已 0，右端即行首）；
    //    转回 0° 后移除 is-erasing，origin 切回笔尖无跳变
    var home = lineTip(line, sr);
    await tween(280, function (p) {
      pen.style.transform = 'rotate(' + (180 * (1 - easeInOut(p))).toFixed(1) + 'deg)';
      eraserTo(home.x, home.y, sr);
    }, myGen);
    pen.classList.remove('is-erasing');
    pen.style.transform = '';

    // 6) 写上绿色新内容：笔尖跟随右端，is-writing 摇摆；字母随书写从笔尖逐个飘向左侧绿行（从左往右）
    penPos.classList.remove('is-live');
    nibTo(home.x, home.y, sr);
    await step(320, myGen);
    /* 写入行不变色（修改记录靠 diff 区表达，纸面行保持同色） */
    pen.classList.add('is-writing');
    penPos.classList.add('is-live');
    var addChars = dlineChars[dlines.indexOf(addDline)];
    var aN = addChars.length;
    var nextAdd = 0;
    var writeMs = Math.round(newW * 7); // 时长与行长成正比（等速书写）
    await tween(writeMs, function (p) {
      line.style.width = (newW * easeOut(p)) + '%';
      nibToLineTip(line, sr);
      while (nextAdd < aN && p >= (nextAdd + 0.5) / aN) {
        var t2 = lineTip(line, sr);
        flyChar(t2.x, t2.y, addChars[nextAdd], sr, myGen);
        nextAdd++;
      }
    }, myGen);
    pen.classList.remove('is-writing');
  }

  /* genie 收盒 · 裁切式：文件卡片始终是同一个 DOM 元素，不切片、不缩放内容——
     每帧把 S 曲线轮廓（底部先收窄、侧边弧线、顶部后动）算成 clip-path 多边形，
     裁掉轮廓外的部分（裁切不压缩，内容全程原样清晰）；
     body（底色+边框+文字）每帧定位到轮廓包围盒，文字随收窄矢量缩小字号；
     终态轮廓恰好是插在盒口的小矩形，元素原地成为堆叠的一张，无替换无跳变。 */
  async function genieIntoBox(myGen, r, flight) {
    var shape = flight.querySelector('.file-flight-shape');
    var name = flight.querySelector('.file-cover-name');
    var stat = flight.querySelector('.file-cover-stat');
    var sr = stageRect();
    var br = boxBack.getBoundingClientRect();
    var px = +flight.dataset.px, py = +flight.dataset.py;
    var W = +flight.dataset.w, H = +flight.dataset.h;
    /* 盒口中心（stage 坐标）：图标 y=12/24 处为盒口前缘线 */
    var mouthX = br.left + br.width / 2 - sr.left;
    /* 收盒顺序 3→2→1：第一轮收最里面，最后一轮收最前（后收的挡先收的） */
    var spec = FILED_SPECS[FILED_SPECS.length - 1 - r];
    var sinkY = spec.bottomY - (py + H);
    var centerDx = mouthX - (px + W / 2);
    var minS = (br.width * spec.wRatio) / W;
    var compressH = spec.topY - py - sinkY;
    flight.style.height = (H + sinkY + 20) + 'px'; /* SVG 视口加高覆盖下降路径 */

    /* 交错相位运动（同一套数学）：底部先动先快，顶部延迟——
       每帧把轮廓直接画成 path（fill 纸色 + stroke 描边跟随 S 曲线） */
    /* 侧边采样 72 段（≈1.6px/段）：折线足够密，S 曲线侧边平滑无锯齿 */
    var N = 72;
    var totalMs = 1500;
    var sliceMs = 950;
    var maxDelay = totalMs - sliceMs;
    var lastBox = { x: 0, y: 0, w: W, h: H };
    var RR = 3.5; /* 运动期四角圆角半径（与封面/终态 roundedRectD 一致，无圆直跳变） */
    await tween(totalMs, function (p) {
      var now = p * totalMs;
      var L = [], R = [];
      var minX = 1e9, maxX = -1e9, minY = 1e9, maxY = -1e9;
      for (var i = 0; i < N; i++) {
        var v = (i + 0.5) / N;
        var start = (1 - v) * maxDelay;
        var q = Math.min(Math.max((now - start) / sliceMs, 0), 1);
        var e = easeInOut(q);
        var sx = 1 - (1 - minS) * e;
        var ty = (sinkY + (1 - v) * compressH) * e;
        var tx = centerDx * e;
        var lw = W * sx;
        var lx = (W - lw) / 2 + tx, rx = lx + lw;
        var yt = i * H / N + ty, yb = (i + 1) * H / N + ty;
        L.push([lx, yt], [lx, yb]);
        R.push([rx, yt], [rx, yb]);
        if (lx < minX) minX = lx;
        if (rx > maxX) maxX = rx;
        if (yt < minY) minY = yt;
        if (yb > maxY) maxY = yb;
      }
      /* 拼圆角多边形：顶/底边内缩 RR，四角 Q 贝塞尔过渡（控制点=角点）；
         侧边仍是 72 段平滑折线 */
      var f = function (n) { return n.toFixed(1); };
      var lt = L[0], lb0 = L[1], rt = R[0], rb0 = R[1];
      var rbN = R[(N - 1) * 2 + 1], lbN = L[(N - 1) * 2 + 1];
      var d = 'M' + f(lt[0] + RR) + ',' + f(lt[1]);
      d += ' L' + f(rt[0] - RR) + ',' + f(rt[1]);
      d += ' Q' + f(rt[0]) + ',' + f(rt[1]) + ' ' + f(rb0[0]) + ',' + f(rb0[1]); /* 右上 */
      for (var i = 1; i < N - 1; i++) {
        d += ' L' + f(R[i * 2][0]) + ',' + f(R[i * 2][1]);
        d += ' L' + f(R[i * 2 + 1][0]) + ',' + f(R[i * 2 + 1][1]);
      }
      d += ' Q' + f(rbN[0]) + ',' + f(rbN[1]) + ' ' + f(rbN[0] - RR) + ',' + f(rbN[1]); /* 右下 */
      d += ' L' + f(lbN[0] + RR) + ',' + f(lbN[1]); /* 底边 */
      d += ' Q' + f(lbN[0]) + ',' + f(lbN[1]) + ' ' + f(L[(N - 1) * 2][0]) + ',' + f(L[(N - 1) * 2][1]); /* 左下 */
      for (var j = N - 2; j >= 1; j--) {
        d += ' L' + f(L[j * 2 + 1][0]) + ',' + f(L[j * 2 + 1][1]);
        d += ' L' + f(L[j * 2][0]) + ',' + f(L[j * 2][1]);
      }
      d += ' L' + f(lb0[0]) + ',' + f(lb0[1]); /* 段0左下 */
      d += ' Q' + f(lt[0]) + ',' + f(lt[1]) + ' ' + f(lt[0] + RR) + ',' + f(lt[1]) + ' Z'; /* 左上闭合 */
      shape.setAttribute('d', d);
      /* 文字随轮廓中心移动、矢量缩小字号。
         font-size 必须内联 style：presentation attribute 优先级低于 CSS 规则，会被压住 */
      var cx = (minX + maxX) / 2, cy = (minY + maxY) / 2;
      var sc = (maxX - minX) / W;
      /* 字号双保险：随收窄等比缩，且不超过卡片宽能放下的上限（mono 字宽 ≈0.62em） */
      var fsFit = (maxX - minX) * 0.88 / (name.textContent.length * 0.62);
      var fs1 = Math.min(Math.max(15 * sc, 7), fsFit);
      var fs2 = Math.max(11 * sc, 7);
      name.setAttribute('x', cx);
      name.setAttribute('y', cy - 2);
      name.style.fontSize = fs1.toFixed(1) + 'px';
      stat.setAttribute('x', cx);
      stat.setAttribute('y', cy + fs2 + 2);
      stat.style.fontSize = fs2.toFixed(1) + 'px';
      lastBox.x = minX; lastBox.y = minY; lastBox.w = maxX - minX; lastBox.h = maxY - minY;
    }, myGen);
    /* 终态：换回圆角矩形 path（描边+圆角完整），元素留在盒口成为堆叠的一张 */
    shape.setAttribute('d', roundedRectD(lastBox.x, lastBox.y, lastBox.w, lastBox.h, 3.5));
  }

  /* SVG 工具：SVG 元素必须用 createElementNS 创建（createElement 建的不渲染） */
  var SVG_NS = 'http://www.w3.org/2000/svg';
  function svgEl(tag, cls) {
    var e = document.createElementNS(SVG_NS, tag);
    if (cls) e.setAttribute('class', cls);
    return e;
  }

  /* 圆角矩形 path（初始封面与终态卡片用；genie 期间为直边多边形） */
  function roundedRectD(x, y, w, h, r) {
    return 'M' + (x + r) + ',' + y +
      ' L' + (x + w - r) + ',' + y +
      ' A' + r + ',' + r + ' 0 0 1 ' + (x + w) + ',' + (y + r) +
      ' L' + (x + w) + ',' + (y + h - r) +
      ' A' + r + ',' + r + ' 0 0 1 ' + (x + w - r) + ',' + (y + h) +
      ' L' + (x + r) + ',' + (y + h) +
      ' A' + r + ',' + r + ' 0 0 1 ' + x + ',' + (y + h - r) +
      ' L' + x + ',' + (y + r) +
      ' A' + r + ',' + r + ' 0 0 1 ' + (x + r) + ',' + y + ' Z';
  }

  /* 收盒前：文件卡片（SVG：path 纸色+描边，text 文件名+统计）渐变出现，
     diff 内容直接消失；卡片是 SVG 单元素——描边跟随 path 轮廓（S 曲线斜边也有） */
  async function showFileCover(r, myGen) {
    var sr = stageRect();
    var pr = diffView.getBoundingClientRect();
    var px = pr.left - sr.left, py = pr.top - sr.top;
    var W = pr.width, H = pr.height;
    var flight = svgEl('svg', 'file-flight');
    flight.style.left = px + 'px';
    flight.style.top = py + 'px';
    flight.style.width = W + 'px';
    flight.style.height = H + 'px';
    /* 创建即设层级（先收最里 21，后收在前）：封面期就必须在 diffView(z20) 之上 */
    flight.style.zIndex = String(21 + r);
    flight.dataset.px = px; flight.dataset.py = py;
    flight.dataset.w = W; flight.dataset.h = H;
    var shape = svgEl('path', 'file-flight-shape');
    shape.setAttribute('d', roundedRectD(0, 0, W, H, 3.5));
    var name = svgEl('text', 'file-cover-name');
    name.setAttribute('x', W / 2);
    name.setAttribute('y', H / 2 - 3);
    name.setAttribute('text-anchor', 'middle');
    name.textContent = ROUNDS[r].file;
    var stat = svgEl('text', 'file-cover-stat');
    stat.setAttribute('x', W / 2);
    stat.setAttribute('y', H / 2 + 14);
    stat.setAttribute('text-anchor', 'middle');
    var add = svgEl('tspan', 'add'); add.textContent = '+2';
    var del = svgEl('tspan', 'del'); del.textContent = ' -2';
    stat.appendChild(add);
    stat.appendChild(del);
    flight.appendChild(shape);
    flight.appendChild(name);
    flight.appendChild(stat);
    stage.appendChild(flight);
    getComputedStyle(flight).opacity; /* getBoundingClientRect 只算几何不重算样式；getComputedStyle 才强制样式计算，定格 opacity 0 */
    flight.classList.add('is-on');
    await step(520, myGen); /* 等封面渐变动画完全结束 */
    diffView.style.visibility = 'hidden'; /* 封面完全出现后，背后的 diff 瞬间消失 */
    return flight;
  }

  /* 下轮 diff 内容就位：no-fade 禁用过渡——移除 is-shown 与恢复显示若同帧，
     红绿底色会以 0.3s 淡出形式闪一下（有底色无文字）；禁用后瞬时消失，无残影 */
  function resetDiffForRound(r) {
    setDiffTexts(r);
    diffView.classList.add('no-fade');
    dlines.forEach(function (d) { d.classList.remove('is-shown'); });
    diffView.classList.remove('is-sheet');
    buildDlineChars();
    diffView.style.visibility = '';
    diffView.style.opacity = ''; /* 恢复渐隐前的可见（no-fade 下瞬间生效，无闪） */
    void diffView.offsetWidth; /* 强制样式计算：无过渡状态定格后再恢复过渡 */
    diffView.classList.remove('no-fade');
  }

  /* 纸上复现新一轮 4 行内容（长短不一）：旧行淡出 → 换行宽 → 淡入 */
  async function refillPaper(r, myGen) {
    paper.classList.add('is-refilling');
    await step(300, myGen);
    lines.forEach(function (l, i) {
      l.classList.remove('is-new');
      l.dataset.w = ROUNDS[r].paperW[i];
    });
    applyWidths();
    paper.classList.remove('is-refilling');
    await step(400, myGen);
  }

  async function play() {
    var myGen = ++gen;
    try {
      for (var r = 0; r < ROUNDS.length; r++) {
        // 0) 首轮等待开场；后续轮先展示盒内堆叠片刻，再在纸上复现新内容
        if (r > 0) {
          await step(520, myGen);
          await refillPaper(r, myGen);
        } else {
          await step(650, myGen);
        }

        // 1) 笔飞到纸上，先后改写第 2、3 行；擦旧行时红行 - 飘出，写新行时绿行 + 飘出（diff 实时构建）
        await rewriteLine(lines[1], ROUNDS[r].edits[0].newW, dlines[0], dlines[1], myGen);
        await rewriteLine(lines[2], ROUNDS[r].edits[1].newW, dlines[2], dlines[3], myGen);

        // 2) 笔飞回智能体右侧
        penPos.classList.remove('is-live');
        nibTo(PEN_HOME.x, PEN_HOME.y, stageRect());
        await step(500, myGen);

        // 3) 收件箱始终显示（页面加载即在，无淡入步骤）

        // 4) 文件卡片渐变出现（diff 内容直接消失）→ genie 裁切收进盒子（先收最里，再依次向前）
        var flight = await showFileCover(r, myGen);
        await genieIntoBox(myGen, r, flight);

        // 5) 为下一轮重建 diff 区（末轮保留收盒终态）
        if (r < ROUNDS.length - 1) resetDiffForRound(r + 1);
      }
    } catch (e) {
      if (e && e.message !== 'cancelled') throw e;
    }
  }

  stage.addEventListener('click', function () {
    reset();
    play();
  });

  applyWidths();
  penPos.classList.add('is-live'); /* 初始就位瞬移 */
  nibTo(PEN_HOME.x, PEN_HOME.y, stageRect());
  void penPos.offsetWidth; /* 强制样式计算后再恢复过渡 */
  penPos.classList.remove('is-live');
  play();
})();