/* ==========================================================================
   本文の図(issue #10): オープニング映像と同じ絵を、章の中で1回だけ描く。
   SVG は design/reel/figs.mjs の生成物(手で直さない)。開始の合図は assets/js/figs.js。
   既定は完成形。figs.js が .is-armed を付けたときだけ「描く前」の姿にし、.is-in で完成形へ移る。
   描く前の間は transition を切る(切らないと、.is-armed を付けた瞬間に完成形から描く前へ逆に動く)
   (JS が無い・prefers-reduced-motion では完成形のまま)。
   ========================================================================== */
.fig { margin: 0 auto 44px; }
.fig__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 2px rgba(5, 8, 12, 0.9)); }
.fig__svg text { font-family: var(--font-en); letter-spacing: 0.08em; }
.fig--pmo { max-width: 720px; }
.fig--fde { max-width: 520px; }
.fig--gantt text { font-size: 17px; }
.fig--gantt .g-today text { font-size: 14px; }
.fig--screen .s-btn { font-family: var(--font); font-weight: 600; font-size: 26px; letter-spacing: 0.04em; }
.fig--motif text { font-size: 19px; }
.s-ripple { opacity: 0; }
/* 左右組みの図: 躑躅や雨の上でも線が読めるよう、図の背後にだけ柔らかい暗がりを敷く(四角い面は作らない) */
.split > .fig--fde { width: 100%; max-width: 640px; justify-self: start; }   /* 画面見本は縦に長いので、項目の列と同じ高さに収める。余った幅は右に残し、項目の列に寄せる */
.split > .fig { background: radial-gradient(closest-side, rgba(5, 8, 12, 0.6), rgba(5, 8, 12, 0.35) 60%, rgba(5, 8, 12, 0)); }
.work__fig { display: block; margin: 0 0 6px; }
.work__fig .fig__svg { max-width: 220px; }   /* 1枚目のカードは左の余白が無く幅が広いので、上限で4枚の高さを揃える */

