/* 場面2「まず、同じところから」
   誤解（AIが動画をまるごと生成する）に線を引き、どちらも同じ3手順で作ることを左から右へ見せる。
   動きの層: 見出し → 誤解に取り消し線 → スキル → コード（1行ずつ） → 動画（音の波が揺れる） → 二つの道具の札 */

.scene-same {
  padding: 50px 84px 46px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 18px;
}

.scene-same .head {
  display: grid;
  gap: 14px;
}

.scene-same .title {
  font-size: 54px;
}

.scene-same .myth {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: start;
  column-gap: 16px;
}

.scene-same .myth-text {
  grid-area: 1 / 1;
  padding: 8px 20px;
  color: var(--ink-soft);
  font-size: 26px;
  font-weight: 700;
  border: 2px dashed #c9c2b4;
  border-radius: 999px;
}

.scene-same .myth-strike {
  grid-area: 1 / 1;
  margin: 0 10px;
  height: 5px;
  background: var(--no);
  border-radius: 3px;
  transform-origin: left;
}

.scene-same .myth-no {
  grid-area: 1 / 2;
  color: var(--no);
  font-size: 28px;
  font-weight: 900;
}

.scene-same .flow {
  display: grid;
  grid-template-columns: 250px 70px 270px 70px 250px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.scene-same .step {
  display: grid;
  grid-template-rows: 190px auto;
  align-items: center;
  justify-items: center;
  gap: 14px;
}

.scene-same .doc {
  width: 124px;
}

.scene-same .code-card {
  padding: 20px 22px;
  width: 262px;
  display: grid;
  gap: 8px;
  background: var(--night);
  font-family: var(--font-code);
  font-size: 18px;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(24, 32, 44, 0.2);
}

.scene-same .c-line {
  color: #e6ebf3;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
}

.scene-same .c-line.is-indent {
  padding-left: 2ch;
}

.scene-same .c-line b {
  color: #7fb6ff;
  font-weight: 500;
}

.scene-same .c-line i {
  color: #9fe6a0;
  font-style: normal;
}

.scene-same .clip {
  width: 236px;
  filter: drop-shadow(0 16px 26px rgba(24, 32, 44, 0.2));
}

.scene-same .wave rect {
  transform-box: fill-box;
  transform-origin: center;
}

.scene-same .step-label {
  padding: 8px 18px;
  background: #fff;
  font-size: 22px;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line);
}

.scene-same .arrow span {
  height: 22px;
  display: block;
  background: var(--ink);
  clip-path: polygon(0 40%, 68% 40%, 68% 5%, 100% 50%, 68% 95%, 68% 60%, 0 60%);
  transform-origin: left;
}

.scene-same .agents-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
  font-weight: 900;
}

.scene-same .mini {
  padding: 6px 16px;
  color: #fff;
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 800;
  border-radius: 999px;
}

.scene-same .mini.is-gpt {
  background: var(--gpt);
}

.scene-same .mini.is-claude {
  background: var(--claude);
}

@keyframes same-wave {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.25); }
}

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

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

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

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

.scene-same.is-active .myth-text {
  animation:
    rise 0.6s var(--ease-out) calc(var(--cue-1) + 0.1s) both,
    dim 0.4s ease calc(var(--cue-1) + 2.9s) forwards;
}

.scene-same.is-active .myth-strike {
  animation: draw-x 0.45s var(--ease-out) calc(var(--cue-1) + 2.7s) both;
}

.scene-same.is-active .myth-no {
  animation: pop 0.45s var(--ease-pop) calc(var(--cue-1) + 3.1s) both;
}

.scene-same.is-active .step-skill {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 0.1s) both;
}

.scene-same.is-active .flow .arrow:nth-child(2) span {
  animation: draw-x 0.5s var(--ease-out) calc(var(--cue-2) + 1.2s) both;
}

.scene-same.is-active .step-code {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 1.5s) both;
}

.scene-same.is-active .c-line {
  animation: same-type 0.5s steps(14) calc(var(--cue-2) + 1.9s) both;
}

.scene-same.is-active .c-line:nth-child(2) { animation-delay: calc(var(--cue-2) + 2.2s); }
.scene-same.is-active .c-line:nth-child(3) { animation-delay: calc(var(--cue-2) + 2.5s); }
.scene-same.is-active .c-line:nth-child(4) { animation-delay: calc(var(--cue-2) + 2.8s); }

.scene-same.is-active .flow .arrow:nth-child(4) span {
  animation: draw-x 0.5s var(--ease-out) calc(var(--cue-2) + 3s) both;
}

.scene-same.is-active .step-video {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 3.3s) both;
}

.scene-same.is-active .wave rect {
  animation: same-wave 0.7s ease-in-out calc(var(--cue-2) + 3.6s) infinite both;
}

.scene-same.is-active .wave rect:nth-child(2) { animation-delay: calc(var(--cue-2) + 3.75s); }
.scene-same.is-active .wave rect:nth-child(3) { animation-delay: calc(var(--cue-2) + 3.9s); }
.scene-same.is-active .wave rect:nth-child(4) { animation-delay: calc(var(--cue-2) + 4.05s); }
.scene-same.is-active .wave rect:nth-child(5) { animation-delay: calc(var(--cue-2) + 4.2s); }

.scene-same.is-active .agents-row > * {
  animation: rise 0.5s var(--ease-out) calc(var(--cue-3) + 0.05s) both;
}

.scene-same.is-active .agents-row > :nth-child(2) { animation-delay: calc(var(--cue-3) + 0.15s); }
.scene-same.is-active .agents-row > :nth-child(3) { animation-delay: calc(var(--cue-3) + 0.25s); }
.scene-same.is-active .agents-row > :nth-child(4) { animation-delay: calc(var(--cue-3) + 0.35s); }
.scene-same.is-active .agents-row > :nth-child(5) { animation-delay: calc(var(--cue-3) + 0.6s); }