/* 図版（shared/visuals/*.svg）の色と再生（第 12 ラウンド P2-1・D-81）。
   正は shared/visuals/visuals.css。site/src/styles/visuals.css と tools/public/tools/assets/visuals.css は写し（node scripts/gen-tokens.mjs が書く）。
   - 舞台は 16:10（viewBox 0 0 160 100）。寸法は再生中も変えない（CLS 0）。動くのは [data-part] の transform と opacity だけ
   - 静止＝完成（変化の後）。再生は「前 → 後」を 1 回だけ。keyframes の to は静止と同じ＝終わっても跳ばない（fill both）
   - is-playing は shared/visuals/visuals.js が付け外す（hover した 1 枚・同時に 1 枚・touch／reduced-motion では付けない）
   - 色は theme.css のトークン（SVG の fill= / stroke= は単体で開いたときの既定）。道具の固有色（Yomu の緑・賽ノ河原の墨と朱）は SVG の中で固定 */
.vis { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; overflow: hidden; }
.vis [data-part] { transform-box: fill-box; transform-origin: center; }
.vis .vs-sheet { fill: var(--card); stroke: var(--ink); }
.vis .vs-line { stroke: var(--body); }
.vis .vs-ink { stroke: var(--ink); }
.vis .vs-dot { fill: var(--ink); }
.vis .vs-ghost { stroke: var(--line-strong); }
.vis .vs-mark { fill: var(--faint); }
.vis path.vs-accent { stroke: var(--accent); }
.vis circle.vs-accent { fill: var(--accent); }
/* 図版の無いツール（台帳に無い slug）の代わり: アイコンを舞台の中央に静止で置く */
.vis-icon { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  /* settle（Yomu・整う）: 記号が消え、行が左へ揃い、見出しが太り、点が付き、強調が緑で引かれる。合計 420ms */
  .vis[data-motion="settle"].is-playing [data-part="marks"] { animation: vis-fade-out 160ms linear both; }
  .vis[data-motion="settle"].is-playing [data-part="rows"] { animation: vis-settle-rows 240ms var(--ease-settle) 60ms both; }
  .vis[data-motion="settle"].is-playing [data-part="heading"] { animation: vis-fade-in 160ms linear 140ms both; }
  .vis[data-motion="settle"].is-playing [data-part="dots"] { animation: vis-pop 160ms var(--ease-out) 180ms both; }
  .vis[data-motion="settle"] [data-part="tint"] { transform-origin: left center; }
  .vis[data-motion="settle"].is-playing [data-part="tint"] { animation: vis-draw-x 180ms var(--ease-out) 240ms both; }

  /* lighten（Karuku・軽くなる）: 写真が左上へ縮み、矢印が寄り、重さの行が短くなる。合計 360ms */
  .vis[data-motion="lighten"] [data-part="photo"] { transform-origin: left top; }
  .vis[data-motion="lighten"].is-playing [data-part="photo"] { animation: vis-lighten-photo 320ms var(--ease-out) both; }
  .vis[data-motion="lighten"].is-playing [data-part="arrow"] { animation: vis-lighten-arrow 220ms var(--ease-out) 40ms both; }
  .vis[data-motion="lighten"] [data-part="weight"] { transform-origin: left center; }
  .vis[data-motion="lighten"].is-playing [data-part="weight"] { animation: vis-lighten-weight 280ms var(--ease-out) 80ms both; }

  /* bind（Tojiru・綴じる）: 散らばった 3 枚が 60ms ずつずれて揃い、最後に朱の綴じ線が上から引かれる。合計 420ms */
  .vis[data-motion="bind"].is-playing [data-part="sheet-1"] { animation: vis-bind-1 280ms var(--ease-settle) both; }
  .vis[data-motion="bind"].is-playing [data-part="sheet-2"] { animation: vis-bind-2 280ms var(--ease-settle) 60ms both; }
  .vis[data-motion="bind"].is-playing [data-part="sheet-3"] { animation: vis-bind-3 280ms var(--ease-settle) 120ms both; }
  .vis[data-motion="bind"] [data-part="bind"] { transform-origin: center top; }
  .vis[data-motion="bind"].is-playing [data-part="bind"] { animation: vis-draw-y 120ms var(--ease-out) 300ms both; }

  /* preview（Markdown Viewer・変わる）: 記法の紙の後ろから読める紙が右へ出て、見出し・点・朱の印が灯る。合計 440ms */
  .vis[data-motion="preview"].is-playing [data-part="sheet"] { animation: vis-preview-sheet 280ms var(--ease-out) both; }
  .vis[data-motion="preview"].is-playing [data-part="heading"] { animation: vis-fade-in 160ms linear 160ms both; }
  .vis[data-motion="preview"].is-playing [data-part="dots"] { animation: vis-pop 160ms var(--ease-out) 220ms both; }
  .vis[data-motion="preview"].is-playing [data-part="mark"] { animation: vis-pop 120ms var(--ease-out) 320ms both; }

  /* collapse（賽ノ河原・崩れる）: 石が積まれ、塔が 1 回揺れ、上の 2 つが落ちて小さく 1 回はねる。弾みはサイトでこれだけ。合計 500ms */
  .vis[data-motion="collapse"] [data-part="tower"] { transform-origin: center bottom; }
  .vis[data-motion="collapse"].is-playing [data-part="tower"] { animation: vis-collapse-tower 500ms linear both; }
  .vis[data-motion="collapse"].is-playing [data-part="fall-1"] { animation: vis-collapse-1 500ms linear both; }
  .vis[data-motion="collapse"].is-playing [data-part="fall-2"] { animation: vis-collapse-2 500ms linear both; }

  /* open（oka-vrc旅行記・広がる）: 重なっていた 3 枚が扇に開き、奥の 2 枚は小さく（遠く）、手前の下に朱の線。合計 420ms */
  .vis[data-motion="open"].is-playing [data-part="back-l"] { animation: vis-open-l 360ms var(--ease-out) both; }
  .vis[data-motion="open"].is-playing [data-part="back-r"] { animation: vis-open-r 360ms var(--ease-out) 30ms both; }
  .vis[data-motion="open"].is-playing [data-part="front"] { animation: vis-open-front 300ms var(--ease-out) both; }
  .vis[data-motion="open"] [data-part="path"] { transform-origin: left center; }
  .vis[data-motion="open"].is-playing [data-part="path"] { animation: vis-draw-x 160ms var(--ease-out) 260ms both; }
}