@media (max-width: 820px) {
  .fig { margin-bottom: 32px; }
  .fig--gantt text { font-size: 24px; }   /* 狭幅では縮むので、図の中の字を大きめに持つ */
  .fig--gantt .g-today text { font-size: 20px; }
  .work__fig .fig__svg { max-width: 360px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* ---- 共通の動き(遅れは --d) ---- */
  .is-armed:not(.is-in) * { transition: none !important; }
  .is-armed :is(.g-grid, .g-lbl, .g-bar, .g-fill, .g-dep, .g-ms, .g-today, .s-bg, .s-frame, .s-tok, .s-part, .s-btn, .s-ptr, .p-in, .p-line, .p-grow, .p-rise, .p-pop, .p-draw, .p-scan) {
    transition-delay: var(--d, 0ms);
    transition-timing-function: var(--ease);
  }
  .is-armed :is(.g-grid, .g-bar, .g-fill, .p-line, .p-grow) { transform-box: fill-box; }

  /* ---- PMO: 格子が立ち、棒が伸び、依存の線が引かれ、TODAY が走る ---- */
  .is-armed .g-grid { transform-origin: center; transition-property: transform; transition-duration: 0.7s; }
  .is-armed:not(.is-in) .g-grid { transform: scaleY(0); }
  .is-armed .g-lbl { transition: opacity 0.4s ease var(--d); }
  .is-armed:not(.is-in) .g-lbl { opacity: 0; }
  .is-armed :is(.g-bar, .g-fill) { transform-origin: left center; transition-property: transform; transition-duration: 0.7s; }
  .is-armed .g-fill { transition-duration: 1.6s; }
  .is-armed:not(.is-in) :is(.g-bar, .g-fill) { transform: scaleX(0); }
  .is-armed .g-dep { stroke-dasharray: 1; transition-property: stroke-dashoffset; transition-duration: 0.45s; }
  .is-armed:not(.is-in) .g-dep { stroke-dashoffset: 1; }
  .is-armed .g-ms { transform-box: fill-box; transform-origin: center; transition-property: opacity, scale; transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.34, 1.9, 0.5, 1); }
  .is-armed:not(.is-in) .g-ms { opacity: 0; scale: 0; }
  .is-armed .g-today { transition-property: transform, opacity; transition-duration: 1.3s; transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
  .is-armed:not(.is-in) .g-today { transform: translateX(var(--dx, 0)); opacity: 0; }

  /* ---- FDE: 字句が打たれ(.s-part の scaleX)、画面の部品へ組み替わる(.s-tok の --map → 元の位置) ---- */
  .is-armed .s-frame { stroke-dasharray: 1; transition-property: stroke-dashoffset; transition-duration: 0.5s; }
  .is-armed:not(.is-in) .s-frame { stroke-dashoffset: 1; }
  .is-armed .s-tok { transition-delay: var(--m, 0ms); transition-property: transform; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1); }
  .is-armed:not(.is-in) .s-tok { transform: var(--map); }
  .is-armed .s-part {
    transform-box: fill-box; transform-origin: left center;
    transition: transform 0.14s var(--ease) var(--d), fill 0.4s ease var(--m, 0ms), stroke 0.4s ease calc(var(--m, 0ms) + 0.1s);
  }
  .is-armed:not(.is-in) .s-part { transform: scaleX(0); fill: var(--code); stroke: rgba(244, 239, 230, 0); }
  .is-armed .s-bg { transition: opacity 0.4s ease var(--d); }
  .is-armed:not(.is-in) .s-bg { opacity: 0; }
  .is-armed .s-btn { transition: opacity 0.3s ease var(--d); }
  .is-armed:not(.is-in) .s-btn { opacity: 0; }
  .is-armed .s-ptr { transition-property: transform, opacity; transition-duration: 0.3s; }
  .is-armed:not(.is-in) .s-ptr { transform: translate(210px, 214px); opacity: 0; }
  .is-armed.is-in .s-ripple { transform-box: fill-box; transform-origin: center; animation: fig-ripple 0.4s ease-out 2.05s both; }

  /* ---- 製品: 線が引かれ、面が立ち上がる ---- */
  .is-armed .p-in { transition: opacity 0.4s ease var(--d); }
  .is-armed:not(.is-in) .p-in { opacity: 0; }
  .is-armed .p-line { transform-origin: left top; transition-property: transform; transition-duration: 0.5s; }
  .is-armed:not(.is-in) .p-line { transform: scale(0); }
  .is-armed .p-grow { transform-origin: left center; transition-property: transform; transition-duration: 0.35s; transition-timing-function: cubic-bezier(0.34, 1.6, 0.5, 1); }
  .is-armed:not(.is-in) .p-grow { transform: scaleX(0); }
  .is-armed .p-rise { transition-property: opacity, transform; transition-duration: 0.5s; }
  .is-armed:not(.is-in) .p-rise { opacity: 0; transform: translateY(24px); }
  .is-armed .p-pop { transform-box: fill-box; transform-origin: center; transition-property: opacity, scale; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.34, 1.9, 0.5, 1); }
  .is-armed:not(.is-in) .p-pop { opacity: 0; scale: 0; }
  .is-armed .p-draw { stroke-dasharray: 1; transition-property: stroke-dashoffset; transition-duration: 0.6s; }
  .is-armed:not(.is-in) .p-draw { stroke-dashoffset: 1; }
  .is-armed .p-scan { opacity: 0; }
  .is-armed.is-in .p-scan { animation: fig-scan 0.5s cubic-bezier(0.65, 0, 0.35, 1) var(--d) both; }
}
@keyframes fig-ripple { 0% { opacity: 1; scale: 0.15; } 100% { opacity: 0; scale: 1.6; } }
@keyframes fig-scan { 0% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(340px); } }