/* scene-03.css — Scene 3 「정보는 부족하지 않다」 (기획 8절)
   문장을 타이핑하고, 틀린 전제에 취소선을 긋고, 바꿔 쓴 뒤, 문제 정의를 조립한다.
   모션 밀도 25%(기획 6절) — 배경 카드는 느리게 부유하고 글의 전환은 선명하게 유지한다. */

/* 흩어진 시장 정보 — 정보는 부족하지 않다는 사실을 화면이 먼저 보여 준다 */
.s3__scatter {
  position: absolute;
  inset: 0;
  z-index: var(--ns-z-basement);
  opacity: 0;
  transition: opacity 900ms var(--ns-timing-function-easing);
}
.s3[data-step="0"] .s3__scatter,
.s3[data-step="1"] .s3__scatter,
.s3[data-step="2"] .s3__scatter { opacity: 1; }
.s3__chip { position: absolute; left: 50%; top: 50%; }
.s3__chip > .ns-event {
  will-change: transform;
  animation: s3-float var(--float-duration, 7s) var(--ns-timing-function-easing) var(--float-delay, 0s) infinite;
}
@keyframes s3-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  42% { transform: translate3d(var(--float-x, 12px), var(--float-y, -12px), 0) rotate(var(--float-rotate, 1deg)); }
  76% { transform: translate3d(var(--float-x-back, -7px), var(--float-y-back, 6px), 0) rotate(0deg); }
}

.s3__center {
  position: relative;
  z-index: var(--ns-z-default);
  display: grid;
  place-items: center;
  width: 1680px;
  text-align: center;
}
.s3__stack, .s3__final { grid-area: 1 / 1; }
.s3__stack { display: grid; gap: var(--ns-dimension-x5); }

/* 한 글자씩 찍힌다 */
.s3__slot .ns-kinetic__char {
  opacity: 0;
  transition: opacity 90ms linear;
  transition-delay: calc(var(--i, 0) * 40ms);
}
.s3[data-step="1"] .s3__slot--1 .ns-kinetic__char,
.s3[data-step="2"] .s3__slot--1 .ns-kinetic__char,
.s3[data-step="2"] .s3__slot--2 .ns-kinetic__char { opacity: 1; }

.s3__slot { opacity: 1; transition: opacity 500ms var(--ns-timing-function-exit); }
.s3[data-step="3"] .s3__stack { opacity: 0; transition: opacity 500ms var(--ns-timing-function-exit); }

/* 취소선은 그어지는 동작이어야 한다. text-decoration 은 움직일 수 없어 선을 따로 긋는다 */
.s3 .ns-kinetic__word[data-decoration="strike"] {
  position: relative;
  text-decoration: none;
  transition: color 420ms var(--ns-timing-function-easing);
}
.s3 .ns-kinetic__word[data-decoration="strike"]::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 54%;
  height: 0.052em;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms var(--ns-timing-function-easing);
}
.s3[data-step="2"] .ns-kinetic__word[data-decoration="strike"],
.s3[data-step="3"] .ns-kinetic__word[data-decoration="strike"] { color: var(--ns-color-fg-noise); }
.s3[data-step="2"] .ns-kinetic__word[data-decoration="strike"]::after,
.s3[data-step="3"] .ns-kinetic__word[data-decoration="strike"]::after { transform: scaleX(1); }

/* 문제 정의는 어절이 하나씩 모여 조립된다 */
.s3__final { opacity: 0; pointer-events: none; }
.s3[data-step="3"] .s3__final { opacity: 1; }
.s3__final .ns-kinetic__word {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 520ms var(--ns-timing-function-enter), transform 520ms var(--ns-timing-function-enter);
  transition-delay: calc(var(--i, 0) * 72ms);
}
.s3[data-step="3"] .s3__final .ns-kinetic__word { opacity: 1; transform: none; }

/* "판단"만 붉게 두고 천천히 맥동시킨다 — 이 장면이 남길 단어.
   유채색은 시세 방향(up/down) 전용이라는 원칙의 예외다. 여기서는 등락이 아니라 경고에 가깝다.
   조립이 끝난 뒤(어절 1 지연 72ms + 520ms) 시작하도록 지연을 준다. */
.s3__final .ns-kinetic__word[data-word="1"] { color: var(--ns-color-fg-up-vivid); }
.s3[data-step="3"] .s3__final .ns-kinetic__word[data-word="1"] {
  animation: s3-pulse 1300ms var(--ns-timing-function-easing) 620ms infinite;
}
@keyframes s3-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.32; }
}
@media (prefers-reduced-motion: reduce) {
  .s3__chip > .ns-event { animation: none; }
}