/* scene-cover.css — 서비스 표지. Scene 1과 2 사이에서 발표의 주인을 한 번 밝힌다.
   기획 12개 장면에는 없는 간주이므로 상시 UI(진행선·챕터)를 끄고 화면을 비운다. */

/* multiply 가 섞일 바탕. 스테이지에 transform 이 걸려 있어 여기가 blend 의 기준면이 된다 */
.cv .ns-stage { background: var(--ns-color-bg-layer-basement); }

.cv__inner {
  display: grid;
  justify-items: center;
  gap: var(--ns-dimension-x13);
  text-align: center;
}
.cv__text { display: grid; justify-items: center; gap: var(--ns-dimension-x2_5); }

/* 로고는 흰 바탕에 검은 실루엣인 PNG다. 원본의 넓은 여백을 잘라내고 multiply 로 종이색에 얹는다.
   원본 1600×975 안에서 실루엣은 x 313~1416, y 208~797 (브라우저에서 픽셀로 측정).
   실루엣 폭 1104px를 820px로 보이게 하고(배율 0.7428), 사방에 36px 여백을 남긴다. */
.cv__mark {
  position: relative;
  width: 892px;
  height: 510px;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ns-timing-function-enter), transform 800ms var(--ns-timing-function-enter);
}
/* max-width:100% (global reset) 가 배율을 눌러 크롭이 어긋나므로 여기서 푼다 */
.cv__mark img { position: absolute; left: -196px; top: -118px; width: 1188px; max-width: none; }

.cv__tagline,
.cv__name {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ns-timing-function-enter), transform 700ms var(--ns-timing-function-enter);
}
.cv__tagline { color: var(--ns-color-fg-neutral-muted); }
.cv__name {
  font-size: var(--ns-font-size-display);
  line-height: 1;
  font-weight: var(--ns-font-weight-heavy);
  letter-spacing: 0.06em;
  color: var(--ns-color-fg-neutral);
}

/* 등장은 로고 → 한 줄 소개 → 이름 순서로 */
.cv[data-step="1"] .cv__mark,
.cv[data-step="2"] .cv__mark,
.cv[data-step="3"] .cv__mark { opacity: 1; transform: none; }
.cv[data-step="2"] .cv__tagline,
.cv[data-step="3"] .cv__tagline { opacity: 1; transform: none; }
.cv[data-step="3"] .cv__name { opacity: 1; transform: none; }