/* ============================================================
 * css/motion.css — [data-animate] 리빌 상태 + 로더 퇴장 (motion-designer 소유)
 *
 * 소유 범위(blueprint §4.2): [data-animate] 상태, .is-inview, body.anim-ready 스코프,
 *   로더 퇴장(body.is-loaded .loader), .char 헬퍼([data-animate] 하위), 키프레임 lv-*
 *
 * 안전장치(핵심): 초기 숨김은 반드시 body.anim-ready 스코프 아래에서만 선언한다.
 *   main.js 는 initChoreography 직전에 anim-ready 를 부여하고, 초기화 실패 시 제거한다.
 *   → JS 가 죽어도, anime 가 없어도, 안무만 죽어도 콘텐츠는 항상 보인다(FOUC/블랭크 방지).
 *   별도의 .no-js 폴백이 불필요한 이유: anim-ready 부재 = 전부 표시.
 * ========================================================== */

/* ── 초기 숨김 (body.anim-ready 스코프 전용) ── */
body.anim-ready [data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

/* 이동/스케일 시작값 — transform 계열만(레이아웃 스래싱 없음) */
body.anim-ready [data-animate="fade-up"]    { transform: translateY(28px); }
body.anim-ready [data-animate="scale-in"]   { transform: scale(0.92); }
body.anim-ready [data-animate="slide-left"] { transform: translateX(40px); }
/* fade-in 은 opacity 만, 시작 transform 없음 */

/* counter: 페이드 없이 값만 카운트업 → 컨테이너는 처음부터 보인다 */
body.anim-ready [data-animate="counter"] { opacity: 1; }

/* draw-svg: 획이 그려지려면 컨테이너가 보여야 한다 */
body.anim-ready [data-animate="draw-svg"] { opacity: 1; }

/* ── stagger 부모: 부모는 보이고 직계 자식만 숨긴다 ──
   부모가 [data-animate] 값도 가지면 위에서 숨겨지므로, 여기서 명시적으로 되돌린다.
   (소스 순서상 [data-animate="..."] 규칙 뒤에 와야 승리 — 동일 특이도) */
body.anim-ready [data-animate-stagger] {
  opacity: 1;
  transform: none;
}
body.anim-ready [data-animate-stagger] > * {
  opacity: 0;
  will-change: opacity, transform;
}

/* ── 히어로 글자 분해(.char): [data-animate] 하위로 스코프해 소유권 유지 ── */
body.anim-ready [data-animate] .char {
  display: inline-block; /* transform 이 인라인 요소엔 안 먹는다 */
  will-change: opacity, transform;
}

/* ── 리빌 완료 최종 상태 고정(backstop): 인라인 스타일이 소실돼도 콘텐츠 유지 ── */
body.anim-ready [data-animate].is-inview {
  opacity: 1;
  transform: none;
  will-change: auto;
}
body.anim-ready [data-animate-stagger].is-inview > * {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ── prefers-reduced-motion: 모든 리빌을 즉시 완료 상태로(JS 이전에도 안전) ── */
@media (prefers-reduced-motion: reduce) {
  body.anim-ready [data-animate],
  body.anim-ready [data-animate-stagger] > *,
  body.anim-ready [data-animate] .char {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}

/* ============================================================
 * 로더 퇴장 — 로더의 형태/위치/색은 base.css(ui-designer) 소유.
 * 여기서는 퇴장 트랜지션만 담당한다(모션 토큰 소비, 실패 시 폴백값).
 * main.js: body.is-loaded 부여 → 페이드아웃, 700ms 후 loader.hidden = true.
 * ========================================================== */
body.is-loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--lv-dur-m, 600ms) var(--lv-ease-out, ease-out),
    visibility 0s linear var(--lv-dur-m, 600ms);
}