/* 場面2「一文字直すだけで、最初から作り直し」
   右の画面で、誤字に赤丸 → 生成し直し → さっきと違う絵、を見せる。
   左では「直したくなる理由」が積み上がり、重さの目盛りが上がる。 */

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

.scene-fix .text {
  display: grid;
  gap: 22px;
}

.scene-fix .title {
  font-size: 54px;
}

.scene-fix .changes {
  display: grid;
  gap: 10px;
}

.scene-fix .changes li {
  padding: 10px 12px 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff;
  font-size: 26px;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line);
}

.scene-fix .redo {
  padding: 4px 12px;
  background: var(--alert-soft);
  color: var(--alert);
  font-size: 18px;
  font-weight: 900;
  border-radius: 999px;
}

.scene-fix .redo::before {
  content: "↻ ";
}

.scene-fix .load {
  display: grid;
  gap: 8px;
  color: var(--alert);
  font-size: 22px;
  font-weight: 900;
}

.scene-fix .load-bar {
  height: 14px;
  display: block;
  background: var(--paper-deep);
  border-radius: 7px;
  overflow: hidden;
}

.scene-fix .load-bar i {
  width: 92%;
  height: 100%;
  display: block;
  background: linear-gradient(90deg, #f0a08f, var(--alert));
  transform-origin: left;
  scale: 0 1;
}

.scene-fix .visual {
  display: grid;
  gap: 14px;
}

.scene-fix .movie {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  background: var(--night);
  border-radius: 18px;
  box-shadow: 0 24px 56px rgba(27, 31, 42, 0.22);
  overflow: hidden;
}

.scene-fix .movie > * {
  grid-area: 1 / 1;
}

.scene-fix .take {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.scene-fix .take > * {
  grid-area: 1 / 1;
}

/* 1回目に生成された絵（夕方の丘） */
.scene-fix .take-1 {
  background: linear-gradient(#34427a, #b46a86 62%, #f2a97a);
}

.scene-fix .sun {
  margin: 70px 0 0 120px;
  width: 110px;
  aspect-ratio: 1;
  align-self: start;
  justify-self: start;
  background: #ffd9a0;
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 217, 160, 0.7);
}

.scene-fix .hill {
  border-radius: 50% 50% 0 0;
  align-self: end;
}

.scene-fix .hill-a {
  margin: 0 0 -80px -60px;
  width: 460px;
  height: 230px;
  justify-self: start;
  background: #2f3a5e;
}

.scene-fix .hill-b {
  margin: 0 -80px -110px 0;
  width: 560px;
  height: 260px;
  justify-self: end;
  background: #242c4b;
}

/* 2回目に生成された絵（色も形も変わる） */
.scene-fix .take-2 {
  background: linear-gradient(135deg, #0f6b5c, #86c9a7);
  opacity: 0;
}

.scene-fix .block {
  border-radius: 18px;
  rotate: 18deg;
}

.scene-fix .block-a {
  margin: 40px 60px 0 0;
  width: 200px;
  height: 200px;
  justify-self: end;
  align-self: start;
  background: rgba(255, 244, 200, 0.85);
}

.scene-fix .block-b {
  margin: 0 0 30px 90px;
  width: 150px;
  height: 150px;
  justify-self: start;
  align-self: end;
  background: rgba(20, 50, 80, 0.55);
  rotate: -12deg;
}

.scene-fix .telop {
  padding: 10px 26px;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border-radius: 10px;
}

.scene-fix .take-1 .telop {
  margin-bottom: 28px;
  align-self: end;
  justify-self: center;
  background: rgba(10, 14, 28, 0.62);
}

.scene-fix .take-2 .telop {
  margin: 28px 0 0 28px;
  align-self: start;
  justify-self: start;
  background: rgba(255, 255, 255, 0.9);
  color: #0f3d35;
}

.scene-fix .typo {
  padding: 0 4px;
  display: inline-block;
  color: #ffb4a6;
  border-radius: 50%;
}

.scene-fix .regen {
  padding: 16px 22px;
  display: grid;
  gap: 10px;
  align-self: end;
  background: rgba(10, 14, 28, 0.82);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  opacity: 0;
}

.scene-fix .regen-bar {
  height: 8px;
  display: block;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
}

.scene-fix .regen-bar i {
  height: 100%;
  display: block;
  background: #fff;
  transform-origin: left;
  scale: 0 1;
}

/* 2回目の絵のテロップは左上に出るので、札は右下に置いて重ねない */
.scene-fix .differ {
  margin: 0 20px 20px 0;
  padding: 8px 16px;
  align-self: end;
  justify-self: end;
  background: var(--alert);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  border-radius: 999px;
  opacity: 0;
}

.scene-fix .movie-caption {
  color: var(--ink-soft);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

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

.scene-fix.is-active .chapter { animation: rise 0.5s var(--ease-out) 0.05s both; }
.scene-fix.is-active .title { animation: rise 0.6s var(--ease-out) 0.2s both; }
.scene-fix.is-active .movie { animation: slide-right 0.7s var(--ease-out) 0.3s both; }
.scene-fix.is-active .movie-caption { animation: fade 0.5s ease 0.9s both; }
.scene-fix.is-active .sun { animation: drift 8s ease-in-out infinite; }

.scene-fix.is-active .typo {
  animation: typo-ring 0.45s var(--ease-out) calc(var(--cue-0) + 1.45s) both;
}

.scene-fix.is-active .regen {
  animation:
    fade 0.3s ease calc(var(--cue-1) + 0.15s) both,
    fade-out 0.3s ease calc(var(--cue-1) + 2.9s) forwards;
}

.scene-fix.is-active .regen-bar i {
  animation: draw-x 2.4s linear calc(var(--cue-1) + 0.35s) both;
}

.scene-fix.is-active .take-1 {
  animation: fade-out 0.5s ease calc(var(--cue-1) + 2.75s) forwards;
}

.scene-fix.is-active .take-2 {
  animation: fade 0.5s ease calc(var(--cue-1) + 2.75s) both;
}

.scene-fix.is-active .differ {
  animation: pop 0.5s var(--ease-out) calc(var(--cue-1) + 3.2s) both;
}

.scene-fix.is-active .changes li:nth-child(1) { animation: slide-left 0.5s var(--ease-out) calc(var(--cue-2) + 0.05s) both; }
.scene-fix.is-active .changes li:nth-child(2) { animation: slide-left 0.5s var(--ease-out) calc(var(--cue-2) + 0.9s) both; }
.scene-fix.is-active .changes li:nth-child(3) { animation: slide-left 0.5s var(--ease-out) calc(var(--cue-2) + 1.75s) both; }
.scene-fix.is-active .changes li:nth-child(1) .redo { animation: pop 0.4s var(--ease-out) calc(var(--cue-2) + 0.4s) both; }
.scene-fix.is-active .changes li:nth-child(2) .redo { animation: pop 0.4s var(--ease-out) calc(var(--cue-2) + 1.25s) both; }
.scene-fix.is-active .changes li:nth-child(3) .redo { animation: pop 0.4s var(--ease-out) calc(var(--cue-2) + 2.1s) both; }

.scene-fix.is-active .load { animation: rise 0.5s var(--ease-out) calc(var(--cue-2) + 2.5s) both; }
.scene-fix.is-active .load-bar i { animation: draw-x 2.2s var(--ease-out) calc(var(--cue-2) + 2.8s) both; }

@keyframes typo-ring {
  from { box-shadow: 0 0 0 0 rgba(224, 80, 58, 0); scale: 1; }
  60% { box-shadow: 0 0 0 6px var(--alert); scale: 1.25; }
  to { box-shadow: 0 0 0 5px var(--alert); scale: 1.12; }
}