/* ===========================================================================
   /cases 전환 단계

   네 단계는 순서가 전부다. 큰 단어 넷을 떨어뜨려 두면 순서가 읽히지 않는다.
   번호 원 넷을 한 줄로 잇고, 화면에 들어오면 선이 왼쪽부터 그어지며
   원이 1에서 4까지 차례로 켜진다.
   검은 구간(.on-dark) 안에서만 쓰므로 색도 검은 바탕을 전제로 고른다.
   이 페이지에서만 쓰여 base.html 이 아니라 cases.html 이 건다.
   =========================================================================== */

.steps {
  /* 선이 긋기 시작하는 때. 목록이 떠오르는 도중에 시작해야 긋는 것이 보인다. */
  --steps-lead: 300ms;
  /* 한 칸 건너는 시간. 선의 속도와 원이 켜지는 간격이 같아야 선이 닿을 때 원이 켜진다. */
  --steps-beat: 350ms;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nx-sp-6);
  text-align: center;
}

/* 첫 원의 중심에서 마지막 원의 중심까지. 높이는 원(36px)의 가운데다. */
.steps::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--nx-accent-dark);
  transform-origin: left;
}

.steps__item {
  position: relative;
  min-width: 0;
}

.steps__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-inline: auto;
  border: 2px solid var(--nx-accent-dark);
  border-radius: 50%;
  background: var(--nx-accent-dark);
  /* 흰 글자는 이 파랑 위에서 3.0:1 로 모자란다. 검정은 7.0:1 이다. */
  color: var(--nx-bg-abyss);
  font-size: var(--nx-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 6px rgba(41, 151, 255, 0.16), 0 0 24px rgba(41, 151, 255, 0.45);
}

/* 이름이 가장 크고, 하는 일과 설명이 그 아래로 차례로 작아진다. */
.steps__word {
  margin-top: var(--nx-sp-5);
  font-size: var(--nx-fs-2xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--nx-tracking-tight);
}

.steps__label {
  margin-top: var(--nx-sp-2);
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  color: var(--nx-accent-dark);
}

.steps__note {
  max-width: 20em;
  margin: var(--nx-sp-3) auto 0;
  font-size: var(--nx-fs-base);
  line-height: 1.5;
  color: var(--nx-text-invert-2);
}

/* 좁은 화면에서는 네 칸을 가로로 둘 수 없다. 원을 왼쪽 세로줄에 세우고 글을 옆에 둔다.
   마지막 단계 아래로 선이 삐져나오지 않게, 선은 목록 하나가 아니라 단계마다 다음 원까지만 긋는다. */
@media (max-width: 720px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nx-sp-8);
    text-align: left;
  }
  .steps::before {
    display: none;
  }
  .steps__item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: var(--nx-sp-4);
    align-content: start;
  }
  .steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 36px;
    bottom: calc(-1 * var(--nx-sp-8));
    left: 17px;
    width: 2px;
    background: var(--nx-accent-dark);
    transform-origin: top;
  }
  .steps__node {
    grid-row: 1 / span 3;
    margin: 0;
  }
  /* 이름 한 줄의 높이를 원과 같게 해 둘의 가운데를 맞춘다. */
  .steps__word {
    margin-top: 0;
    line-height: 36px;
  }
  .steps__note {
    max-width: none;
    margin-inline: 0;
  }
}

/* 움직임을 줄여 달라고 한 사용자와 스크립트가 죽은 화면에는 처음부터 다 켜진 모습을 보인다.
   꺼진 초기값을 이 안에만 두는 이유다. */
@media (prefers-reduced-motion: no-preference) {
  .js .steps::before {
    transition: transform calc(var(--steps-beat) * 3) linear var(--steps-lead);
  }
  .js .steps__item::after {
    transition: transform var(--steps-beat) linear calc(var(--steps-lead) + var(--i) * var(--steps-beat));
  }
  .js .steps__node {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 300ms;
    transition-delay: calc(var(--steps-lead) + var(--i) * var(--steps-beat));
  }
  .js .steps:not(.is-visible)::before {
    transform: scaleX(0);
  }
  .js .steps:not(.is-visible) .steps__item::after {
    transform: scaleY(0);
  }
  .js .steps:not(.is-visible) .steps__node {
    border-color: rgba(255, 255, 255, 0.28);
    background: var(--nx-bg-abyss);
    color: var(--nx-text-invert-2);
    box-shadow: none;
  }
}