/* ========================================
   場面1 まとめ役が、力をなくした（46.3秒・12の字幕）
   ----------------------------------------
   秒数は直書きしない。--cue-0 〜 --cue-11（tools/make-audio.mjs が測った実尺）に付いてくる。
     cue-0  ここは、日本。                       → 地図が出る
     cue-1  将軍という、まとめる役目の人がいました  → 丸が出る
     cue-2  その言うことを、だれも聞かなくなります  → 丸が薄くなる／見出し
     cue-3  止められる人がいなくなりました         → 地図に切れ目が走り、旗が立つ
     cue-4  はじまりは、あとつぎのけんかでした     → 線が二股に分かれる
     cue-6  今日 考えることは、二つです           → 二股が消え、問いの枠が出る
     cue-7  どうして100年も続いたのか             → 問い1
     cue-8  どうして終わったのか                 → 問い2
     cue-10 きみの町にも、お城があったかも         → 城が出る（場面12で回収する伏線）
   ======================================== */

.scene-01 {
  padding: 48px 64px 40px;
  display: grid;
  grid-template-columns: 540px minmax(0, 1fr);
  align-items: center;
  gap: 0 48px;
}

/* ── 左：日本地図 ───────────────────────────── */

.scene-01 .map-side {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.scene-01 .map {
  width: 540px;
  height: 556px;
  animation: pop 0.7s var(--ease-pop) var(--cue-0) both;
}

.scene-01 .jp {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
}

/* 切れ目。cue-3 で白い線が走り、そのあと各片がわずかに離れる */
.scene-01 .crack {
  fill: none;
  stroke: var(--paper);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s ease calc(var(--cue-3) - 0.2s) forwards;
}

.scene-01 .pieces path {
  animation: piece-apart 1.2s var(--ease-out) var(--cue-3) forwards;
}
.scene-01 .jp-kyushu { --ax: -5px; --ay: 4px; }
.scene-01 .jp-shikoku { --ax: -2px; --ay: 5px; }
.scene-01 .jp-chugoku-w { --ax: -5px; --ay: -1px; }
.scene-01 .jp-chugoku-e { --ax: -3px; --ay: -2px; }
.scene-01 .jp-kinki { --ax: 0px; --ay: 3px; }
.scene-01 .jp-tokai { --ax: 2px; --ay: -2px; }
.scene-01 .jp-chubu { --ax: 3px; --ay: -3px; }
.scene-01 .jp-kanto { --ax: 5px; --ay: 0px; }
.scene-01 .jp-tohoku-s { --ax: 4px; --ay: -4px; }
.scene-01 .jp-tohoku-n { --ax: 3px; --ay: -6px; }

@keyframes piece-apart {
  from { translate: 0 0; }
  to { translate: var(--ax, 0) var(--ay, 0); }
}

/* 旗。1本ずつ色がちがう＝国がまとまっていない。
   立ったあとは、止めずにずっと揺らし続ける（画面が死なないように） */
.scene-01 .flag {
  transform-box: fill-box;
  transform-origin: bottom center;
  opacity: 0;
  animation:
    flag-up 0.5s var(--ease-pop) calc(var(--cue-3) + var(--d, 0s)) both,
    flag-sway 3.4s ease-in-out calc(var(--cue-3) + var(--d, 0s)) infinite;
}
.scene-01 .f1 { color: #c4452c; --d: 0.10s; }
.scene-01 .f2 { color: #2f5d8c; --d: 0.22s; }
.scene-01 .f3 { color: #4b7f4a; --d: 0.34s; }
.scene-01 .f4 { color: #c9922a; --d: 0.46s; }
.scene-01 .f5 { color: #7b4f9d; --d: 0.58s; }
.scene-01 .f6 { color: #b5651d; --d: 0.70s; }
.scene-01 .f7 { color: #3a8f8f; --d: 0.82s; }
.scene-01 .f8 { color: #8a4b6b; --d: 0.94s; }
.scene-01 .f9 { color: #a3392a; --d: 1.06s; }
.scene-01 .f10 { color: #55693f; --d: 1.18s; }

@keyframes flag-up {
  from { opacity: 0; scale: 0.4; }
  to { opacity: 1; scale: 1; }
}
@keyframes flag-sway {
  0%, 100% { rotate: -2.5deg; }
  50% { rotate: 2.5deg; }
}

/* 最後に出る、きみの町のお城 */
.scene-01 .town-castle {
  color: var(--ieyasu);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation:
    pop 0.6s var(--ease-pop) var(--cue-10) both,
    castle-glow 1.6s ease-in-out calc(var(--cue-10) + 0.6s) infinite;
}
@keyframes castle-glow {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 10px rgba(47, 93, 140, 0.55)); }
}

.scene-01 .here {
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  animation: fade 0.6s ease calc(var(--cue-0) + 0.3s) both;
}

/* ── 右：ことば ───────────────────────────── */

.scene-01 .text-side {
  padding-bottom: 8px;
  height: 100%;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  align-content: center;
  gap: 18px;
}

.scene-01 .kicker {
  animation: rise 0.5s var(--ease-out) var(--cue-1) both;
}

/* まとめ役の丸。🚨 消さない。色を薄くするだけ（将軍はいなくなっていない） */
.scene-01 .boss {
  display: grid;
  grid-template-columns: 104px auto;
  align-items: center;
  gap: 16px;
  animation: rise 0.6s var(--ease-out) var(--cue-1) both;
}
.scene-01 .boss svg {
  width: 104px;
  height: 104px;
}
.scene-01 .boss .ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.9s ease calc(var(--cue-1) + 0.1s) forwards;
}
.scene-01 .boss .core {
  fill: var(--hideyoshi);
  animation: boss-fade 1.4s ease var(--cue-2) forwards;
}
.scene-01 .boss .core-text {
  fill: var(--ink);
  font-family: var(--font-mincho);
  font-size: 30px;
  font-weight: 900;
}
@keyframes boss-fade {
  from { opacity: 1; }
  to { opacity: 0.45; }
}
.scene-01 .boss-note {
  color: var(--ink-soft);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6em;
}

.scene-01 .title {
  font-size: 50px;
  animation: rise 0.7s var(--ease-out) var(--cue-2) both;
}

/* 二股と問いは、同じ場所で入れかわる */
.scene-01 .fork,
.scene-01 .asks {
  grid-row: 4;
  grid-column: 1;
  align-self: center;
}

.scene-01 .fork {
  width: 100%;
  max-width: 440px;
  height: 130px;
  animation: fade-out 0.5s ease var(--cue-6) forwards;
}
.scene-01 .fork .d {
  stroke-width: 4;
  stroke-dashoffset: 1;
}
.scene-01 .fork .stem { animation: draw 0.5s ease var(--cue-4) forwards; }
.scene-01 .fork .up { animation: draw 0.7s ease calc(var(--cue-4) + 0.45s) forwards; }
.scene-01 .fork .down { animation: draw 0.7s ease calc(var(--cue-4) + 0.45s) forwards; }
.scene-01 .fork-text {
  fill: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-4) + 0.3s) forwards;
}

.scene-01 .asks {
  display: grid;
  gap: 14px;
}
.scene-01 .ask {
  padding: 14px 20px;
  display: grid;
  grid-template-columns: 44px auto;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.45em;
  border: 3px solid var(--ink);
  border-radius: 12px;
}
.scene-01 .ask .no {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 800;
  border-radius: 50%;
}
.scene-01 .ask-1 { animation: rise 0.6s var(--ease-pop) var(--cue-7) both; }
.scene-01 .ask-2 { animation: rise 0.6s var(--ease-pop) var(--cue-8) both; }

.scene-01 .hint {
  justify-self: start;
  padding: 9px 18px;
  background: var(--ieyasu-soft);
  color: var(--ieyasu);
  font-size: 21px;
  font-weight: 700;
  border: 2px dashed var(--ieyasu);
  border-radius: 999px;
  animation: rise 0.6s var(--ease-out) var(--cue-10) both;
}