/* 場面5「この動画の図形とイラストは、すべて SVG」
   この動画で使った絵を並べ、光の線が通ると設計図（線だけの姿）に変わる＝中身はコード、を見せる。
   動きの層: 絵が並ぶ → 光の線が走る → 1枚ずつ線だけの姿へ → 見出し → 「画像ファイル 0枚」 → 作ったのは Claude Code */

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

.scene-proof .gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.scene-proof .gallery > * {
  grid-area: 1 / 1;
}

.scene-proof .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.scene-proof .tile {
  height: 168px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(24, 32, 44, 0.09), 0 0 0 1px rgba(24, 32, 44, 0.05);
}

.scene-proof .tile svg {
  width: 104px;
  height: 104px;
  overflow: visible;
}

/* 線だけの姿にするための下準備（はじめは線の太さ 0 で見えない） */
.scene-proof .tile svg * {
  stroke: #8fd3ff;
  stroke-width: 0;
  vector-effect: non-scaling-stroke;
}

.scene-proof .scanline {
  width: 8px;
  justify-self: start;
  background: linear-gradient(transparent, #8fd3ff 20%, #ffffff 50%, #8fd3ff 80%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 24px 6px rgba(143, 211, 255, 0.6);
  opacity: 0;
}

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

.scene-proof .title {
  font-size: 50px;
  line-height: 1.3;
}

.scene-proof .zero {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.scene-proof .zero-label {
  font-size: 28px;
  font-weight: 900;
}

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

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

.scene-proof .made {
  padding: 10px 22px 10px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  font-size: 26px;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(24, 32, 44, 0.1), 0 0 0 1px rgba(24, 32, 44, 0.05);
}

.scene-proof .made-badge {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--claude-soft);
  color: var(--claude);
  border-radius: 50%;
}

.scene-proof .made-badge svg {
  width: 32px;
  height: 32px;
}

@keyframes proof-scan {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; translate: 556px 0; }
}

@keyframes proof-wire {
  to { fill-opacity: 0.1; stroke-width: 2px; }
}

@keyframes proof-night {
  to { background: #172131; box-shadow: 0 12px 30px rgba(24, 32, 44, 0.2), 0 0 0 1px rgba(143, 211, 255, 0.35); }
}

/* ---- 動き（この場面が再生中のときだけ） ---- */

/* 光の線が列を通る時刻（左 1.45s・中 1.9s・右 2.35s）に合わせて、列ごとに線だけの姿へ変える */
.scene-proof.is-active .tile {
  animation:
    pop 0.5s var(--ease-pop) 0.1s both,
    proof-night 0.5s ease calc(var(--cue-0) + 1.45s) forwards;
}

.scene-proof.is-active .tile svg * {
  animation: proof-wire 0.5s ease calc(var(--cue-0) + 1.45s) forwards;
}

.scene-proof.is-active .tile:nth-child(2) { animation-delay: 0.18s, calc(var(--cue-0) + 1.9s); }
.scene-proof.is-active .tile:nth-child(3) { animation-delay: 0.26s, calc(var(--cue-0) + 2.35s); }
.scene-proof.is-active .tile:nth-child(4) { animation-delay: 0.34s, calc(var(--cue-0) + 1.45s); }
.scene-proof.is-active .tile:nth-child(5) { animation-delay: 0.42s, calc(var(--cue-0) + 1.9s); }
.scene-proof.is-active .tile:nth-child(6) { animation-delay: 0.5s, calc(var(--cue-0) + 2.35s); }

.scene-proof.is-active .tile:nth-child(3n + 2) svg * { animation-delay: calc(var(--cue-0) + 1.9s); }
.scene-proof.is-active .tile:nth-child(3n) svg * { animation-delay: calc(var(--cue-0) + 2.35s); }

.scene-proof.is-active .scanline {
  animation: proof-scan 1.4s ease-in-out calc(var(--cue-0) + 1.2s) both;
}

.scene-proof.is-active .kicker {
  animation: rise 0.5s var(--ease-out) 0.3s both;
}

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

.scene-proof.is-active .zero {
  animation: rise 0.5s var(--ease-out) calc(var(--cue-1) + 0.2s) both;
}

.scene-proof.is-active .zero-num {
  animation: pop 0.55s var(--ease-pop) calc(var(--cue-1) + 1.1s) both;
}

.scene-proof.is-active .made {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 0.15s) both;
}