/* ─────────────────────────────────────────────────────────────
   motion.css — 공통 모션 문법
   외부 라이브러리 없음. js/motion.js 가 .is-in 을 붙여 재생한다.

   원칙
   · 역할에 따라 문법을 다르게 쓴다 (fade / rise / slide / draw / stagger / state)
   · 모든 섹션을 fade-up 하나로 통일하지 않는다
   · hover 는 translateY 일변도를 피한다
   · 300~700ms 기본, 스토리텔링 800~1200ms
   ───────────────────────────────────────────────────────────── */

:root {
  --mo-fast:   300ms;
  --mo-base:   500ms;
  --mo-slow:   700ms;
  --mo-story: 1000ms;
  --mo-ease:   cubic-bezier(.22, 1, .36, 1);   /* 감속 — 등장용 */
  --mo-ease-io:cubic-bezier(.65, 0, .35, 1);   /* 상태 전환용 */
}

/* ═══════════ 1. 등장 문법 ═══════════ */
.mo-ready [data-motion] { opacity: 0; }
.mo-ready [data-motion].is-in { opacity: 1; }

.mo-ready [data-motion="fade"]    { transition: opacity var(--mo-base) var(--mo-ease); }

.mo-ready [data-motion="rise"]    { transform: translateY(18px);
                          transition: opacity var(--mo-base) var(--mo-ease),
                                      transform var(--mo-base) var(--mo-ease); }

.mo-ready [data-motion="slide-l"] { transform: translateX(-28px);
                          transition: opacity var(--mo-slow) var(--mo-ease),
                                      transform var(--mo-slow) var(--mo-ease); }

.mo-ready [data-motion="slide-r"] { transform: translateX(28px);
                          transition: opacity var(--mo-slow) var(--mo-ease),
                                      transform var(--mo-slow) var(--mo-ease); }

/* 과한 zoom 금지 — 아주 미세하게만 */
.mo-ready [data-motion="settle"]  { transform: scale(.985);
                          transition: opacity var(--mo-slow) var(--mo-ease),
                                      transform var(--mo-slow) var(--mo-ease); }

/* 왼쪽 세로선이 위에서 아래로 그어짐 (Problems 용) */
.mo-ready [data-motion="rule"]    { transform: translateX(-10px); clip-path: inset(0 0 100% 0);
                          transition: opacity var(--mo-base) var(--mo-ease),
                                      transform var(--mo-base) var(--mo-ease),
                                      clip-path var(--mo-slow) var(--mo-ease); }
.mo-ready [data-motion="rule"].is-in { clip-path: inset(0 0 0 0); }

.mo-ready [data-motion].is-in { transform: none; }

/* ═══════════ 2. stagger ═══════════
   자식이 --i 순서대로 지연되어 들어온다. JS가 --i를 부여한다. */
.mo-ready [data-stagger] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--mo-base) var(--mo-ease),
              transform var(--mo-base) var(--mo-ease);
  transition-delay: calc(var(--i, 0) * var(--stagger-step, 110ms));
}
.mo-ready [data-stagger].is-in > * { opacity: 1; transform: none; }

/* ═══════════ 3. 선 그리기 (Process 연결선) ═══════════ */
[data-draw] { position: relative; }
[data-draw]::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: currentColor;
  transition: width var(--mo-story) var(--mo-ease-io);
}
[data-draw].is-in::after { width: 100%; }

/* ═══════════ 4. 카운팅 대상 ═══════════ */
[data-count] { font-variant-numeric: tabular-nums; }

/* ═══════════ 5. 채팅 시퀀스 (히어로 목업 · 카드 내부 흐름) ═══════════ */
.mo-ready [data-seq] [data-seq-item] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms var(--mo-ease), transform 380ms var(--mo-ease);
}
.mo-ready [data-seq] [data-seq-item].is-shown { opacity: 1; transform: none; }

/* typing indicator — 점 3개 */
.mo-typing { display: inline-flex; align-items: center; gap: 4px; }
.mo-typing i {
  width: 5px; height: 5px; border-radius: 999px;
  background: var(--ink-4, #9ca3af); display: block;
  animation: moTyping 1.1s infinite ease-in-out;
}
.mo-typing i:nth-child(2) { animation-delay: .15s; }
.mo-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes moTyping {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

/* ═══════════ 6. hover — translateY 일변도 탈피 ═══════════ */
.mo-hover-line { transition: border-color var(--mo-fast) var(--mo-ease-io); }
.mo-hover-tint { transition: background-color var(--mo-fast) var(--mo-ease-io); }

/* ═══════════ 7. 접근성 ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .mo-ready [data-motion],
  .mo-ready [data-stagger] > *,
  .mo-ready [data-seq] [data-seq-item] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-draw]::after { width: 100% !important; transition: none !important; }
  .mo-typing i { animation: none !important; opacity: .6 !important; }
  * { scroll-behavior: auto !important; }
}