/* 場面6「だから、作るのをやめてしまう」
   4つの理由が1つずつ落ちてきて「動画を作る」ボタンを押しつぶし、ボタンが灰色になる。
   ナレーションの「直せない。揃わない。文字が崩れる。待たされる。」の区切りに1つずつ合わせる。 */

.scene-quit {
  padding: 56px 96px 64px;
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  align-items: center;
  gap: 72px;
}

/* 背景の層。理由が積もるたびに、画面全体が少しずつ暗く重くなる（余白ぶん外へ広げて全面に敷く） */
.scene-quit .shade {
  margin: -56px -96px -64px;
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: stretch;
  background: radial-gradient(circle at 25% 60%, rgba(224, 80, 58, 0.14), rgba(27, 31, 42, 0.1) 70%);
  opacity: 0;
}

.scene-quit .pile {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  justify-items: center;
  gap: 14px;
}

.scene-quit .blocks {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
}

.scene-quit .block {
  padding: 16px 30px;
  background: var(--alert);
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(224, 80, 58, 0.28);
  opacity: 0;
}

.scene-quit .block:nth-child(1) { width: 360px; rotate: -2deg; }
.scene-quit .block:nth-child(2) { width: 320px; rotate: 2.5deg; background: #d2442f; }
.scene-quit .block:nth-child(3) { width: 400px; rotate: -1.5deg; background: #e8664f; }
.scene-quit .block:nth-child(4) { width: 330px; rotate: 3deg; background: #c93a26; }

.scene-quit .make {
  padding: 22px 0;
  width: 420px;
  background: var(--fix);
  color: #fff;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  border-radius: 18px;
  box-shadow: 0 12px 0 #0a5a4b;
}

.scene-quit .make::before {
  content: "▶ ";
}

.scene-quit .message {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  gap: 18px;
}

.scene-quit .so {
  color: var(--ink-soft);
  font-size: 34px;
  font-weight: 900;
  opacity: 0;
}

.scene-quit .title {
  font-size: 76px;
  line-height: 1.2;
  opacity: 0;
}

.scene-quit .aside {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  opacity: 0;
}

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

.scene-quit.is-active .shade {
  animation:
    shade-1 0.4s ease calc(var(--cue-0) + 0.4s) forwards,
    shade-2 0.4s ease calc(var(--cue-1) + 0.4s) forwards,
    shade-3 0.4s ease calc(var(--cue-2) + 0.4s) forwards,
    shade-4 0.6s ease calc(var(--cue-3) + 0.4s) forwards;
}

@keyframes shade-1 { from { opacity: 0; } to { opacity: 0.25; } }
@keyframes shade-2 { from { opacity: 0.25; } to { opacity: 0.5; } }
@keyframes shade-3 { from { opacity: 0.5; } to { opacity: 0.75; } }
@keyframes shade-4 { from { opacity: 0.75; } to { opacity: 1; } }

.scene-quit.is-active .block:nth-child(1) { animation: drop 0.55s var(--ease-out) calc(var(--cue-0) + 0.02s) both; }
.scene-quit.is-active .block:nth-child(2) { animation: drop 0.55s var(--ease-out) calc(var(--cue-1) + 0.02s) both; }
.scene-quit.is-active .block:nth-child(3) { animation: drop 0.55s var(--ease-out) calc(var(--cue-2) + 0.02s) both; }
.scene-quit.is-active .block:nth-child(4) { animation: drop 0.55s var(--ease-out) calc(var(--cue-3) + 0.02s) both; }

/* 積もるたびに山ごと沈み、ボタンの厚み（影）が減る */
.scene-quit.is-active .pile {
  animation:
    sink-1 0.2s ease-out calc(var(--cue-0) + 0.4s) forwards,
    sink-2 0.2s ease-out calc(var(--cue-1) + 0.4s) forwards,
    sink-3 0.2s ease-out calc(var(--cue-2) + 0.4s) forwards,
    sink-4 0.25s ease-out calc(var(--cue-3) + 0.4s) forwards;
}

.scene-quit.is-active .make {
  animation:
    press-1 0.2s ease-out calc(var(--cue-0) + 0.4s) forwards,
    press-2 0.2s ease-out calc(var(--cue-1) + 0.4s) forwards,
    press-3 0.2s ease-out calc(var(--cue-2) + 0.4s) forwards,
    press-4 0.25s ease-out calc(var(--cue-3) + 0.4s) forwards,
    gray-out 0.6s ease calc(var(--cue-4) + 0.2s) forwards;
}

.scene-quit.is-active .so { animation: rise 0.5s var(--ease-out) calc(var(--cue-4) + 0.05s) both; }
.scene-quit.is-active .title { animation: rise 0.7s var(--ease-out) calc(var(--cue-4) + 0.5s) both; }
.scene-quit.is-active .aside { animation: rise 0.6s var(--ease-out) calc(var(--cue-5) + 0.3s) both; }

@keyframes drop {
  0% { opacity: 0; translate: 0 -240px; }
  70% { opacity: 1; translate: 0 10px; }
  100% { opacity: 1; translate: 0 0; }
}

@keyframes sink-1 { from { translate: 0 0; } to { translate: 0 3px; } }
@keyframes sink-2 { from { translate: 0 3px; } to { translate: 0 6px; } }
@keyframes sink-3 { from { translate: 0 6px; } to { translate: 0 9px; } }
@keyframes sink-4 { from { translate: 0 9px; } to { translate: 0 12px; } }

@keyframes press-1 { from { box-shadow: 0 12px 0 #0a5a4b; } to { box-shadow: 0 9px 0 #0a5a4b; } }
@keyframes press-2 { from { box-shadow: 0 9px 0 #0a5a4b; } to { box-shadow: 0 6px 0 #0a5a4b; } }
@keyframes press-3 { from { box-shadow: 0 6px 0 #0a5a4b; } to { box-shadow: 0 3px 0 #0a5a4b; } }
@keyframes press-4 { from { box-shadow: 0 3px 0 #0a5a4b; } to { box-shadow: 0 0 0 #0a5a4b; } }

@keyframes gray-out {
  from { background: var(--fix); box-shadow: 0 0 0 #0a5a4b; }
  to { background: #a4a9b1; box-shadow: 0 0 0 #6c727b; }
}