/* =====================================================================
   모션 토큰 + 공용 키프레임 (motion.js 와 세트) — 타이밍·이징의 단일 소스
   등장 계약 (kiosk-page-motion 스킬):
     알파 0 → 원값 · y +10~20px 랜덤 · expo-out cubic-bezier(.16,1,.3,1) · 1.4~1.6s 랜덤 · 스태거 0.2s
     퇴장 0.3s ease · 진행 반대 방향(위)으로 30~54px + 페이드
   ?fx=off → body.fx-off 로 연출 끔 (QA)
   ===================================================================== */

:root {
  --app-scale: 1;

  --dur-fast: 240ms;     /* 인터랙션 피드백 */
  --dur-exit: 300ms;     /* 화면 퇴장 */
  --dur-med: 420ms;      /* 오버레이 페이드 */
  --dur-slow: 640ms;     /* 셸(시트) 진입 · 캐릭터 위치 이동 */

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-strong: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── 1층: 화면 셸 (하단 시트가 올라온다) ── */
.sheet-up { animation: sheetUp var(--dur-slow) var(--ease-expo) both; }
@keyframes sheetUp {
  from { transform: translateY(80px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── 2층: 오브젝트 스태거 (motion.js animateIn 이 --dy / --dur / --delay 를 요소마다 랜덤으로 준다) ── */
.anim-in {
  opacity: 0;
  animation: objIn var(--dur, 1.5s) var(--ease-expo) both;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes objIn {
  from { opacity: 0; transform: translateY(var(--dy, 16px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 화면 퇴장 — ui.leave → motion.fadeOutThen 이 .page 에 부여 */
.is-leaving {
  opacity: 0 !important;
  transform: translateY(var(--exit-dy, -40px));
  transition: opacity var(--dur-exit) ease, transform var(--dur-exit) ease;
  pointer-events: none;
}

/* ── 3층: 유도 루프 (transform/opacity 만) ── */
.pulse { animation: promptPulse 2.4s var(--ease-inout) infinite; }
@keyframes promptPulse { 0%, 100% { opacity: .72; transform: scale(1); } 50% { opacity: 1; transform: scale(1.015); } }

.tap-ring { position: relative; }
.tap-ring::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 3px solid currentColor; opacity: 0;
  animation: tapRing 2.4s var(--ease-expo) infinite;
}
@keyframes tapRing {
  0% { transform: scale(.96); opacity: .7; }
  70%, 100% { transform: scale(1.08); opacity: 0; }
}

/* 생각 중 점 3개 */
.dots span { display: inline-block; animation: dotBounce 1.2s var(--ease-inout) infinite; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-14px); opacity: 1; } }

/* 흔들림 (PIN 오류) */
.shake { animation: shake .42s var(--ease-soft); }
@keyframes shake { 20%, 60% { transform: translateX(-14px); } 40%, 80% { transform: translateX(14px); } }

/* ── 연출 끔 (?fx=off) ── */
body.fx-off *, body.fx-off *::before, body.fx-off *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; transition-delay: 0s !important;
}