/* ============================================================
   motion.css — 動きの部品（2026-11-12 USER「ChatGPT Astra に作ってもらった UI のお手本を、テスト版の良いところに入れて試して」）
   お手本：Desktop\motion-parts（弾むプレス・波紋・スライドする選択肢・ローディング→完了・呼吸するインジケーター）
   ・テスト版だけ。<html class="mo"> のときだけ効く（?motion=0 で開くと入れる前の見た目）
   ・色はアプリの色の決まり（--accent など）をそのまま使う。夜の表示（暗い色）でも同じ
   ・「動きを減らす」設定の端末では動かさない
   ============================================================ */

/* ① 弾むプレス：押すと沈み、離すとはね返る（スマホで押した手応え） */
.mo .btn, .mo .tstart, .mo .tend, .mo .cancelbtn, .mo .drv-self-b, .mo .minibtn, .mo .pastbtn, .mo .filelbl {
  transition: transform .38s cubic-bezier(.2, 1.8, .4, 1), box-shadow .25s, background-color .25s, color .25s;
  -webkit-tap-highlight-color: transparent;
}
.mo .btn:not(.ghost):not(:disabled), .mo .tstart:not(:disabled), .mo .tend:not(:disabled) {
  box-shadow: 0 4px 0 color-mix(in srgb, currentColor 0%, rgba(0, 0, 0, .22)), 0 8px 16px rgba(0, 0, 0, .10);
}
.mo .btn:not(:disabled):active, .mo .tstart:not(:disabled):active, .mo .tend:not(:disabled):active,
.mo .cancelbtn:not(:disabled):active, .mo .drv-self-b:active, .mo .minibtn:active, .mo .pastbtn:active, .mo .filelbl:active {
  transform: translateY(3px) scale(.97);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* ② 波紋：押した場所から広がる（motion.js がボタンに付ける） */
.mo .mo-wavebox { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.mo .mo-wave {
  position: absolute; width: var(--s); height: var(--s); left: var(--x); top: var(--y);
  border-radius: 50%; background: rgba(255, 255, 255, .45); pointer-events: none; z-index: 0;
  transform: translate(-50%, -50%) scale(0); animation: mo-wave .7s cubic-bezier(.16, 1, .3, 1) forwards;
}
.mo .drv-self-b .mo-wave, .mo .minibtn .mo-wave, .mo .cancelbtn .mo-wave, .mo .btn.ghost .mo-wave { background: color-mix(in srgb, var(--accent) 28%, transparent); }
@keyframes mo-wave { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ③ スライドする選択肢：「待機中／移動中／退勤」「今すぐ／時間から／休み」「現金／カード／PayPay」 */
.mo .drv-self.mo-seg { position: relative; background: var(--surface-3); padding: 4px; border-radius: 12px; gap: 4px; }
.mo .drv-self.mo-seg .drv-self-b { position: relative; z-index: 1; background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.mo .drv-self.mo-seg .drv-self-b.on { color: #fff !important; font-weight: 800; }
.mo .mo-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 9px;
  background: var(--accent); box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), width .45s cubic-bezier(.22, 1, .36, 1);
}

/* ④ ローディング → 完了：送っている間はぐるぐる、終わったら ✓ がポンと出る */
.mo .mo-busy { pointer-events: none; opacity: .85; }
.mo .mo-busy::after {
  content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: currentColor; border-radius: 50%; animation: mo-spin .7s linear infinite;
}
@keyframes mo-spin { to { transform: rotate(360deg); } }
.mo-done {
  position: fixed; left: 50%; bottom: 96px; z-index: 10000; display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px; background: var(--good); color: #fff; font-weight: 800; font-size: 15px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22); transform: translate(-50%, 20px) scale(.9); opacity: 0;
  animation: mo-done-in .45s cubic-bezier(.2, 1.6, .4, 1) forwards, mo-done-out .35s ease-in 1.6s forwards; pointer-events: none;
}
.mo-done b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .25); animation: mo-pop .45s .1s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes mo-done-in { to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes mo-done-out { to { transform: translate(-50%, 10px) scale(.95); opacity: 0; } }
@keyframes mo-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ⑤ 呼吸するインジケーター：「稼働中」「接客中」など、今動いているものに脈打つ点 */
.mo .girl-card.gc-good .girl-st::before, .mo .girl-card.gc-crit .girl-st::before, .mo .pill.g::before, .mo .ph-h .badge.mo-live::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: currentColor; animation: mo-breathe 1.8s ease-in-out infinite;
}
.mo .girl-card.gc-crit .girl-st::before { animation-duration: .9s; }
@keyframes mo-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* カードがふわっと出る（描き直しのたびには動かさない：最初に開いたときだけ） */
.mo .mo-enter .infocard, .mo .mo-enter .ordcard, .mo .mo-enter .task, .mo .mo-enter .girl-card {
  animation: mo-rise .5s cubic-bezier(.22, 1, .36, 1) both;
}
.mo .mo-enter .infocard:nth-child(2), .mo .mo-enter .girl-card:nth-child(2) { animation-delay: .05s; }
.mo .mo-enter .infocard:nth-child(3), .mo .mo-enter .girl-card:nth-child(3) { animation-delay: .1s; }
.mo .mo-enter .infocard:nth-child(4), .mo .mo-enter .girl-card:nth-child(4) { animation-delay: .15s; }
@keyframes mo-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mo *, .mo *::before, .mo *::after, .mo-done, .mo-done * { animation: none !important; transition: none !important; }
  .mo-done { opacity: 1; transform: translate(-50%, 0); }
}