/* 場面3「毎回ちがう絵が出て、揃わない」
   第1話〜第3話のサムネイルを並べる。人物も色も話ごとに違い、最後に「同じシリーズに見えない」の判。
   人物は画像ではなく、丸と角丸の四角だけで描いている。 */

.scene-series {
  padding: 60px 88px 64px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 32px;
}

.scene-series .head {
  display: grid;
  gap: 16px;
}

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

.scene-series .shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.scene-series .shelf > * {
  grid-area: 1 / 1;
}

.scene-series .episodes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}

.scene-series .episode {
  display: grid;
  gap: 12px;
}

.scene-series .thumb {
  padding-top: 36px;
  display: grid;
  justify-items: center;
  align-content: end;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(27, 31, 42, 0.14);
  overflow: hidden;
}

.scene-series .person {
  display: grid;
  justify-items: center;
}

.scene-series .face {
  margin-bottom: -14px;
  width: 104px;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  z-index: 1;
  border-radius: 50%;
}

.scene-series .face i {
  width: 12px;
  height: 12px;
  display: block;
  background: #2a2a33;
  border-radius: 50%;
}

.scene-series .torso {
  width: 180px;
  height: 92px;
  display: block;
  border-radius: 90px 90px 0 0;
}

.scene-series .ep-name {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
}

.scene-series .palette {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.scene-series .palette i {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(27, 31, 42, 0.12);
}

/* 第1話 */
.scene-series .ep-1 .thumb { background: #d4e4ff; }
.scene-series .ep-1 .face { background: #f2c6a0; }
.scene-series .ep-1 .torso { background: #3a6fd8; }
.scene-series .ep-1 .palette i:nth-child(1) { background: #d4e4ff; }
.scene-series .ep-1 .palette i:nth-child(2) { background: #3a6fd8; }
.scene-series .ep-1 .palette i:nth-child(3) { background: #f2c6a0; }

/* 第2話（顔が四角く大きい・暖色） */
.scene-series .ep-2 .thumb { background: #ffe1b8; }
.scene-series .ep-2 .face { width: 124px; height: 116px; gap: 40px; background: #e2a57a; border-radius: 28px; }
.scene-series .ep-2 .face i { width: 16px; height: 8px; border-radius: 4px; }
.scene-series .ep-2 .torso { width: 210px; background: #f08a2c; border-radius: 30px 30px 0 0; }
.scene-series .ep-2 .palette i:nth-child(1) { background: #ffe1b8; }
.scene-series .ep-2 .palette i:nth-child(2) { background: #f08a2c; }
.scene-series .ep-2 .palette i:nth-child(3) { background: #e2a57a; }

/* 第3話（顔が縦長・紫） */
.scene-series .ep-3 .thumb { background: #e6dcff; }
.scene-series .ep-3 .face { width: 86px; height: 124px; gap: 18px; background: #caa07c; border-radius: 44px; }
.scene-series .ep-3 .face i { width: 10px; height: 16px; }
.scene-series .ep-3 .torso { width: 150px; height: 104px; background: #7b4fd6; border-radius: 16px 16px 0 0; }
.scene-series .ep-3 .palette i:nth-child(1) { background: #e6dcff; }
.scene-series .ep-3 .palette i:nth-child(2) { background: #7b4fd6; }
.scene-series .ep-3 .palette i:nth-child(3) { background: #caa07c; }

.scene-series .differs {
  color: var(--alert);
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 900;
}

.scene-series .stamp {
  padding: 12px 36px;
  place-self: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--alert);
  font-size: 46px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border: 6px solid var(--alert);
  border-radius: 14px;
  rotate: -7deg;
  box-shadow: 0 18px 40px rgba(224, 80, 58, 0.25);
  opacity: 0;
}

/* ---- 動き ---- */

.scene-series.is-active .chapter { animation: rise 0.5s var(--ease-out) 0.05s both; }
.scene-series.is-active .title { animation: rise 0.6s var(--ease-out) 0.2s both; }

.scene-series.is-active .ep-1 { animation: rise 0.6s var(--ease-out) calc(var(--cue-0) + 1.1s) both; }
.scene-series.is-active .ep-2 { animation: rise 0.6s var(--ease-out) calc(var(--cue-0) + 1.9s) both; }
.scene-series.is-active .ep-3 { animation: rise 0.6s var(--ease-out) calc(var(--cue-0) + 2.7s) both; }

.scene-series.is-active .person { animation: sway 3.2s ease-in-out infinite; }
.scene-series.is-active .ep-2 .person { animation-delay: -1s; }
.scene-series.is-active .ep-3 .person { animation-delay: -2s; }

.scene-series.is-active .differs:nth-child(2) { animation: pop 0.45s var(--ease-out) calc(var(--cue-1) + 0.9s) both; }
.scene-series.is-active .differs:nth-child(4) { animation: pop 0.45s var(--ease-out) calc(var(--cue-1) + 1.5s) both; }

.scene-series.is-active .ep-1 .face,
.scene-series.is-active .ep-2 .face {
  animation: face-mark 0.5s ease calc(var(--cue-1) + 2.1s) both;
}

.scene-series.is-active .palette {
  animation: fade 0.5s ease calc(var(--cue-1) + 2.9s) both;
}

.scene-series.is-active .stamp {
  animation: stamp 0.5s var(--ease-pop) calc(var(--cue-2) + 0.15s) both;
}

@keyframes sway {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

@keyframes face-mark {
  from { outline: 4px dashed rgba(224, 80, 58, 0); outline-offset: 16px; }
  to { outline: 4px dashed var(--alert); outline-offset: 8px; }
}

@keyframes stamp {
  from { opacity: 0; scale: 1.8; }
  to { opacity: 1; scale: 1; }
}