/* ========================================
   場面5 1発うつのに、20秒（57.0秒・17の字幕）
   ----------------------------------------
     cue-1  つぎをうつまでに20秒            → 鉄砲と「20秒」
     cue-4  いち、に、さん、よん、ご          → ゲージが 1/4 まで伸びる
     cue-5  まだ、四分の一です               → 印と「四分の一」
     cue-7  敵はどこまで走ってこられる？       → 奥から旗が近づく
     cue-8  織田信長と徳川家康               → 長篠の画へ。二人が名前つきで出る（この動画で初めて）
     cue-11 川・土手・木のさくを三れつ         → 川→土手→さくの順に出す
     cue-13 鉄砲の数は、およそ千             → 注記1
     cue-14 持っていたから勝てたのではない     → 注記2
     cue-15 いちばんよく働く場所を先に作った   → 注記3
   🚨 実時間20秒のゲージは作らない（5秒ぶんだけ）
   🚨 川と柵は、武田と織田徳川のあいだに置く（ナレーションの並びと絵を一致させる）
   🚨 三段撃ち・突撃・倒れた人・血・発砲音は描かない／「挺」の字は出さない
   ======================================== */

.scene-05 {
  padding: 24px 44px 20px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
}

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

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

/* ── ① 鉄砲の弱点 ───────────────────────── */

.scene-05 .s-weak {
  display: grid;
  justify-items: center;
  gap: 14px;
  animation:
    fade 0.5s ease var(--cue-0) both,
    fade-out 0.6s ease var(--cue-8) forwards;
}
.scene-05 .gun-box {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 24px;
}
.scene-05 .gun {
  width: 260px;
  height: 78px;
  color: var(--ink);
  animation: pop 0.6s var(--ease-pop) var(--cue-0) both;
}
.scene-05 .weak {
  font-size: 26px;
  font-weight: 700;
  animation: rise 0.6s var(--ease-out) var(--cue-1) both;
}
.scene-05 .weak em {
  margin-left: 8px;
  color: var(--war);
  font-family: var(--font-en);
  font-size: 46px;
  font-style: normal;
  font-weight: 800;
}
.scene-05 .weak small {
  display: block;
  color: var(--ink-soft);
  font-size: 19px;
  animation: fade 0.5s ease var(--cue-2) both;
}

.scene-05 .gauge {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 700px;
}
.scene-05 .scale {
  display: grid;
  grid-template-columns: auto 1fr auto;
  width: 100%;
  color: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 17px;
  font-weight: 700;
}
.scene-05 .t5 {
  justify-self: start;
  margin-left: calc(25% - 18px);
  color: var(--war);
}
.scene-05 .rail {
  width: 100%;
  height: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--paper-deep);
  border-radius: 999px;
  overflow: hidden;
}
.scene-05 .fill {
  grid-area: 1 / 1;
  justify-self: start;
  width: 25%;
  height: 100%;
  background: var(--war);
  border-radius: 999px;
  scale: 0 1;
  transform-origin: left;
  /* 数え上げの声（cue-4 〜 cue-5）と同じ長さで伸ばす */
  animation: draw-x calc(var(--cue-5) - var(--cue-4)) linear var(--cue-4) forwards;
}
.scene-05 .mark {
  grid-area: 1 / 1;
  justify-self: start;
  margin-left: 25%;
  width: 4px;
  height: 100%;
  background: var(--ink);
  opacity: 0;
  animation: fade 0.4s ease var(--cue-5) both;
}
.scene-05 .quarter {
  font-size: 28px;
  font-weight: 700;
  animation: rise 0.5s var(--ease-pop) var(--cue-5) both;
}

