/* ========================================
   場面6 道をあけて、市をひらく（53.0秒・11の字幕）
   ----------------------------------------
     cue-1  関所をなくしたことでした        → 道の上にゲートが5つ／荷車が止まるたびにお金が落ちる
     cue-3  お金をかけずに行き来できます     → ゲートが消え、荷車が走りきる
     cue-4  楽市という仕組みもあります       → 道の先に町（家と店）
     cue-5  考えたのは信長ではありません     → 年の横軸。先にやっていた大名の点が左
     cue-8  明智光秀にうらぎられて           → ふりがな付きで1枚出す
     cue-9  東は群馬・山梨、西は兵庫・鳥取    → 地図を5枚だけ塗る
   🚨 西半分（九州・四国・中国西）と東北は塗らない。塗るのは 近畿・東海・中部・中国東・関東 の5枚
   🚨 倒れる動き・血は描かない（シルエットの色を落とすだけ）
   🚨 画面にもナレーションにも「通行料」という語を出さない
   ======================================== */

.scene-06 {
  padding: 26px 48px 22px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
}

.scene-06 .head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.scene-06 .kicker { animation: rise 0.5s var(--ease-out) var(--cue-0) both; }
.scene-06 .title {
  font-size: 38px;
  animation: slide-right 0.6s var(--ease-out) var(--cue-0) both;
}

.scene-06 .stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.scene-06 .step { grid-area: 1 / 1; }

/* ── ① 道と関所 ───────────────────────── */

.scene-06 .s-road {
  display: grid;
  gap: 8px;
  animation:
    fade 0.5s ease var(--cue-0) both,
    fade-out 0.6s ease var(--cue-5) forwards;
}
.scene-06 .road {
  width: 100%;
  height: 264px;
}
.scene-06 .way {
  fill: none;
  stroke: var(--line);
  stroke-width: 10;
  stroke-dasharray: 26 18;
  animation: road-flow 2.6s linear infinite;
}
@keyframes road-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -44; }
}
.scene-06 .gt {
  color: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation:
    pop 0.4s var(--ease-pop) both,
    fade-out 0.6s ease both;
}
.scene-06 .gt-1 { animation-delay: calc(var(--cue-1) + 0.1s), calc(var(--cue-3) + 0.1s); }
.scene-06 .gt-2 { animation-delay: calc(var(--cue-1) + 0.25s), calc(var(--cue-3) + 0.3s); }
.scene-06 .gt-3 { animation-delay: calc(var(--cue-1) + 0.4s), calc(var(--cue-3) + 0.5s); }
.scene-06 .gt-4 { animation-delay: calc(var(--cue-1) + 0.55s), calc(var(--cue-3) + 0.7s); }
.scene-06 .gt-5 { animation-delay: calc(var(--cue-1) + 0.7s), calc(var(--cue-3) + 0.9s); }

/* 荷車。関所のあいだは止まりながら、なくなったら走りきる */
.scene-06 .cart {
  color: var(--ink);
  animation: cart-go 14s linear var(--cue-1) both;
}
@keyframes cart-go {
  0% { translate: 0 0; }
  8% { translate: 140px 0; }
  14% { translate: 140px 0; }
  22% { translate: 330px 0; }
  28% { translate: 330px 0; }
  36% { translate: 520px 0; }
  42% { translate: 520px 0; }
  50% { translate: 710px 0; }
  56% { translate: 710px 0; }
  64% { translate: 900px 0; }
  70% { translate: 900px 0; }
  100% { translate: 1000px 0; }
}
.scene-06 .coin {
  fill: var(--hideyoshi);
  stroke: var(--ink);
  stroke-width: 2;
  opacity: 0;
  animation:
    coin-drop 0.6s var(--ease-out) both,
    dim 0.8s ease var(--cue-3) forwards;
}
.scene-06 .cn-1 { animation-delay: calc(var(--cue-1) + 1.2s), var(--cue-3); }
.scene-06 .cn-2 { animation-delay: calc(var(--cue-1) + 3.2s), var(--cue-3); }
.scene-06 .cn-3 { animation-delay: calc(var(--cue-1) + 5.2s), var(--cue-3); }
.scene-06 .cn-4 { animation-delay: calc(var(--cue-1) + 7.2s), var(--cue-3); }
.scene-06 .cn-5 { animation-delay: calc(var(--cue-1) + 9.2s), var(--cue-3); }
@keyframes coin-drop {
  from { opacity: 0; translate: 0 -22px; }
  to { opacity: 1; translate: 0 0; }
}

.scene-06 .road-note {
  justify-self: center;
  font-size: 23px;
  font-weight: 700;
  animation: fade 0.5s ease var(--cue-2) both;
}
.scene-06 .road-note em {
  padding: 3px 12px;
  background: var(--paper-deep);
  font-style: normal;
  border-radius: 999px;
}

