/* 場面6「どちらを選べばいい？」
   二枚の札を並べ、話の順に ChatGPT（おすすめ）→ Claude Code を持ち上げ、理由を1行ずつ出す。
   動きの層: 見出し → 二枚の札 → ChatGPT が持ち上がり「おすすめ」 → 理由2行 → Claude Code が持ち上がる → 理由2行 */

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

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

.scene-choose .title {
  font-size: 56px;
}

.scene-choose .options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  align-items: stretch;
  gap: 40px;
}

.scene-choose .option {
  padding: 42px 38px 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 34px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 10px 28px rgba(24, 32, 44, 0.08), 0 0 0 1px rgba(24, 32, 44, 0.05);
}

.scene-choose .option > * {
  grid-column: 1;
}

.scene-choose .ribbon {
  grid-row: 1;
  margin: -52px -10px 0 0;
  padding: 8px 20px;
  align-self: start;
  justify-self: end;
  background: var(--gpt);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(15, 123, 115, 0.3);
  z-index: 1;
}

.scene-choose .opt-head {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 18px;
}

.scene-choose .opt-head .badge {
  width: 86px;
  height: 86px;
  border-radius: 24px;
}

.scene-choose .opt-head .badge svg {
  width: 54px;
  height: 54px;
}

.scene-choose .opt-head strong {
  display: block;
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
}

.scene-choose .opt-head small {
  display: block;
  color: var(--ink-soft);
  font-size: 19px;
  font-weight: 700;
}

.scene-choose .points {
  display: grid;
  gap: 24px;
}

.scene-choose .points li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.4;
}

.scene-choose .points b {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #e1f3ea;
  color: var(--yes);
  font-size: 22px;
  border-radius: 50%;
}

.scene-choose .points .is-plus b {
  background: var(--code-soft);
  color: var(--code);
}

@keyframes choose-ring-gpt {
  to { box-shadow: 0 26px 50px rgba(24, 32, 44, 0.14), 0 0 0 4px var(--gpt); translate: 0 -10px; }
}

@keyframes choose-ring-claude {
  to { box-shadow: 0 26px 50px rgba(24, 32, 44, 0.14), 0 0 0 4px var(--claude); translate: 0 -10px; }
}

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

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

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

.scene-choose.is-active .option.is-gpt {
  animation:
    rise 0.7s var(--ease-out) 0.5s both,
    choose-ring-gpt 0.5s var(--ease-out) calc(var(--cue-1) + 0.2s) forwards;
}

.scene-choose.is-active .option.is-claude {
  animation:
    rise 0.7s var(--ease-out) 0.65s both,
    choose-ring-claude 0.5s var(--ease-out) calc(var(--cue-3) + 0.2s) forwards;
}

.scene-choose.is-active .ribbon {
  animation: pop 0.5s var(--ease-pop) calc(var(--cue-1) + 0.6s) both;
}

.scene-choose.is-active .is-gpt .p1 {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 0.2s) both;
}

.scene-choose.is-active .is-gpt .p2 {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-2) + 1.6s) both;
}

.scene-choose.is-active .is-claude .p1 {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-4) + 0.3s) both;
}

.scene-choose.is-active .is-claude .p2 {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-4) + 3s) both;
}