.scene-05 .coming {
  display: grid;
  justify-items: center;
  gap: 2px;
  animation: fade 0.5s ease var(--cue-7) both;
}
.scene-05 .coming svg {
  width: 560px;
  height: 162px;
}
.scene-05 .cm {
  color: #7b4f9d;
  animation: come-near 3.4s var(--ease-out) var(--cue-7) both;
}
.scene-05 .c2 { color: #8a4b6b; animation-delay: calc(var(--cue-7) + 0.1s); }
.scene-05 .c3 { color: #7b4f9d; animation-delay: calc(var(--cue-7) + 0.2s); }
.scene-05 .c4 { color: #8a4b6b; animation-delay: calc(var(--cue-7) + 0.3s); }
.scene-05 .c5 { color: #7b4f9d; animation-delay: calc(var(--cue-7) + 0.4s); }
@keyframes come-near {
  from { opacity: 0.25; translate: 0 -40px; scale: 0.5; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.scene-05 .cap {
  color: var(--ink-soft);
  font-size: 21px;
  font-weight: 700;
}

/* ── ② 長篠のじゅんび ───────────────────── */

.scene-05 .s-naga {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  animation: fade 0.7s ease var(--cue-8) both;
}
.scene-05 .field {
  width: 100%;
  height: 100%;
  max-height: 430px;
}

.scene-05 .takeda use {
  color: #7b4f9d;
  opacity: 0;
  animation: fade 0.6s ease var(--cue-9) both;
}
.scene-05 .name {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 22px;
  font-weight: 800;
  opacity: 0;
  animation: fade 0.5s ease var(--cue-9) both;
}
.scene-05 .tag {
  fill: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 700;
}

.scene-05 .river {
  opacity: 0;
  animation: fade 0.6s ease var(--cue-11) both;
}
.scene-05 .water { fill: #b7d3e8; }
.scene-05 .ripple {
  fill: none;
  stroke: #6ea2c8;
  stroke-width: 3;
  animation: wave-flow 6s linear infinite;
}
@keyframes wave-flow {
  from { translate: 0 0; }
  to { translate: 120px 0; }
}
.scene-05 .bank {
  opacity: 0;
  animation: fade 0.6s ease calc(var(--cue-11) + 1s) both;
}
.scene-05 .soil { fill: #b99a6b; }

/* さくは手前の列から順に立てる */
.scene-05 .fences use {
  color: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: fence-up 0.5s var(--ease-pop) both;
}
.scene-05 .f-c use { animation-delay: calc(var(--cue-11) + 1.9s); }
.scene-05 .f-b use { animation-delay: calc(var(--cue-11) + 2.4s); }
.scene-05 .f-a use { animation-delay: calc(var(--cue-11) + 2.9s); }
@keyframes fence-up {
  from { opacity: 0; scale: 1 0.2; }
  to { opacity: 1; scale: 1 1; }
}
.scene-05 .three {
  opacity: 0;
  animation: fade 0.5s ease calc(var(--cue-11) + 3.3s) both;
}

.scene-05 .ash {
  color: var(--ink-soft);
  opacity: 0;
  animation: rise 0.5s var(--ease-out) calc(var(--cue-12) + 0.3s) both;
}
.scene-05 .lead {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: pop 0.6s var(--ease-pop) var(--cue-8) both;
}
.scene-05 .nobu { color: var(--nobunaga); }
.scene-05 .ieya { color: var(--ieyasu); animation-delay: calc(var(--cue-8) + 0.5s); }
.scene-05 .n-nobu { animation: fade 0.5s ease calc(var(--cue-8) + 0.4s) both; }
.scene-05 .n-ieya { animation: fade 0.5s ease calc(var(--cue-8) + 0.9s) both; }

.scene-05 .notes {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 20px;
  font-size: 21px;
  font-weight: 700;
}
.scene-05 .n1 {
  padding: 5px 14px;
  background: var(--paper-deep);
  border-radius: 999px;
  animation: fade 0.5s ease var(--cue-13) both;
}
.scene-05 .n1 em { font-style: normal; color: var(--war); }
.scene-05 .n2 {
  animation: fade 0.5s ease var(--cue-14) both;
}
.scene-05 .n2 .no {
  color: var(--war);
  font-style: normal;
}
.scene-05 .n3 {
  grid-column: 1 / -1;
  font-size: 26px;
  animation: rise 0.6s var(--ease-pop) var(--cue-15) both;
}