.scene-06 .town {
  display: grid;
  justify-items: center;
  gap: 4px;
  animation: fade 0.6s ease var(--cue-4) both;
}
.scene-06 .town-svg {
  width: 100%;
  max-width: 1000px;
  height: 170px;
}
.scene-06 .tw {
  color: var(--hideyoshi);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pop 0.45s var(--ease-pop) both;
}
.scene-06 .t1 { animation-delay: calc(var(--cue-4) + 0.1s); }
.scene-06 .t2 { animation-delay: calc(var(--cue-4) + 0.25s); }
.scene-06 .t3 { animation-delay: calc(var(--cue-4) + 0.4s); }
.scene-06 .t4 { animation-delay: calc(var(--cue-4) + 0.55s); }
.scene-06 .t5 { animation-delay: calc(var(--cue-4) + 0.7s); }
.scene-06 .t6 { animation-delay: calc(var(--cue-4) + 0.85s); }
.scene-06 .t7 { animation-delay: calc(var(--cue-4) + 1s); }
.scene-06 .t8 { animation-delay: calc(var(--cue-4) + 1.15s); }
/* 人は止めずに行き来させ続ける（町が生きている感じ） */
.scene-06 .wk {
  fill: var(--ink-soft);
  animation: walk 4.6s ease-in-out infinite;
}
.scene-06 .wk:nth-child(2) { animation-delay: -1.1s; }
.scene-06 .wk:nth-child(3) { animation-delay: -2.2s; }
.scene-06 .wk:nth-child(4) { animation-delay: -3.3s; }
.scene-06 .wk:nth-child(5) { animation-delay: -0.6s; }
@keyframes walk {
  0%, 100% { translate: -40px 0; }
  50% { translate: 40px 0; }
}
.scene-06 .raku {
  font-size: 23px;
  font-weight: 700;
}
.scene-06 .raku em {
  padding: 3px 12px;
  background: var(--nobunaga-soft);
  color: var(--nobunaga);
  font-style: normal;
  border-radius: 999px;
}

/* ── ② 先にやっていた人がいた ───────────── */

.scene-06 .s-years {
  display: grid;
  justify-items: center;
  gap: 16px;
  animation:
    fade 0.6s ease var(--cue-5) both,
    fade-out 0.6s ease var(--cue-8) forwards;
}
.scene-06 .axis {
  width: 900px;
  height: 200px;
}
.scene-06 .line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.2s ease var(--cue-5) forwards;
}
.scene-06 .pt circle {
  fill: var(--ink-soft);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop 0.45s var(--ease-pop) both;
}
.scene-06 .pt text {
  fill: var(--ink);
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.4s ease both;
}
/* 先にやっていた2点を先に光らせる */
.scene-06 .p-1 circle,
.scene-06 .p-1 text { animation-delay: calc(var(--cue-5) + 0.6s); }
.scene-06 .p-2 circle,
.scene-06 .p-2 text { animation-delay: calc(var(--cue-5) + 1s); }
.scene-06 .p-3 circle,
.scene-06 .p-3 text { animation-delay: var(--cue-7); }
.scene-06 .p-4 circle,
.scene-06 .p-4 text { animation-delay: calc(var(--cue-7) + 0.6s); }
.scene-06 .p-1 circle,
.scene-06 .p-2 circle { fill: var(--peace); }
.scene-06 .p-3 circle,
.scene-06 .p-4 circle { fill: var(--nobunaga); }
.scene-06 .side-note {
  fill: var(--peace);
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-6) + 0.2s) both;
}
.scene-06 .side-note.nb {
  fill: var(--nobunaga);
  animation-delay: var(--cue-7);
}
.scene-06 .first-note {
  font-size: 29px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) var(--cue-6) both;
}

/* ── ③ 信長の力がとどいた範囲 ───────────── */

.scene-06 .s-range {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  animation: fade 0.7s ease var(--cue-8) both;
}
.scene-06 .rmap {
  width: 330px;
  height: 340px;
}
.scene-06 .s-range .jp {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
/* 🚨 塗るのは5枚だけ（近畿・東海・中部・中国東・関東）。西半分と東北は塗らない */
.scene-06 .jp-kinki,
.scene-06 .jp-tokai,
.scene-06 .jp-chubu,
.scene-06 .jp-chugoku-e,
.scene-06 .jp-kanto {
  animation: to-nobu 0.7s ease both;
}
.scene-06 .jp-kinki { animation-delay: var(--cue-9); }
.scene-06 .jp-tokai { animation-delay: calc(var(--cue-9) + 0.45s); }
.scene-06 .jp-chubu { animation-delay: calc(var(--cue-9) + 0.9s); }
.scene-06 .jp-chugoku-e { animation-delay: calc(var(--cue-9) + 1.35s); }
.scene-06 .jp-kanto { animation-delay: calc(var(--cue-9) + 1.8s); }
@keyframes to-nobu {
  from { fill: var(--paper-deep); }
  to { fill: var(--nobunaga-soft); }
}

.scene-06 .range-side {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.scene-06 .who-n {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 14px;
  /* 🚨 倒れる動き・血は描かない。色を落とすだけ */
  animation:
    rise 0.6s var(--ease-out) var(--cue-8) both,
    dim 1.4s ease calc(var(--cue-8) + 2.2s) forwards;
}
.scene-06 .who-n svg {
  width: 96px;
  height: 111px;
  color: var(--nobunaga);
}
.scene-06 .who-name {
  font-family: var(--font-mincho);
  font-size: 34px;
  font-weight: 900;
}
.scene-06 .betray {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6em;
  animation: fade 0.6s ease calc(var(--cue-8) + 1.6s) both;
}
.scene-06 .betray em {
  padding: 2px 10px;
  background: var(--paper-deep);
  font-style: normal;
  border-radius: 999px;
}
.scene-06 .range-note {
  padding: 14px 20px;
  background: var(--nobunaga-soft);
  color: var(--ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.6em;
  border-radius: 12px;
  animation: rise 0.6s var(--ease-out) var(--cue-10) both;
}
.scene-06 .range-note strong {
  display: block;
  color: var(--nobunaga);
  font-size: 27px;
}