/* ===========================================================================
   회사소개(/company) 전용.

   소개 문단 끝에 묻혀 있던 한 문장을 크게 세우고, 스크롤에 따라 어절마다
   회색에서 검정으로 밝힌다. 이 페이지에서만 쓰므로 company.html 이 직접 건다.
   =========================================================================== */

.statement {
  margin-top: var(--nx-sp-16);
  font-size: var(--nx-fs-2xl);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--nx-text);
  /* 마지막 줄에 한 어절만 남으면 큰 활자에서 특히 눈에 띈다. */
  text-wrap: balance;
  /* 켜지기 전의 회색. 40px·26px 굵은 글은 큰 글자라 AA 기준이 3:1 이다.
     #86868b 는 흰 바탕 3.62:1 로 기준을 넘고, 켜진 #1d1d1f(16.83:1)와도 확연히 갈린다.
     --nx-s3(#e8e8ed, 1.22:1)·#c7c7cc(1.68:1)는 큰 화면에서 스크롤 없이 멈춰
     있을 때 문장 끝이 읽히지 않았다. 이 문장은 여기에만 있어 늘 읽혀야 한다. */
  --statement-dim: #86868b;
}

/* 지원하지 않는 브라우저와 모션을 줄인 설정에서는 이 블록이 통째로 빠져
   처음부터 검은 글자로 보인다. 글이 안 보이는 경우는 없다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 문장 전체를 하나의 타임라인으로 삼는다. 어절마다 view() 를 따로 주면
       같은 줄의 어절이 한꺼번에 켜져 줄 단위로 번쩍인다. */
    .statement {
      view-timeline: --statement block;
    }

    /* 문장이 화면 아래에 다 들어온 때(cover 16%) 첫 어절이 켜지기 시작하고,
       문장 윗선이 화면 중간에 닿기 전(cover 40%)에 마지막 어절까지 다 켜진다.
       읽을 자리에 왔을 때는 이미 전부 검다. */
    .statement span {
      color: var(--statement-dim);
      animation: word-lit linear both;
      animation-timeline: --statement;
      animation-range:
        cover calc(16% + var(--i) / var(--n) * 18%)
        cover calc(22% + var(--i) / var(--n) * 18%);
    }
  }
}

@keyframes word-lit {
  to {
    color: var(--nx-text);
  }
}