/* 場面4「Claude Code は、SVG が得意」
   左で窓辺の机の絵が線から描かれ、右にその絵のコードが1行ずつ出る。
   「拡大しても、ぼやけません」で植物へ寄り、「一か所直すだけ」でコードの色を書き換えると葉の色が変わる。
   動きの層: 見出し → 線を描く → 塗る → コードが出る → 寄る → 戻る → 色の値を打ち直す → 葉の色が変わる（湯気はずっと揺れる） */

.scene-svg {
  padding: 44px 70px 40px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.scene-svg .head {
  display: grid;
  gap: 12px;
}

.scene-svg .title {
  font-size: 52px;
}

.scene-svg .workbench {
  display: grid;
  grid-template-columns: 600px minmax(0, 1fr);
  gap: 32px;
}

.scene-svg .canvas-card {
  margin: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 16px 40px rgba(24, 32, 44, 0.1), 0 0 0 1px rgba(24, 32, 44, 0.05);
  overflow: hidden;
}

.scene-svg .canvas-card > * {
  grid-area: 1 / 1;
}

.scene-svg .desk {
  width: 100%;
  height: auto;
  display: block;
}

.scene-svg .zoom {
  transform-box: view-box;
  transform-origin: 482px 240px;
}

.scene-svg .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
}

.scene-svg .leaves {
  fill: #6fbf73;
}

.scene-svg .screen {
  opacity: 0;
}

.scene-svg .steam {
  stroke: #b3bcc8;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

.scene-svg .loupe {
  margin: 16px;
  align-self: start;
  justify-self: start;
  padding: 8px 16px 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  border-radius: 999px;
  opacity: 0;
}

.scene-svg .loupe::before {
  width: 22px;
  height: 22px;
  display: block;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 6px 6px 0 -4px #fff;
  content: "";
}

.scene-svg .code-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  align-items: start;
  background: var(--night);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(24, 32, 44, 0.22);
  overflow: hidden;
}

.scene-svg .code-bar {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f2838;
}

.scene-svg .code-bar span {
  width: 12px;
  height: 12px;
  background: #3a4558;
  border-radius: 50%;
}

.scene-svg .code-bar b {
  margin-left: 10px;
  color: #aeb8c8;
  font-family: var(--font-code);
  font-size: 16px;
  font-weight: 500;
}

.scene-svg .code-body {
  padding: 18px 20px;
  display: grid;
  align-content: start;
  gap: 9px;
  color: #e6ebf3;
  font-family: var(--font-code);
  font-size: 17px;
  line-height: 1.45;
}

.scene-svg .ln {
  padding: 2px 8px;
  white-space: nowrap;
  border-radius: 6px;
  clip-path: inset(0 100% 0 0);
}

.scene-svg .ln.is-in {
  padding-left: calc(8px + 2ch);
}

.scene-svg .ln.is-in2 {
  padding-left: calc(8px + 4ch);
}

.scene-svg .ln i {
  color: #7fb6ff;
  font-style: normal;
}

.scene-svg .ln u {
  color: #f0c674;
  text-decoration: none;
}

.scene-svg .ln s {
  color: #9fe6a0;
  text-decoration: none;
}

.scene-svg .swap {
  display: inline-grid;
}

.scene-svg .swap > * {
  grid-area: 1 / 1;
}

.scene-svg .swap .new {
  color: #ffb870;
  clip-path: inset(0 100% 0 0);
}

.scene-svg .edit-note {
  margin: 0 20px 20px;
  padding: 10px 16px;
  justify-self: start;
  background: var(--marker);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  border-radius: 12px;
  opacity: 0;
}

/* 植物を中心に寄せて拡大する（拡大の中心は植物、そのあと絵の真ん中へ動かす） */
@keyframes svg-zoom-in {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-196px, -30px) scale(2.2); }
}

@keyframes svg-zoom-out {
  from { transform: translate(-196px, -30px) scale(2.2); }
  to { transform: translate(0, 0) scale(1); }
}

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

