/* ========================================
   場面7 戦いは、勝ち負けの話じゃない（51.9秒・10の字幕）
   ----------------------------------------
     cue-0  有名な武将の顔                   → 3人のシルエット
     cue-1  名前ののこっていない人たちの話     → 3人が薄くなり、話が変わる
     cue-2  10人のうち、8人以上が村でくらす人  → ドット10個のうち8個を色づけ（場面12でもう一度使う）
     cue-4  食べ物も道具も、もっていってしまう  → 右から旗が近づく
     cue-6  お米やなべを土にうめて隠し         → 米俵が穴へ／村の人が山の城へ
     cue-7  山の上のお城は、にげこむ場所        → 山の城と、ふだんの住まいは別の建物
     cue-8  田は、実る前にかり取られました      → 稲が根元で切られて倒れる
     cue-9  きみたちのけんかとは違う           → 白に近い画面で1行だけ
   🚨 この章だけ色数を3色に落とす（墨・緑・朱の系統だけ）
   🚨 炎・倒れた人・武器・悲鳴は一切描かない
   🚨 山の上の城と、麓のふだんの住まいを取り違えさせない（逃げこむのは山の城）
   ======================================== */

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

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

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

/* ── ① 名前の残っていない人たち ───────────── */

.scene-07 .s-dots {
  display: grid;
  justify-items: center;
  gap: 18px;
  animation:
    fade 0.5s ease var(--cue-0) both,
    fade-out 0.6s ease var(--cue-3) forwards;
}
.scene-07 .famous {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--ink-soft);
  /* 有名な人から、名もない人へ話が移る＝薄くする（消しはしない） */
  animation: dim 1s ease var(--cue-1) forwards;
}
.scene-07 .famous svg {
  width: 320px;
  height: 120px;
}
.scene-07 .cap {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
}
.scene-07 .turn {
  font-size: 30px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) var(--cue-1) both;
}
.scene-07 .ten {
  display: grid;
  justify-items: center;
  gap: 12px;
  animation: fade 0.5s ease var(--cue-2) both;
}
.scene-07 .dots {
  display: grid;
  grid-template-columns: repeat(10, 56px);
  gap: 12px;
}
.scene-07 .dot {
  width: 56px;
  height: 56px;
  background: var(--paper-deep);
  border: 3px solid var(--ink-soft);
  border-radius: 50%;
}
.scene-07 .dot:not(.pale) {
  animation: to-green 0.4s ease both;
}
.scene-07 .d1 { animation-delay: calc(var(--cue-2) + 0.3s); }
.scene-07 .d2 { animation-delay: calc(var(--cue-2) + 0.42s); }
.scene-07 .d3 { animation-delay: calc(var(--cue-2) + 0.54s); }
.scene-07 .d4 { animation-delay: calc(var(--cue-2) + 0.66s); }
.scene-07 .d5 { animation-delay: calc(var(--cue-2) + 0.78s); }
.scene-07 .d6 { animation-delay: calc(var(--cue-2) + 0.9s); }
.scene-07 .d7 { animation-delay: calc(var(--cue-2) + 1.02s); }
.scene-07 .d8 { animation-delay: calc(var(--cue-2) + 1.14s); }
@keyframes to-green {
  from { background: var(--paper-deep); border-color: var(--ink-soft); }
  to { background: var(--peace); border-color: var(--peace); }
}
.scene-07 .ten-note {
  font-size: 28px;
  font-weight: 700;
}
.scene-07 .ten-note em {
  color: var(--peace);
  font-style: normal;
  font-size: 34px;
}

/* ── ② 村に、いくさが来る ───────────────── */

.scene-07 .s-village {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  animation:
    fade 0.7s ease var(--cue-3) both,
    fade-out 0.8s ease calc(var(--cue-9) - 0.6s) forwards;
}
.scene-07 .village {
  width: 100%;
  height: 100%;
  max-height: 400px;
}
.scene-07 .hill use[href="#castle"] { color: var(--ink); }
.scene-07 .yakata .box {
  fill: var(--paper);
  stroke: var(--ink-soft);
  stroke-width: 3;
}
.scene-07 .yakata .roof { fill: var(--ink-soft); }
.scene-07 .tag {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 21px;
  font-weight: 800;
}
.scene-07 .tag.small {
  fill: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
}
.scene-07 .homes use { color: var(--ink-soft); }
.scene-07 .ri {
  transform-box: fill-box;
  transform-origin: bottom center;
  animation:
    rice-sway 4s ease-in-out var(--d, 0s) infinite,
    /* 🚨 黄色→灰色ではなく「刈り取られて倒れる」形にする */
    cut-down 0.8s var(--ease-out) calc(var(--cue-8) + var(--d, 0s) * 0.3) forwards;
}
@keyframes rice-sway {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3deg; }
}
@keyframes cut-down {
  from { scale: 1 1; opacity: 1; }
  to { scale: 1 0.22; opacity: 0.75; }
}
.scene-07 .cut {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.7s ease var(--cue-8) forwards;
}

.scene-07 .pe { color: var(--peace); }
/* 村ごと、山の上の城へ逃げる */
.scene-07 .f1 { animation: flee 2.4s var(--ease-out) var(--cue-6) forwards; }
.scene-07 .f2 { animation: flee 2.4s var(--ease-out) calc(var(--cue-6) + 0.25s) forwards; }
.scene-07 .f3 { animation: flee 2.4s var(--ease-out) calc(var(--cue-6) + 0.5s) forwards; }
.scene-07 .f4 { animation: flee 2.4s var(--ease-out) calc(var(--cue-6) + 0.75s) forwards; }
@keyframes flee {
  from { translate: 0 0; scale: 1; }
  to { translate: -286px -128px; scale: 0.62; }
}
.scene-07 .hide .tw {
  color: var(--hideyoshi);
  animation: bury 1.6s var(--ease-out) calc(var(--cue-6) - 1s) forwards;
}
@keyframes bury {
  from { translate: 0 0; opacity: 1; }
  to { translate: 0 52px; opacity: 0.15; }
}
.scene-07 .hole {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 3;
  stroke-dasharray: 8 7;
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-6) - 1.2s) both;
}
/* 右から近づき続ける（止めない） */
.scene-07 .comers {
  color: var(--war);
  animation: approach 9s linear var(--cue-4) both;
}
@keyframes approach {
  from { translate: 60px 0; }
  to { translate: -170px 0; }
}

.scene-07 .notes {
  display: grid;
  gap: 4px;
  font-size: 22px;
  font-weight: 700;
}
.scene-07 .n1 { animation: fade 0.5s ease var(--cue-4) both; }
.scene-07 .n2 { animation: fade 0.5s ease var(--cue-7) both; }
.scene-07 .n3 { animation: fade 0.5s ease var(--cue-8) both; }

/* ── ③ 最後の一行 ───────────────────────── */

.scene-07 .s-last {
  display: grid;
  place-items: center;
  background: #fff;
  animation: fade 1.2s ease calc(var(--cue-9) - 0.4s) both;
}
.scene-07 .only-line {
  font-family: var(--font-mincho);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.7em;
  text-align: center;
}