/* ============================================================
   화면 진입 모션 — 2026-10-14 대표 지시 「기관에 맞는 애니메이션」
   원칙: 정보가 정돈되며 나타나는 정도까지. 처음 보일 때 한 번만, 짧은 거리, 감속 곡선.
   반복 · 튕김 · 패럴랙스 · 회전은 쓰지 않는다 (설계서 SB-07 「과하지 않게」).

   켜는 스위치는 <html class="nrm-motion"> 하나다 (functions.php nrm_motion_head).
   동작 줄이기 설정이면 붙지 않고, 스크립트가 못 뜨면 2.5초 뒤 떨어진다 → 모든 규칙이 이 클래스 아래에 있다.
   처음에 숨기는 규칙은 대상 목록과 함께 functions.php 가 inline 으로 낸다 (nrm_motion_targets).
   ============================================================ */
@media screen {
  /* ① 블록 · 목록 — 아래에서 24px 떠오르며 나타난다. 같이 보인 칸끼리는 70ms 간격 (motion.js 가 --rv-i) */
  .nrm-motion .rv {
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--rv-i, 0) * 70ms);
  }

  /* ② 서브비주얼 첫 등장 — 배경이 아주 조금 다가오고, 제목 · 설명 · 위치 알약이 차례로 */
  .nrm-motion .wd-subvisual__bg { animation: nrm-sv-bg 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .nrm-motion .wd-subvisual__title,
  .nrm-motion .wd-subvisual__desc,
  .nrm-motion .wd-crumb { animation: nrm-rise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
  .nrm-motion .wd-subvisual__title { animation-delay: 0.1s; }
  .nrm-motion .wd-subvisual__desc { animation-delay: 0.22s; }
  .nrm-motion .wd-crumb { animation-delay: 0.36s; }

  /* ③ 그래프 — 화면에 들어오면 선이 왼쪽부터 그려지고 면이 차오른다 · 막대는 바닥에서 자란다 (chart.js renderND)
        nd-enter(그리기 대기) → is-drawn(그리는 중) → is-settled(끝, 말풍선 표시) */
  .nrm-motion .nd-enter:not(.is-settled) .nd-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .nrm-motion .nd-enter.is-drawn:not(.is-settled) .nd-l { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
  .nrm-motion .nd-enter:not(.is-drawn) .nd-a { opacity: 0; }
  .nrm-motion .nd-enter.is-drawn:not(.is-settled) .nd-a { transition: opacity 0.9s ease 0.3s; }
  .nrm-motion .nd-enter .nd-b { transform-box: fill-box; transform-origin: 50% 100%; }
  .nrm-motion .nd-enter:not(.is-drawn) .nd-b { transform: scaleY(0); }
  .nrm-motion .nd-enter.is-drawn:not(.is-settled) .nd-b { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) calc(var(--b-i, 0) * 45ms); }
  .nrm-motion .nd-enter:not(.is-settled) .nd-tip,
  .nrm-motion .nd-enter:not(.is-settled) svg circle { opacity: 0; }
  .nrm-motion .nd-enter.is-settled .nd-tip.is-on { animation: nrm-fade 0.4s ease both; }
}

@keyframes nrm-sv-bg { from { transform: scale(1.04); } to { transform: none; } }
@keyframes nrm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes nrm-fade { from { opacity: 0; } to { opacity: 1; } }