@keyframes svg-strike {
  to { color: #6b7688; text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0; }
}

@keyframes svg-highlight {
  to { background: rgba(255, 224, 122, 0.16); box-shadow: inset 3px 0 0 var(--marker); }
}

@keyframes svg-leaf {
  from { fill: #6fbf73; }
  to { fill: #f0a04b; }
}

@keyframes svg-steam {
  0% { opacity: 0; translate: 0 6px; }
  40% { opacity: 1; }
  100% { opacity: 0; translate: 0 -10px; }
}

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

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

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

.scene-svg.is-active .canvas-card {
  animation: rise 0.7s var(--ease-out) 0.5s both;
}

.scene-svg.is-active .code-panel {
  animation: rise 0.7s var(--ease-out) 0.65s both;
}

/* 線を描いてから塗る。部品ごとに少しずつずらす */
.scene-svg.is-active .d {
  animation:
    draw 1.2s ease-in-out calc(var(--cue-1) + 0.1s) both,
    fill-in 0.7s ease calc(var(--cue-1) + 1.9s) both;
}

.scene-svg.is-active .d:nth-child(2) { animation-delay: calc(var(--cue-1) + 0.25s), calc(var(--cue-1) + 2s); }
.scene-svg.is-active .d:nth-child(3) { animation-delay: calc(var(--cue-1) + 0.4s), calc(var(--cue-1) + 2.1s); }
.scene-svg.is-active .d:nth-child(4) { animation-delay: calc(var(--cue-1) + 0.55s), calc(var(--cue-1) + 2.2s); }
.scene-svg.is-active .d:nth-child(5) { animation-delay: calc(var(--cue-1) + 0.7s), calc(var(--cue-1) + 2.3s); }
.scene-svg.is-active .d:nth-child(6) { animation-delay: calc(var(--cue-1) + 0.85s), calc(var(--cue-1) + 2.4s); }
.scene-svg.is-active .d:nth-child(7) { animation-delay: calc(var(--cue-1) + 1s), calc(var(--cue-1) + 2.5s); }
.scene-svg.is-active .d:nth-child(8) { animation-delay: calc(var(--cue-1) + 1.15s), calc(var(--cue-1) + 2.6s); }
.scene-svg.is-active .d:nth-child(10) { animation-delay: calc(var(--cue-1) + 1.3s), calc(var(--cue-1) + 2.7s); }
.scene-svg.is-active .d:nth-child(11) { animation-delay: calc(var(--cue-1) + 1.45s), calc(var(--cue-1) + 2.8s); }
.scene-svg.is-active .d:nth-child(13) { animation-delay: calc(var(--cue-1) + 1.6s), calc(var(--cue-1) + 2.9s); }
.scene-svg.is-active .d:nth-child(15) { animation-delay: calc(var(--cue-1) + 0.2s), calc(var(--cue-1) + 2s); }
.scene-svg.is-active .d:nth-child(16) { animation-delay: calc(var(--cue-1) + 0.45s), calc(var(--cue-1) + 2.1s); }
.scene-svg.is-active .d:nth-child(17) { animation-delay: calc(var(--cue-1) + 0.6s), calc(var(--cue-1) + 2.2s); }
.scene-svg.is-active .d:nth-child(18) { animation-delay: calc(var(--cue-1) + 0.8s), calc(var(--cue-1) + 2.3s); }
.scene-svg.is-active .leaves .d:nth-child(1) { animation-delay: calc(var(--cue-1) + 1.7s), calc(var(--cue-1) + 3s); }
.scene-svg.is-active .leaves .d:nth-child(2) { animation-delay: calc(var(--cue-1) + 1.8s), calc(var(--cue-1) + 3.05s); }
.scene-svg.is-active .leaves .d:nth-child(3) { animation-delay: calc(var(--cue-1) + 1.9s), calc(var(--cue-1) + 3.1s); }

.scene-svg.is-active .screen {
  animation: fade 0.6s ease calc(var(--cue-1) + 2.8s) both;
}

.scene-svg.is-active .steam {
  animation: svg-steam 2.4s ease-in-out calc(var(--cue-1) + 3.2s) infinite both;
}

/* 寄る → 戻る（戻る動きは、始まるまで前の状態を上書きしないよう forwards だけにする） */
.scene-svg.is-active .zoom {
  animation:
    svg-zoom-in 0.9s var(--ease-out) calc(var(--cue-2) + 0.05s) both,
    svg-zoom-out 0.8s var(--ease-out) calc(var(--cue-3) + 0.1s) forwards;
}

.scene-svg.is-active .loupe {
  animation:
    pop 0.45s var(--ease-pop) calc(var(--cue-2) + 0.5s) both,
    fade-out 0.3s ease calc(var(--cue-3) + 0.05s) forwards;
}

.scene-svg.is-active .ln {
  animation: svg-type 0.6s steps(22) calc(var(--cue-1) + 0.2s) both;
}

.scene-svg.is-active .ln:nth-child(2) { animation-delay: calc(var(--cue-1) + 0.5s); }
.scene-svg.is-active .ln:nth-child(3) { animation-delay: calc(var(--cue-1) + 0.8s); }
.scene-svg.is-active .ln:nth-child(4) { animation-delay: calc(var(--cue-1) + 1.1s); }
.scene-svg.is-active .ln:nth-child(5) { animation-delay: calc(var(--cue-1) + 1.4s); }
.scene-svg.is-active .ln:nth-child(6) { animation-delay: calc(var(--cue-1) + 1.7s); }
.scene-svg.is-active .ln:nth-child(7) { animation-delay: calc(var(--cue-1) + 2s); }
.scene-svg.is-active .ln:nth-child(8) { animation-delay: calc(var(--cue-1) + 2.3s); }

.scene-svg.is-active .ln.is-target {
  animation:
    svg-type 0.6s steps(22) calc(var(--cue-1) + 1.4s) both,
    svg-highlight 0.4s ease calc(var(--cue-3) + 0.4s) forwards;
}

.scene-svg.is-active .swap .old {
  animation: svg-strike 0.5s ease calc(var(--cue-3) + 1s) forwards;
}

.scene-svg.is-active .swap .new {
  animation: svg-type 0.6s steps(9) calc(var(--cue-3) + 1.4s) both;
}

.scene-svg.is-active .edit-note {
  animation: pop 0.45s var(--ease-pop) calc(var(--cue-3) + 0.8s) both;
}

.scene-svg.is-active .leaves {
  animation: svg-leaf 0.6s ease calc(var(--cue-3) + 2.2s) both;
}