/* 제립·초코 모션 시스템 v2 · 공통 · 2026-10-18
   원칙: 움직임은 transform/opacity 만. 내용은 항상 보임(움직임이 꺼지면 처음부터 보이는 상태).
   Claude 의 로고·코드·문구는 쓰지 않았고, 속도·이징·등장 순서의 성격만 참고했다. (motion.md 참고) */

:root {
  /* 지속시간 5단계 (M3 short/medium/long 구간에 맞춤) */
  --mo-dur-instant: 80ms;   /* 눌림·색 전환 */
  --mo-dur-fast: 160ms;     /* 호버·포커스·작은 토글 */
  --mo-dur-base: 240ms;     /* 작은 요소 등장·단계 전환 */
  --mo-dur-slow: 320ms;     /* 스크롤 등장(기본) */
  --mo-dur-long: 480ms;     /* 한 화면 안 가장 큰 1회 연출(타임라인 선, 히어로 첫 등장) */

  /* 이징 3개 (M3 대응) */
  --mo-ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* M3 standard: 화면 안 이동·색 전환 */
  --mo-ease-decel: cubic-bezier(0.05, 0.7, 0.1, 1);    /* M3 emphasized decelerate: 등장(천천히 내려앉듯) */
  --mo-ease-accel: cubic-bezier(0.3, 0, 0.8, 0.15);    /* M3 emphasized accelerate: 퇴장(쓰는 곳은 메뉴 닫기 정도) */

  --mo-rise: 12px;          /* 등장 이동 거리 (규칙: 16px 이하) */
  --mo-stagger: 80ms;       /* 같은 영역 순차 간격 (규칙: 80ms 이하) */
}

/* ---------- 스크롤 등장: html.mo (JS 가 켬/끔 판단 후 붙임) 일 때만 숨김 상태가 존재 ---------- */
html.mo .rv {
  opacity: 0;
  transform: translate3d(0, var(--mo-rise), 0);
  transition:
    opacity var(--mo-dur-slow) var(--mo-ease-decel),
    transform var(--mo-dur-slow) var(--mo-ease-decel);
  transition-delay: calc(min(var(--i, 0), 3) * var(--mo-stagger)); /* 최대 3칸 = 240ms, 240+320 = 560ms ≤ 600 */
  will-change: opacity, transform;
}
html.mo .rv.in {
  opacity: 1;
  transform: none;
}
html.mo .rv.in { will-change: auto; }

/* 히어로 첫 등장도 같은 기본값(320ms + 지연 ≤240ms = 560ms). 길게 늘이지 않는다(총 ≤600ms 규칙). */

/* 타임라인 선: 위에서 아래로 자라는 느낌(스케일, 한 번, 지연 없음 → 총 480ms) */
html.mo .grow {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--mo-dur-long) var(--mo-ease-standard);
}
html.mo .grow.in { transform: scaleY(1); }

/* ---------- 호흡: 로고/CTA 점 한 곳만. 2번 숨 쉬고 멈춤(5초 넘는 반복 움직임 금지) ---------- */
@keyframes mo-breath {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.82); }
}
html.mo .breath { animation: mo-breath 2400ms var(--mo-ease-standard) 2 both; }

/* ---------- 호버·눌림: 색 전환만 (이동·확대 없음) ---------- */
/* 색 전환(background-color 등)은 transform/opacity 가 아니므로 애니메이션하지 않는다 → 호버·눌림은 즉시 바뀜.
   (.mo-hover/.mo-press 는 "여기는 의도적으로 즉시 전환" 표시용 클래스) */
.mo-hover, .mo-press { transition: none; }

/* ---------- 움직임 끄기: OS 설정(prefers-reduced-motion) 이거나 사이트 버튼/주소 ?motion=off ----------
   JS 가 html.mo 를 붙이지 않으므로 숨김 상태가 만들어지지 않는다. 아래는 CSS 만으로도 이중 안전장치. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .rv, .grow, .breath, .step .bub {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html.mo-off .rv, html.mo-off .grow, html.mo-off .breath, html.mo-off .step .bub {
  opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important;
}

html.mo-off { scroll-behavior: auto !important; }