/* keyframes の from＝前、to＝後（静止と同じ）。transform と opacity だけ（preflight と site/scripts/visuals-test.mjs が見る） */
@keyframes vis-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vis-fade-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-3px); } }
@keyframes vis-pop { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
@keyframes vis-draw-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes vis-draw-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes vis-settle-rows { from { transform: translateX(9px); } to { transform: none; } }
@keyframes vis-lighten-photo { from { transform: scale(1.852); } to { transform: none; } }
@keyframes vis-lighten-arrow { from { opacity: 0; transform: translate(8px, 8px); } to { opacity: 1; transform: none; } }
@keyframes vis-lighten-weight { from { transform: scaleX(3.57); } to { transform: none; } }
@keyframes vis-bind-1 { from { transform: translate(-86px, 4px) rotate(-9deg); } to { transform: none; } }
@keyframes vis-bind-2 { from { transform: translate(-70px, -15px) rotate(6deg); } to { transform: none; } }
@keyframes vis-bind-3 { from { transform: translate(-62px, 13px) rotate(11deg); } to { transform: none; } }
@keyframes vis-preview-sheet { 0% { opacity: 0; transform: translateX(-74px); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes vis-collapse-tower {
  0%, 32% { transform: none; }
  48% { transform: rotate(3deg); }
  64% { transform: rotate(-2deg); }
  78%, 100% { transform: none; }
}
@keyframes vis-collapse-1 {
  0% { transform: translate(-46px, -33.5px) rotate(-8deg); }
  32% { transform: translate(-46px, -33.5px) rotate(-8deg); }
  48% { transform: translate(-44px, -33.5px) rotate(-5deg); animation-timing-function: var(--ease-drop); }
  82% { transform: none; animation-timing-function: var(--ease-out); }
  91% { transform: translateY(-2.5px); }
  100% { transform: none; }
}
@keyframes vis-collapse-2 {
  0% { opacity: 0; transform: translate(-66px, -57px) rotate(10deg); animation-timing-function: var(--ease-drop); }
  18% { opacity: 1; transform: translate(-66px, -43px) rotate(10deg); }
  32% { transform: translate(-66px, -43px) rotate(10deg); }
  46% { transform: translate(-63.5px, -43px) rotate(14deg); animation-timing-function: var(--ease-drop); }
  84% { transform: none; animation-timing-function: var(--ease-out); }
  93% { transform: translateY(-3px); }
  100% { opacity: 1; transform: none; }
}
@keyframes vis-open-l { from { transform: translate(36px, 5px) rotate(7deg) scale(1.3); } to { transform: none; } }
@keyframes vis-open-r { from { transform: translate(-36px, 15px) rotate(-6deg) scale(1.3); } to { transform: none; } }
@keyframes vis-open-front { from { transform: translateY(5px); } to { transform: none; } }