/* 場面1「ChatGPT と Claude Code、何が違う？」
   冒頭3秒で「二つを並べて比べる動画」だと分かるようにする。
   動きの層: 背景の光 → 題名 → 左右から二つの札 → 真ん中の「？」を線で描く → 迷っている人の列 */

.scene-open {
  padding: 52px 90px 50px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.scene-open .head {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.scene-open .kicker {
  justify-self: center;
}

.scene-open .title {
  font-size: 70px;
  line-height: 1.15;
}

.scene-open .name-gpt {
  color: var(--gpt);
}

.scene-open .name-claude {
  color: var(--claude);
}

.scene-open .and {
  margin: 0 0.3em;
  color: var(--ink);
  font-size: 0.62em;
}

.scene-open .sub {
  font-size: 34px;
  font-weight: 700;
}

.scene-open .versus {
  display: grid;
  grid-template-columns: 310px 150px 310px;
  align-items: center;
  gap: 36px;
}

.scene-open .agent {
  padding: 28px 24px 24px;
  display: grid;
  justify-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(24, 32, 44, 0.1), 0 0 0 1px rgba(24, 32, 44, 0.05);
}

.scene-open .agent .badge {
  width: 92px;
  height: 92px;
  border-radius: 26px;
}

.scene-open .agent .badge svg {
  width: 58px;
  height: 58px;
}

.scene-open .agent strong {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.scene-open .agent small {
  color: var(--ink-soft);
  font-size: 17px;
  font-weight: 700;
}

.scene-open .question svg {
  width: 150px;
  height: 150px;
  display: block;
}

.scene-open .question .ring {
  fill: #fff;
  fill-opacity: 0;
  stroke: #cfc7b8;
  stroke-width: 4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scene-open .question .mark {
  fill: none;
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.scene-open .question .dot {
  fill: var(--ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.scene-open .crowd {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.scene-open .people {
  display: flex;
  gap: 16px;
}

.scene-open .people li {
  display: grid;
  justify-items: center;
}

.scene-open .people li > * {
  grid-area: 1 / 1;
}

.scene-open .people svg {
  margin-top: 14px;
  width: 34px;
  height: 41px;
  fill: #b9c0ca;
}

/* 迷っている人の頭の上に「？」を出す */
.scene-open .people .unsure::after {
  grid-area: 1 / 1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  align-self: start;
  justify-self: end;
  margin-right: -10px;
  background: var(--claude);
  color: #fff;
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 900;
  border-radius: 50%;
  content: "?";
  opacity: 0;
}

.scene-open .crowd-text {
  font-size: 26px;
  font-weight: 900;
}

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

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

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

.scene-open.is-active .agent.is-gpt {
  animation: slide-left 0.8s var(--ease-out) 0.35s both;
}

.scene-open.is-active .agent.is-claude {
  animation: slide-right 0.8s var(--ease-out) 0.5s both;
}

.scene-open.is-active .question .ring {
  animation:
    draw 0.9s var(--ease-out) calc(var(--cue-1) + 0.05s) both,
    fill-in 0.6s ease calc(var(--cue-1) + 0.3s) both;
}

.scene-open.is-active .question .mark {
  animation: draw 0.9s ease-in-out calc(var(--cue-1) + 0.45s) both;
}

.scene-open.is-active .question .dot {
  animation: pop 0.45s var(--ease-pop) calc(var(--cue-1) + 1.3s) both;
}

.scene-open.is-active .sub {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-1) + 0.15s) both;
}

.scene-open.is-active .people li {
  animation: rise 0.5s var(--ease-out) calc(var(--cue-2) + 0.1s) both;
}

.scene-open.is-active .people li:nth-child(2) { animation-delay: calc(var(--cue-2) + 0.18s); }
.scene-open.is-active .people li:nth-child(3) { animation-delay: calc(var(--cue-2) + 0.26s); }
.scene-open.is-active .people li:nth-child(4) { animation-delay: calc(var(--cue-2) + 0.34s); }
.scene-open.is-active .people li:nth-child(5) { animation-delay: calc(var(--cue-2) + 0.42s); }
.scene-open.is-active .people li:nth-child(6) { animation-delay: calc(var(--cue-2) + 0.5s); }
.scene-open.is-active .people li:nth-child(7) { animation-delay: calc(var(--cue-2) + 0.58s); }
.scene-open.is-active .people li:nth-child(8) { animation-delay: calc(var(--cue-2) + 0.66s); }

.scene-open.is-active .people .unsure::after {
  animation: pop 0.4s var(--ease-pop) calc(var(--cue-2) + 1.2s) both;
}

.scene-open.is-active .people .unsure:nth-child(2)::after { animation-delay: calc(var(--cue-2) + 1.35s); }
.scene-open.is-active .people .unsure:nth-child(4)::after { animation-delay: calc(var(--cue-2) + 1.5s); }
.scene-open.is-active .people .unsure:nth-child(5)::after { animation-delay: calc(var(--cue-2) + 1.65s); }
.scene-open.is-active .people .unsure:nth-child(7)::after { animation-delay: calc(var(--cue-2) + 1.8s); }
.scene-open.is-active .people .unsure:nth-child(8)::after { animation-delay: calc(var(--cue-2) + 1.95s); }

.scene-open.is-active .crowd-text {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 0.7s) both;
}