/* 場面7「どちらでも、同じスキルで作れる」（最後の場面。消さずに止める）
   真ん中のスキルに、左右から二つの道具が寄ってくる。最後に「どんな画像が必要か」の二択を置く。
   動きの層: スキルの紙 → 左右から道具が寄る → 紙の後ろで光が脈打つ → 見出し → 一文 → 画像の種類2つ */

.scene-close {
  padding: 50px 84px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 30px;
  text-align: center;
}

.scene-close .hub {
  display: grid;
  grid-template-columns: 110px 150px 110px;
  align-items: center;
  gap: 34px;
}

.scene-close .orbit {
  width: 110px;
  height: 110px;
  display: grid;
  place-items: center;
  border-radius: 30px;
  box-shadow: 0 12px 28px rgba(24, 32, 44, 0.12);
}

.scene-close .orbit svg {
  width: 64px;
  height: 64px;
}

.scene-close .orbit.is-gpt {
  background: var(--gpt-soft);
  color: var(--gpt);
}

.scene-close .orbit.is-claude {
  background: var(--claude-soft);
  color: var(--claude);
}

.scene-close .skill-doc {
  width: 150px;
  filter: drop-shadow(0 18px 30px rgba(24, 32, 44, 0.16));
}

.scene-close .message {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.scene-close .title {
  font-size: 58px;
}

.scene-close .first {
  font-size: 30px;
  font-weight: 700;
}

.scene-close .first strong {
  background: linear-gradient(transparent 60%, var(--marker) 60%);
}

.scene-close .kinds {
  display: flex;
  gap: 22px;
}

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

.scene-close .kinds svg {
  width: 56px;
  height: 42px;
}

.scene-close .kinds em {
  padding: 4px 12px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-en);
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  border-radius: 999px;
}

@keyframes close-in-left {
  from { opacity: 0; translate: -120px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes close-in-right {
  from { opacity: 0; translate: 120px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes close-pulse {
  0%, 100% { filter: drop-shadow(0 18px 30px rgba(24, 32, 44, 0.16)); }
  50% { filter: drop-shadow(0 0 26px rgba(255, 224, 122, 0.95)); }
}

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

.scene-close.is-active .skill-doc {
  animation:
    pop 0.6s var(--ease-pop) 0.1s both,
    close-pulse 2.4s ease-in-out calc(var(--cue-0) + 1.4s) infinite;
}

.scene-close.is-active .orbit.is-gpt {
  animation: close-in-left 0.9s var(--ease-out) calc(var(--cue-0) + 0.4s) both;
}

.scene-close.is-active .orbit.is-claude {
  animation: close-in-right 0.9s var(--ease-out) calc(var(--cue-0) + 0.55s) both;
}

.scene-close.is-active .title {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-0) + 0.9s) both;
}

.scene-close.is-active .first {
  animation: rise 0.6s var(--ease-out) calc(var(--cue-1) + 0.1s) both;
}

.scene-close.is-active .kinds li {
  animation: pop 0.5s var(--ease-pop) calc(var(--cue-1) + 1.4s) both;
}

.scene-close.is-active .kinds li:nth-child(2) {
  animation-delay: calc(var(--cue-1) + 1.8s);
}