/* ========================================
   場面4 海のむこうから来たもの（48.3秒・11の字幕）
   ----------------------------------------
     cue-1  種子島に流れついた船から、鉄砲が伝わりました → 船が入る／種子島が光る
     cue-3  ばらして中を調べ、自分たちで作りはじめました → 部品が外へ出て、工房へ矢印
     cue-4  作る町が、あちこちにできます               → 鉄砲が 2→4→8 と増える
     cue-5  堺、国友、根来                            → 地図の3点が1つずつ光る（ふりがな付き）
     cue-7  ザビエルという宣教師が来て                 → 十字
     cue-8  銀がたくさんとれる山がありました           → 銀が積み上がる
     cue-9  買っていたのは、絹の糸と、火薬のもと       → 銀の交換相手は「絹の糸」
     cue-10 時計やめがねは、そのついで                 → 小さく添える
   🚨 銀の交換相手を時計・めがねにしない（買っていた主力は中国の生糸と火薬のもと）
   🚨 発砲・火花・煙は描かない
   ======================================== */

.scene-04 {
  padding: 26px 48px 22px;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 6px 28px;
}

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

/* ── 左：地図と海 ───────────────────────────── */

.scene-04 .sea {
  grid-row: 2;
}
.scene-04 .jmap {
  width: 400px;
  height: 444px;
}
.scene-04 .jp {
  fill: var(--paper-deep);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* 波。止めずに横へ流し続ける */
.scene-04 .wv {
  fill: none;
  stroke: var(--ieyasu);
  stroke-width: 3;
  opacity: 0.45;
  animation: wave-flow 5s linear infinite;
}
.scene-04 .w2 {
  opacity: 0.28;
  animation-duration: 7s;
  animation-direction: reverse;
}
@keyframes wave-flow {
  from { translate: 0 0; }
  to { translate: 88px 0; }
}

.scene-04 .the-ship {
  color: var(--ink);
  animation: sail-in 2.6s var(--ease-out) var(--cue-1) both;
}
@keyframes sail-in {
  from { opacity: 0; translate: 150px 20px; }
  to { opacity: 1; translate: 0 0; }
}

.scene-04 .spot {
  fill: var(--nobunaga);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.scene-04 .lab {
  fill: var(--ink);
  font-family: var(--font-jp);
  font-size: 19px;
  font-weight: 700;
  opacity: 0;
}
/* 種子島は「鉄砲が伝わった島」なので、点灯したあとも点滅させて位置を示し続ける */
.scene-04 .sp-tane {
  animation:
    pop 0.5s var(--ease-pop) calc(var(--cue-1) + 1.4s) both,
    blink 2.2s ease-in-out calc(var(--cue-1) + 2s) infinite;
}
.scene-04 .lb-tane { animation: fade 0.5s ease calc(var(--cue-1) + 1.6s) both; }
/* 3つの町は、名前を読み上げる拍に合わせて1つずつ */
.scene-04 .sp-sakai { animation: pop 0.5s var(--ease-pop) var(--cue-5) both; }
.scene-04 .lb-sakai { animation: fade 0.4s ease var(--cue-5) both; }
.scene-04 .sp-kuni { animation: pop 0.5s var(--ease-pop) calc(var(--cue-5) + 0.75s) both; }
.scene-04 .lb-kuni { animation: fade 0.4s ease calc(var(--cue-5) + 0.75s) both; }
.scene-04 .sp-nego { animation: pop 0.5s var(--ease-pop) calc(var(--cue-5) + 1.5s) both; }
.scene-04 .lb-nego { animation: fade 0.4s ease calc(var(--cue-5) + 1.5s) both; }

.scene-04 .cross {
  stroke: var(--ink);
  fill: none;
  opacity: 0;
  animation: pop 0.6s var(--ease-pop) var(--cue-7) both;
}
.scene-04 .cross .lab {
  stroke: none;
  opacity: 1;
}

/* ── 右：鉄砲 → 交易 ───────────────────────── */

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

.scene-04 .s-gun {
  display: grid;
  gap: 10px;
  animation:
    fade 0.6s ease var(--cue-1) both,
    fade-out 0.6s ease var(--cue-8) forwards;
}
.scene-04 .cap {
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 700;
}
.scene-04 .gun-one {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.scene-04 .big-gun {
  width: 300px;
  height: 165px;
  color: var(--ink);
}
.scene-04 .part {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0;
  animation: part-out 1.2s var(--ease-out) var(--cue-3) both;
}
.scene-04 .p1 { --px: -34px; --py: -18px; }
.scene-04 .p2 { --px: 0px; --py: -26px; animation-delay: calc(var(--cue-3) + 0.2s); }
.scene-04 .p3 { --px: 34px; --py: -18px; animation-delay: calc(var(--cue-3) + 0.4s); }
@keyframes part-out {
  from { opacity: 0; translate: 0 0; }
  to { opacity: 1; translate: var(--px) var(--py); }
}
.scene-04 .look {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 3;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.8s ease var(--cue-2) forwards;
}

.scene-04 .work {
  display: grid;
  gap: 4px;
}
.scene-04 .shop-svg {
  width: 100%;
  max-width: 460px;
  height: 200px;
  color: var(--ink);
}
.scene-04 .arrow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.7s ease calc(var(--cue-3) + 0.3s) forwards;
}
.scene-04 .chimney {
  stroke: var(--ink-soft);
  stroke-width: 5;
}
.scene-04 .mini {
  fill: var(--ink-soft);
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
}
.scene-04 .made use {
  color: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: pop 0.4s var(--ease-pop) both;
}
.scene-04 .g1 { animation-delay: var(--cue-4); }
.scene-04 .g2 { animation-delay: calc(var(--cue-4) + 0.35s); }
.scene-04 .g3 { animation-delay: calc(var(--cue-4) + 0.6s); }
.scene-04 .g4 { animation-delay: calc(var(--cue-4) + 0.8s); }
.scene-04 .g5 { animation-delay: var(--cue-6); }
.scene-04 .g6 { animation-delay: calc(var(--cue-6) + 0.2s); }
.scene-04 .g7 { animation-delay: calc(var(--cue-6) + 0.4s); }
.scene-04 .g8 { animation-delay: calc(var(--cue-6) + 0.6s); }

/* ② 売った銀・買った絹 */
.scene-04 .s-trade {
  display: grid;
  grid-template-columns: auto 120px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  animation: fade 0.7s ease var(--cue-8) both;
}
.scene-04 .side {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.scene-04 .side-ttl {
  padding: 4px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 17px;
  font-weight: 800;
  border-radius: 999px;
}
.scene-04 .out svg {
  width: 160px;
  height: 140px;
}
.scene-04 .gin {
  fill: #b9bec7;
  stroke: var(--ink);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: pop 0.5s var(--ease-pop) both;
}
.scene-04 .g-1 { animation-delay: calc(var(--cue-8) + 0.2s); }
.scene-04 .g-2 { animation-delay: calc(var(--cue-8) + 0.5s); }
.scene-04 .g-3 { animation-delay: calc(var(--cue-8) + 0.8s); }
.scene-04 .side-name {
  font-family: var(--font-mincho);
  font-size: 28px;
  font-weight: 900;
}
.scene-04 .arrow-mid svg {
  width: 120px;
  height: 60px;
}
.scene-04 .ar {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.8s ease var(--cue-9) forwards;
}
.scene-04 .goods {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.scene-04 .good {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
/* 🚨 大きさで「主力」と「ついで」を見せる */
.scene-04 .good.big {
  font-size: 26px;
  animation: rise 0.6s var(--ease-pop) calc(var(--cue-9) + 0.5s) both;
}
.scene-04 .good.big svg { width: 110px; height: 80px; color: var(--ink); }
.scene-04 .good.mid {
  font-size: 20px;
  animation: rise 0.6s var(--ease-pop) calc(var(--cue-9) + 1.6s) both;
}
.scene-04 .good.mid svg { width: 62px; height: 70px; color: var(--ink); }
.scene-04 .good.tiny {
  padding-left: 6px;
  display: block;
  color: var(--ink-soft);
  font-size: 17px;
  animation: fade 0.6s ease var(--cue-10) both;
}
.scene-04 .good.tiny em {
  margin-right: 6px;
  padding: 2px 10px;
  background: var(--paper-deep);
  font-size: 15px;
  font-style: normal;
  border-radius: 999px;
}