/* ========================================
   場面2 京都で、大きな戦いが起きた（53.0秒・14の字幕）
   ----------------------------------------
     cue-0  1467年。                        → 年が出る
     cue-1  京都のまん中で、…              → 碁盤の目と家が描かれる
     cue-2  応仁の乱といいます               → 見出し
     cue-4  あとつぎ、だれにするか           → 3つの家で線が二股に分かれる
     cue-8  大名たちが、どちらかに味方します  → 左右の旗が中央へ寄る
     cue-9  都の多くが焼けました             → 家がまとめて灰色になる（ここで止める）
     cue-10 戦いは、ぜんぶで11年             → 年の帯が伸びる
     cue-11 将軍の力は、大きく弱まります     → 丸が半分の濃さで止まる
     cue-13 別の説もあります                 → 注記
   🚨 家の数と年数を1対1で結ばない（家は cue-9 でまとめて変え、年の帯は別の軸として伸ばす）
   🚨 3つの家は同じ大きさ・同じ線の太さ。まん中を大きくしない（将軍家の争いを主原因のように見せない）
   ======================================== */

.scene-02 {
  padding: 30px 52px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 32px;
}

/* ── 見出し ───────────────────────────── */

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

/* ── 左：碁盤の目の京都 ───────────────────── */

.scene-02 .kyoto {
  grid-row: 2;
  grid-column: 1;
  overflow: hidden;
}
.scene-02 .town {
  width: 100%;
  height: 100%;
  max-height: 390px;
}
.scene-02 .st {
  fill: none;
  stroke: #c8b183;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.2s ease calc(var(--cue-0) + 0.2s) forwards;
}
.scene-02 .hs {
  color: var(--hideyoshi);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation:
    pop 0.45s var(--ease-pop) calc(var(--cue-1) + var(--d, 0s)) both,
    burn 1.6s ease var(--cue-9) forwards;
}
.scene-02 .h1 { --d: 0.35s; }
.scene-02 .h2 { --d: 0.45s; }
.scene-02 .h3 { --d: 0.55s; }
.scene-02 .h4 { --d: 0.65s; }
.scene-02 .h5 { --d: 0.75s; }
.scene-02 .h6 { --d: 0.85s; }
.scene-02 .h7 { --d: 0.95s; }
.scene-02 .h8 { --d: 1.05s; }
.scene-02 .h9 { --d: 1.15s; }
.scene-02 .h10 { --d: 1.25s; }
.scene-02 .h11 { --d: 1.35s; }
.scene-02 .h12 { --d: 1.45s; }

/* 都が焼けた。12軒のうち9軒を cue-9 でまとめて灰色へ。
   🚨 1軒ずつ11軒まで進めない（家の数＝年数、と読ませないため）。
   残す3軒は burn を打ち消して、出たときの姿のままにする */
.scene-02 .h3,
.scene-02 .h8,
.scene-02 .h10 {
  animation: pop 0.45s var(--ease-pop) calc(var(--cue-1) + var(--d, 0s)) both;
}
@keyframes burn {
  from { color: var(--hideyoshi); opacity: 1; scale: 1; }
  to { color: #9e958a; opacity: 0.5; scale: 0.88; }
}

/* 左右から寄ってくる旗。ぶつかったところで止める */
.scene-02 .side-w {
  color: var(--nobunaga);
  opacity: 0;
  animation:
    fade 0.5s ease var(--cue-8) both,
    push-right 2.6s var(--ease-out) var(--cue-8) forwards;
}
.scene-02 .side-e {
  color: var(--ieyasu);
  opacity: 0;
  animation:
    fade 0.5s ease var(--cue-8) both,
    push-left 2.6s var(--ease-out) var(--cue-8) forwards;
}
@keyframes push-right {
  from { translate: 0 0; }
  to { translate: 172px 0; }
}
@keyframes push-left {
  from { translate: 0 0; }
  to { translate: -172px 0; }
}

/* ── 右：3つの家のあとつぎ争い ───────────────── */

.scene-02 .houses-fork {
  grid-row: 2;
  grid-column: 2;
  display: grid;
  gap: 6px;
}
.scene-02 .hf {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
}
.scene-02 .hf svg {
  width: 132px;
  height: 106px;
  color: var(--ink-soft);
}
.scene-02 .hf .fk {
  stroke-width: 4;
  stroke-dashoffset: 1;
}
.scene-02 .hf .who {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 3;
  opacity: 0;
}
.scene-02 .hf-1 { animation: rise 0.5s var(--ease-out) var(--cue-4) both; }
.scene-02 .hf-2 { animation: rise 0.5s var(--ease-out) calc(var(--cue-4) + 0.4s) both; }
.scene-02 .hf-3 { animation: rise 0.5s var(--ease-out) calc(var(--cue-4) + 0.8s) both; }
.scene-02 .hf-1 .fk { animation: draw 0.8s ease calc(var(--cue-4) + 0.45s) forwards; }
.scene-02 .hf-2 .fk { animation: draw 0.8s ease calc(var(--cue-4) + 0.85s) forwards; }
.scene-02 .hf-3 .fk { animation: draw 0.8s ease calc(var(--cue-4) + 1.25s) forwards; }
.scene-02 .hf-1 .who { animation: fade 0.4s ease calc(var(--cue-4) + 1.2s) forwards; }
.scene-02 .hf-2 .who { animation: fade 0.4s ease calc(var(--cue-4) + 1.6s) forwards; }
.scene-02 .hf-3 .who { animation: fade 0.4s ease calc(var(--cue-4) + 2.0s) forwards; }
.scene-02 .hf-3 span {
  color: var(--ink-soft);
}

.scene-02 .fork-note {
  justify-self: center;
  padding: 7px 16px;
  background: var(--paper-deep);
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  border-radius: 999px;
  animation: fade 0.5s ease calc(var(--cue-4) + 0.2s) both;
}

/* ── 下：11年・将軍の力・注記 ───────────────── */

.scene-02 .foot {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 28px;
}
.scene-02 .years {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  font-size: 30px;
  font-weight: 800;
}
.scene-02 .years em {
  font-style: normal;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-10) + 1.1s) forwards;
}
.scene-02 .years .bar {
  height: 18px;
  display: block;
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.scene-02 .years .bar i {
  height: 100%;
  display: block;
  background: var(--war);
  scale: 0 1;
  transform-origin: left;
  animation: draw-x 2.6s var(--ease-out) var(--cue-10) forwards;
}
.scene-02 .boss-weak {
  grid-column: 1;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 700;
  animation: rise 0.5s var(--ease-out) var(--cue-11) both;
}
.scene-02 .boss-weak .dot {
  width: 30px;
  height: 30px;
  display: block;
  background: var(--hideyoshi);
  border-radius: 50%;
  animation: boss-fade 1.2s ease calc(var(--cue-11) + 0.3s) forwards;
}
@keyframes boss-fade {
  from { opacity: 1; }
  to { opacity: 0.45; }
}
.scene-02 .caveat {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-13) both;
}