/* ========================================
   場面2 静的サイトは、ファイルを直す（30秒・10つの字幕）
   ----------------------------------------
     cue-1  これは、ページのファイルそのものを     → 4つの手順が1つずつ出る
     cue-3  あとから直せない、わけではありません   → 「できます」の札
     cue-5  ただ、HTMLとCSSが分かる人が必要です    → 「ただし」の札
     cue-7  ファイルを開いて、場所を探して、       → 4つの手順を順に光らせる
     cue-9  手間はかかります                      → まとめ
   🚨「直せない」と言わない。直せる／ただし知識が要る、の順で出す
   ======================================== */

.scene-static-edit {
  padding: 30px 56px var(--caption-space);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

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

/* ── 4つの手順 ───────────────────────────── */

.scene-static-edit .steps {
  width: 100%;
  height: 100%;
  max-height: 372px;
}
.scene-static-edit .box {
  fill: #fff;
  stroke: var(--st);
  stroke-width: 3.5;
}
.scene-static-edit .code {
  stroke: var(--st);
  stroke-width: 6;
  stroke-dashoffset: 1;
}
.scene-static-edit .hit {
  fill: var(--marker);
}
.scene-static-edit .glass {
  fill: none;
  stroke: var(--st);
  stroke-width: 5;
}
.scene-static-edit .glass-h {
  fill: none;
  stroke: var(--st);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.scene-static-edit .up {
  fill: none;
  stroke: var(--st);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* 手順の名前。SVG の <text> ではなく HTML で並べる（本文と同じ書体・確実に出る） */
.scene-static-edit .flow {
  display: grid;
  gap: 8px;
}
.scene-static-edit .step-names {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  font-size: 23px;
  font-weight: 800;
  text-align: center;
}
.scene-static-edit .sn {
  opacity: 0;
  animation: rise 0.5s var(--ease-out) both;
}
.scene-static-edit .sn-1 { animation-delay: calc(var(--cue-1) + 0.2s); }
.scene-static-edit .sn-2 { animation-delay: calc(var(--cue-1) + 0.6s); }
.scene-static-edit .sn-3 { animation-delay: calc(var(--cue-1) + 1.0s); }
.scene-static-edit .sn-4 { animation-delay: calc(var(--cue-1) + 1.4s); }
.scene-static-edit .arrow {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* 出るのは cue-1。そのあと cue-4 で、声に合わせてもう一度1つずつ光らせる */
.scene-static-edit .st {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    pop 0.5s var(--ease-pop) both,
    light 1s ease both;
}
.scene-static-edit .st-1 { animation-delay: calc(var(--cue-1) + 0.1s), calc(var(--cue-7) + 0.2s); }
.scene-static-edit .st-2 { animation-delay: calc(var(--cue-1) + 0.5s), calc(var(--cue-7) + 1.1s); }
.scene-static-edit .st-3 { animation-delay: calc(var(--cue-1) + 0.9s), calc(var(--cue-7) + 2.0s); }
.scene-static-edit .st-4 { animation-delay: calc(var(--cue-1) + 1.3s), calc(var(--cue-7) + 2.9s); }
@keyframes light {
  0% { scale: 1; }
  35% { scale: 1.06; }
  100% { scale: 1; }
}
.scene-static-edit .a-1 { animation: draw 0.4s ease calc(var(--cue-1) + 0.4s) forwards; }
.scene-static-edit .a-2 { animation: draw 0.4s ease calc(var(--cue-1) + 0.8s) forwards; }
.scene-static-edit .a-3 { animation: draw 0.4s ease calc(var(--cue-1) + 1.2s) forwards; }
.scene-static-edit .st-1 .code { animation: draw 0.9s ease calc(var(--cue-1) + 0.3s) forwards; }
.scene-static-edit .st-3 .code { animation: draw 0.9s ease calc(var(--cue-1) + 1.1s) forwards; }
.scene-static-edit .glass-h { animation: draw 0.5s ease calc(var(--cue-1) + 0.8s) forwards; }
.scene-static-edit .up { animation: draw 0.7s ease calc(var(--cue-1) + 1.5s) forwards; }
.scene-static-edit .hit {
  transform-box: fill-box;
  transform-origin: left center;
  scale: 0 1;
  animation: draw-x 0.5s var(--ease-out) calc(var(--cue-1) + 1.4s) forwards;
}

/* ── 下の注記 ───────────────────────────── */

.scene-static-edit .notes {
  display: grid;
  gap: 8px;
  font-size: 25px;
  font-weight: 700;
}
.scene-static-edit .tag {
  margin-right: 12px;
  padding: 3px 14px;
  font-size: 19px;
  border-radius: 999px;
}
.scene-static-edit .tag.ok {
  background: var(--key-soft);
  color: var(--key);
}
.scene-static-edit .tag.need {
  background: var(--st-soft);
  color: var(--st);
}
.scene-static-edit .n1 { animation: fade 0.5s ease var(--cue-3) both; }
.scene-static-edit .n2 { animation: fade 0.5s ease var(--cue-5) both; }
.scene-static-edit .n2 em {
  padding: 1px 8px;
  background: var(--paper-deep);
  font-family: var(--font-en);
  font-style: normal;
  border-radius: 4px;
}
.scene-static-edit .n3 {
  font-size: 28px;
  animation: rise 0.6s var(--ease-out) var(--cue-9) both;
}