/* 場面4「日本語の文字が、いちばん崩れる」
   左＝生成した画面で崩れた文字（わざと似た別の字に置き換え、にじませている）。
   右＝別のソフトで文字を重ねる工程。最後に「手間が二重に」。 */

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

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

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

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

.scene-text .panel {
  padding: 22px;
  display: grid;
  gap: 14px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(27, 31, 42, 0.12);
}

.scene-text .panel-tag {
  color: var(--ink-soft);
  font-size: 22px;
  font-weight: 900;
}

.scene-text .screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, #2c3e66, #5d4b8a);
  border-radius: 12px;
  overflow: hidden;
}

.scene-text .screen > * {
  grid-area: 1 / 1;
}

.scene-text .garbled {
  padding: 10px 18px;
  display: flex;
  place-self: center;
  color: #f4f1ff;
  font-size: 46px;
  font-weight: 900;
  border-radius: 10px;
  filter: blur(1.1px);
}

.scene-text .garbled span {
  display: block;
}

.scene-text .garbled span:nth-child(1) { rotate: -6deg; translate: 0 3px; }
.scene-text .garbled span:nth-child(2) { rotate: 9deg; translate: 0 -5px; scale: 0.9 1.1; }
.scene-text .garbled span:nth-child(3) { rotate: -3deg; translate: 0 6px; }
.scene-text .garbled span:nth-child(4) { rotate: 12deg; scale: 1.1 0.85; }
.scene-text .garbled span:nth-child(5) { rotate: -10deg; translate: 0 -4px; }
.scene-text .garbled span:nth-child(6) { rotate: 5deg; translate: 0 4px; scale: 1 1.15; }
.scene-text .garbled span:nth-child(7) { rotate: -8deg; translate: 0 -2px; }
.scene-text .garbled span:nth-child(8) { rotate: 7deg; translate: 0 5px; scale: 0.9 1; }

.scene-text .unreadable {
  margin-bottom: 18px;
  padding: 6px 16px;
  align-self: end;
  justify-self: center;
  background: var(--alert);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  border-radius: 999px;
  opacity: 0;
}

.scene-text .arrow {
  color: var(--ink-soft);
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 800;
  opacity: 0;
}

.scene-text .layers {
  display: grid;
  gap: 10px;
}

.scene-text .layer {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--line);
}

.scene-text .layer-name {
  padding: 4px 0;
  background: var(--ink);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  border-radius: 6px;
}

.scene-text .layer-body {
  font-size: 32px;
  font-weight: 900;
}

.scene-text .layer-thumb {
  height: 44px;
  display: block;
  background: linear-gradient(135deg, #2c3e66, #5d4b8a);
  border-radius: 6px;
}

.scene-text .cost {
  padding: 8px 18px;
  justify-self: end;
  background: var(--alert);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  border-radius: 999px;
  rotate: -3deg;
  opacity: 0;
}

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

.scene-text.is-active .chapter { animation: rise 0.5s var(--ease-out) 0.05s both; }
.scene-text.is-active .title { animation: rise 0.6s var(--ease-out) 0.2s both; }
.scene-text.is-active .panel-gen { animation: slide-left 0.7s var(--ease-out) 0.5s both; }
.scene-text.is-active .garbled span { animation: jitter 0.9s steps(3) infinite; }
.scene-text.is-active .garbled span:nth-child(even) { animation-delay: -0.45s; }

.scene-text.is-active .garbled {
  animation: garbled-mark 0.4s ease calc(var(--cue-1) + 0.1s) both;
}

.scene-text.is-active .unreadable {
  animation: pop 0.45s var(--ease-out) calc(var(--cue-1) + 0.3s) both;
}

.scene-text.is-active .arrow {
  animation: slide-left 0.5s var(--ease-out) calc(var(--cue-2) + 0.05s) both;
}

.scene-text.is-active .panel-edit {
  animation: slide-right 0.7s var(--ease-out) calc(var(--cue-2) + 0.2s) both;
}

.scene-text.is-active .layer-text {
  animation: layer-drop 0.5s var(--ease-out) calc(var(--cue-2) + 0.9s) both;
}

.scene-text.is-active .cost {
  animation: pop 0.5s var(--ease-out) calc(var(--cue-2) + 2.3s) both;
}

@keyframes jitter {
  0% { opacity: 1; }
  33% { opacity: 0.75; }
  66% { opacity: 0.95; }
}

@keyframes garbled-mark {
  from { box-shadow: 0 0 0 0 rgba(224, 80, 58, 0); }
  to { box-shadow: 0 0 0 4px var(--alert); }
}

@keyframes layer-drop {
  from { opacity: 0; translate: 0 -24px; }
  to { opacity: 1; translate: 0 0; }
}