/* GEI 官网 v3-jp · 循环图 (墨线环 + 中心一点朱)
   inline SVG · stroke 描边展开 · reduced-motion 静态 */

.loop {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}
.loop svg {
  width: min(100%, 440px);
  height: auto;
  overflow: visible;
}

/* 墨线环 */
.loop__ring {
  fill: none;
  stroke: var(--ink-sumi);
  stroke-width: 1.25;
}
/* 节点文字 (明朝 sumi) */
.loop__node {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
  fill: var(--ink-sumi);
}
/* 细箭头 (nezumi) */
.loop__arrow { fill: var(--ink-nezumi); }
/* 中心一点朱 (唯一彩色) */
.loop__seal { fill: var(--shu); }
/* 中心 ↻ 循环符 — SVG path 描白 (替 U+21BB 字形, 不赌字体) */
.loop__seal-glyph { stroke: var(--ink-on-dark); fill: none; }

/* —— 描边动效: dash 0→full, 720ms calm. 初始为完整可见 (no-JS 安全),
      JS 标 .loop--ready 后才设 dashoffset, .is-shown 归零 —— */
/* v4: anime.js 加载成功 (.anime-on) 时, 環图描边交给 anime (choreography.js),
   这里的 CSS 描边仅作 anime 未加载时的兜底 → :not(.anime-on) 门控 */
.js:not(.anime-on) .loop--ready .loop__ring {
  stroke-dasharray: var(--loop-len, 1200);
  stroke-dashoffset: var(--loop-len, 1200);
  transition: stroke-dashoffset var(--d-reveal) var(--ease-calm);
}
.js:not(.anime-on) .loop--ready.is-shown .loop__ring { stroke-dashoffset: 0; }

/* 节点 / 朱点逐个淡入 (anime 接管时同样让出) */
.js:not(.anime-on) .loop--ready .loop__node,
.js:not(.anime-on) .loop--ready .loop__arrow,
.js:not(.anime-on) .loop--ready .loop__seal,
.js:not(.anime-on) .loop--ready .loop__seal-glyph {
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-calm);
}
.js:not(.anime-on) .loop--ready.is-shown .loop__node,
.js:not(.anime-on) .loop--ready.is-shown .loop__arrow { opacity: 1; transition-delay: 360ms; }
.js:not(.anime-on) .loop--ready.is-shown .loop__seal,
.js:not(.anime-on) .loop--ready.is-shown .loop__seal-glyph { opacity: 1; transition-delay: 620ms; }

@media (prefers-reduced-motion: reduce) {
  /* reduced-motion: 无论 anime 是否加载, 環图直接完整 (anime gate 也会渲染终态, 双保险) */
  .js .loop--ready .loop__ring,
  .loop__ring {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
  .js .loop--ready .loop__node,
  .js .loop--ready .loop__arrow,
  .js .loop--ready .loop__seal,
  .js .loop--ready .loop__seal-glyph {
    opacity: 1 !important; transition: none !important;
  }
}

/* —— 手机降级: 纵向序列 + 朱 ↻ —— */
.loop-mobile { display: none; }
@media (max-width: 600px) {
  .loop { display: none; }
  .loop-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    list-style: none; padding: 0; margin: 0;
  }
  .loop-mobile li {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .loop-mobile li::after {
    content: "│";
    display: block;
    color: var(--line-whisper);
    margin-top: var(--sp-2);
  }
  .loop-mobile li:last-child::after { content: ""; }
  .loop-mobile .loop-mobile__return {
    color: var(--shu);            /* 末尾保留唯一朱 (大号 ↻) */
    /* Newsreader Latin 子集无 U+21BB → 显式系统字体栈渲染该符号 (不掉 tofu) */
    font-family: system-ui, "Segoe UI Symbol", "Apple Symbols", sans-serif;
    font-size: 1.6rem;
  }
}