/* scene-01.css — Scene 1 「시장이 먼저 움직인다」 (기획 8절)
   검은 화면 중앙의 시계가 빠르게 흐르고, 시장 정보가 카메라 방향으로 쏟아진다.
   최고 밀도에서 모든 움직임이 갑자기 멈춘다. 애니메이션 속성은 transform·opacity만(기획 11절). */

/* ── 3D 공간 ── */
.s1__space {
  position: absolute;
  inset: 0;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  z-index: var(--ns-z-basement);
}
/* 배경은 장면 내내 밝기도 속도도 바뀌지 않는다. 문장이 떠도 그대로 흐른다 */
.s1__field {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* 쏟아지는 정보 카드 — 검은 화면 위의 흰 종이.
   night 톤의 noise 규칙(투명 배경·회색 글자)보다 구체적으로 써서 확실히 덮는다. */
.s1__particle .ns-event[data-state="noise"] {
  background: var(--ns-color-bg-layer-default);
  border-color: var(--ns-color-stroke-neutral-weak);
  color: var(--ns-color-fg-neutral);
  box-shadow: var(--ns-shadow-s1);
}
.s1__particle .ns-event[data-state="noise"] .ns-event__label { color: var(--ns-color-fg-neutral); }
.s1__particle .ns-event[data-state="noise"] .ns-event__icon,
.s1__particle .ns-event[data-state="noise"] .ns-event__time { color: var(--ns-color-fg-neutral-subtle); }
/* 등락 값은 흰 카드 위 색으로 되돌린다 (night 톤 규칙이 밝은 색을 쓰기 때문) */
.s1__particle .ns-event__value[data-dir="up"]   { color: var(--ns-color-fg-up) !important; }
.s1__particle .ns-event__value[data-dir="down"] { color: var(--ns-color-fg-down) !important; }
.s1__particle .ns-event[data-state="noise"] .ns-event__value { color: var(--ns-color-fg-neutral-muted); }

.s1__particle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -110px;   /* 칩을 자기 중심에 건다 */
  opacity: 0;
  will-change: transform, opacity;
}

/* ── 중앙 ──
   시계와 카피는 같은 셀에 겹쳐 둔다. 카피가 자리를 차지하면 beat 0의 시계가 중앙에서 밀린다. */
.s1__center {
  position: absolute;
  inset: 0;
  z-index: var(--ns-z-default);
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}

/* 시계 — 장면의 첫 주인공. 정지 후에는 물러나 카피에 자리를 내준다 */
.s1__clock {
  grid-area: 1 / 1;
  font-family: var(--ns-font-family-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ns-font-size-hero);
  line-height: 1;
  font-weight: var(--ns-font-weight-bold);
  letter-spacing: 0.02em;
  color: var(--ns-color-fg-neutral-inverted);
  transform-origin: center;
  transition: transform 900ms var(--ns-timing-function-enter-expressive), opacity 900ms var(--ns-timing-function-easing);
}
/* 정지 후: 시계는 물러나며 사라지고 화면에는 문장만 남는다 */
.s1__clock[data-mode="gone"] { transform: translateY(-72px); opacity: 0; }

/* 카피 두 문장은 같은 자리에서 교체된다 */
.s1__lines {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  place-items: center;
  width: 1680px;
}
/* 어둠은 문장 뒤에만 깐다. 배경을 건드리지 않고 글만 또렷하게 만든다 */
.s1__lines::before {
  content: "";
  position: absolute;
  inset: -240px -320px;
  background: radial-gradient(ellipse at center,
    var(--ns-color-bg-night) 0%,
    var(--ns-color-bg-night) 48%,
    transparent 78%);
  opacity: 0;
  transition: opacity 1000ms var(--ns-timing-function-enter);
  pointer-events: none;
}
.s1__lines[data-veil="true"]::before { opacity: 1; }

.s1__line {
  position: relative;
  grid-area: 1 / 1;
  color: var(--ns-color-fg-neutral-inverted);
  opacity: 0;
  transform: translateY(28px);
  /* 나가는 문장이 먼저 비켜난 뒤 다음 문장이 들어온다. 겹쳐 읽히지 않도록 */
  transition: opacity 380ms var(--ns-timing-function-exit), transform 380ms var(--ns-timing-function-exit);
}
.s1__line[data-show="true"] {
  opacity: 1;
  transform: none;
  transition: opacity 620ms 360ms var(--ns-timing-function-enter), transform 620ms 360ms var(--ns-timing-function-enter);
}
/* 다음 장면으로 넘기는 질문 — 한 발 물러선 톤이지만 읽혀야 한다 */
.s1__line[data-line="2"] { color: var(--ns-color-fg-neutral-muted-on-night); }

@media (prefers-reduced-motion: reduce) {
  .s1__particle { transition: none; }
}