/* 場面7「この動画は、画像を1枚も使っていない」
   右のコードの「続かない」を「続けられる」に打ち直すと、上の見本の文字も変わる。
   ＝ あとから一文字ずつ直せる、をこの動画自身で見せて終わる。 */

.scene-proof {
  padding: 64px 88px 72px;
  display: grid;
  grid-template-columns: 490px minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.scene-proof .claim {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.scene-proof .zero {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--fix);
  opacity: 0;
}

.scene-proof .zero-num {
  font-family: var(--font-en);
  font-size: 176px;
  font-weight: 900;
  line-height: 0.9;
}

.scene-proof .zero-unit {
  font-size: 48px;
  font-weight: 900;
}

/* 「1枚も使っていません。」を1行に収める（10文字 × 46px） */
.scene-proof .title {
  font-size: 46px;
}

.scene-proof .made-with {
  display: flex;
  gap: 12px;
}

.scene-proof .made-with li {
  padding: 6px 18px;
  font-family: var(--font-en);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.06em;
  border: 3px solid var(--ink);
  border-radius: 10px;
  opacity: 0;
}

.scene-proof .edit {
  display: grid;
  gap: 18px;
}

.scene-proof .preview {
  padding: 22px 30px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(27, 31, 42, 0.12);
  opacity: 0;
}

.scene-proof .preview-label {
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 900;
}

.scene-proof .preview-text {
  font-size: 44px;
  font-weight: 900;
  white-space: nowrap;
}

/* 差し替わる言葉。前の言葉が縮んで消え、次の言葉が1文字ずつ現れる（幅ごと動くので「。」が浮かない） */
.scene-proof .swap-before,
.scene-proof .swap-after,
.scene-proof .code-before,
.scene-proof .code-after {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
}

.scene-proof .swap-before {
  max-width: 4em;
}

.scene-proof .swap-after {
  max-width: 0;
  color: var(--fix);
}

.scene-proof .code {
  background: var(--night);
  border-radius: 16px;
  box-shadow: 0 24px 56px rgba(27, 31, 42, 0.24);
  overflow: hidden;
  opacity: 0;
}

.scene-proof .code-bar {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 600;
}

.scene-proof .code-bar i {
  width: 12px;
  height: 12px;
  display: block;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}

.scene-proof .code-file {
  margin-left: 8px;
}

.scene-proof .code-body {
  padding: 20px 26px 24px;
  display: grid;
  gap: 6px;
  color: #e7ebf5;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 26px;
  line-height: 1.5;
}

.scene-proof .code-line {
  display: block;
  white-space: pre;
  clip-path: inset(0 100% 0 0);
}

.scene-proof .tag {
  color: #8fb4ff;
}

.scene-proof .code-before {
  max-width: 4em;
  color: #ffb3a6;
}

.scene-proof .code-after {
  max-width: 0;
  color: #7fe0c4;
}

.scene-proof .fixable {
  justify-self: start;
  font-size: 38px;
  font-weight: 900;
  opacity: 0;
}

/* ---- 動き ---- */

.scene-proof.is-active .zero { animation: pop 0.6s var(--ease-out) 0.2s both; }
.scene-proof.is-active .title { animation: rise 0.6s var(--ease-out) 0.7s both; }

.scene-proof.is-active .made-with li:nth-child(1) { animation: pop 0.45s var(--ease-out) calc(var(--cue-1) + 1s) both; }
.scene-proof.is-active .made-with li:nth-child(2) { animation: pop 0.45s var(--ease-out) calc(var(--cue-1) + 2.1s) both; }

.scene-proof.is-active .code { animation: slide-right 0.7s var(--ease-out) calc(var(--cue-1) + 0.1s) both; }
.scene-proof.is-active .code-line:nth-child(1) { animation: type-line 0.5s steps(12) calc(var(--cue-1) + 0.6s) both; }
.scene-proof.is-active .code-line:nth-child(2) { animation: type-line 0.7s steps(14) calc(var(--cue-1) + 1.1s) both; }
.scene-proof.is-active .code-line:nth-child(3) { animation: type-line 0.4s steps(6) calc(var(--cue-1) + 1.8s) both; }
.scene-proof.is-active .preview { animation: rise 0.6s var(--ease-out) calc(var(--cue-1) + 2.3s) both; }

.scene-proof.is-active .code-before {
  animation:
    select-word 0.3s ease calc(var(--cue-2) + 0.3s) both,
    shrink-word 0.3s ease-in calc(var(--cue-2) + 0.9s) forwards;
}

.scene-proof.is-active .code-after { animation: type-word 0.6s steps(5) calc(var(--cue-2) + 1.2s) both; }
.scene-proof.is-active .swap-before { animation: shrink-word 0.3s ease-in calc(var(--cue-2) + 1.3s) forwards; }
.scene-proof.is-active .swap-after { animation: type-word 0.6s steps(5) calc(var(--cue-2) + 1.6s) both; }
.scene-proof.is-active .fixable { animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 2.2s) both; }

@keyframes type-line {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes select-word {
  from { background: transparent; }
  to { background: rgba(255, 217, 74, 0.35); }
}

@keyframes shrink-word {
  from { max-width: 4em; }
  to { max-width: 0; }
}

@keyframes type-word {
  from { max-width: 0; }
  to { max-width: 5em; }
}