/* ゲームらしい画面の動き(全サービス共通)。KANADE が原本で、他サービスへは中身を変えずにコピーする。
   ここにあるクラスはすべて ui_motion.js が付ける。JS が動かない環境では何も変わらない
   (要素が消えたままになることはない)。
   動く時間は 0.2〜0.4 秒。数字とゲージだけ 0.4〜0.6 秒。業務の邪魔にならない長さに収める。
   transform と opacity(と filter)だけを動かし、width / height / top / left は動かさない
   (レイアウトの計算が走って重くなるため)。
   prefers-reduced-motion: reduce の人には、このファイルの動きをすべて止める(末尾)。 */

:root {
  --ui-motion-rise-ms: 280ms;   /* 現れる */
  --ui-motion-press-ms: 120ms;  /* 押して沈む */
  --ui-motion-ripple-ms: 360ms; /* 波紋 */
  --ui-motion-pop-ms: 260ms;    /* 跳ねて現れる・ふわっと開く */
  --ui-motion-move-ms: 260ms;   /* 並べ替え・タブの下線 */
  --ui-motion-gauge-ms: 400ms;  /* ゲージが伸びる */
  --ui-motion-count-ms: 500ms;  /* 数字を数える */
  --ui-motion-ease: cubic-bezier(.22, .68, .28, 1);
  --ui-motion-back: cubic-bezier(.2, 1.5, .4, 1);
  --ui-motion-accent: 99, 102, 241; /* 波紋・タブの下線の色(RGB) */
  --ui-motion-up: 16, 163, 96;      /* 増えた(緑) */
  --ui-motion-down: 220, 60, 68;    /* 減った(赤) */
}

/* ---- 画面が変わったとき: 下からふわっと現れる -------------------------- */
/* ui_motion.js が対象に .ui-motion-reveal を付け、画面に入ったら .is-ui-motion-in を足す。
   遅らせる幅は --ui-motion-delay(2 枚目 40ms、3 枚目 80ms… 最大 8 枚ぶんで打ち止め) */
.ui-motion-reveal {
  opacity: 0;
}

.ui-motion-reveal.is-ui-motion-in {
  animation: ui-motion-rise var(--ui-motion-rise-ms) var(--ui-motion-ease) var(--ui-motion-delay, 0ms) both;
}

/* 動き終わったら JS がクラスを外す。外れたあとは元の見た目に戻るだけ */
@keyframes ui-motion-rise {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- 押したとき: 少し沈む ---------------------------------------------- */
.ui-motion-press {
  transition: transform var(--ui-motion-press-ms) ease-out;
}

.ui-motion-press:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translate3d(0, 1px, 0) scale(.985);
}

/* ---- 押したとき: 押した位置から波紋が広がる ---------------------------- */
/* body 直下に置く(押した要素の中には入れない。overflow や position を変えずに済む) */
.ui-motion-ripple {
  position: fixed;
  z-index: 2147483000;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(var(--ui-motion-accent), .38) 0%,
    rgba(var(--ui-motion-accent), .18) 45%,
    rgba(var(--ui-motion-accent), 0) 70%);
  box-shadow: 0 0 0 1px rgba(var(--ui-motion-accent), .28) inset;
  animation: ui-motion-ripple var(--ui-motion-ripple-ms) ease-out both;
}

@keyframes ui-motion-ripple {
  from { opacity: .85; transform: scale(.35); }
  to   { opacity: 0;   transform: scale(7); }
}

/* ---- 数字: 増減を一瞬だけ出す ------------------------------------------ */
.ui-motion-delta {
  position: fixed;
  z-index: 2147483000;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: ui-motion-delta 560ms ease-out both;
}

.ui-motion-delta-up {
  color: rgb(var(--ui-motion-up));
  background: rgba(var(--ui-motion-up), .14);
  box-shadow: 0 0 0 1px rgba(var(--ui-motion-up), .28);
}

.ui-motion-delta-down {
  color: rgb(var(--ui-motion-down));
  background: rgba(var(--ui-motion-down), .14);
  box-shadow: 0 0 0 1px rgba(var(--ui-motion-down), .28);
}

@keyframes ui-motion-delta {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.8); }
  22%  { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
}

/* 数えている間だけ、数字をほんの少し強調する */
.ui-motion-counting {
  font-variant-numeric: tabular-nums;
}

/* ---- ゲージ: 伸びる(横は左から、縦は下から) -------------------------- */
/* 幅・高さは触らず scaleX / scaleY で伸ばす。終わったら JS がクラスを外す */
.ui-motion-gauge {
  transform-origin: left center;
  animation: ui-motion-gauge-x var(--ui-motion-gauge-ms) var(--ui-motion-ease) both;
}

.ui-motion-gauge-v {
  transform-origin: center bottom;
  animation: ui-motion-gauge-y var(--ui-motion-gauge-ms) var(--ui-motion-ease) both;
}

@keyframes ui-motion-gauge-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes ui-motion-gauge-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* 満タンになったら一瞬光る */
.ui-motion-flash {
  animation: ui-motion-flash 380ms ease-out both;
}

@keyframes ui-motion-flash {
  0%   { filter: none; }
  40%  { filter: brightness(1.7) saturate(1.25); }
  100% { filter: none; }
}

/* ---- バッジ・称号・獲得: 跳ねて現れる ---------------------------------- */
.ui-motion-pop {
  animation: ui-motion-pop var(--ui-motion-pop-ms) var(--ui-motion-back) var(--ui-motion-delay, 0ms) both;
}

@keyframes ui-motion-pop {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: none; }
}

/* ---- モーダル・メニュー: ふわっと開く ---------------------------------- */
dialog[open]:not([data-ui-motion="none"]) {
  animation: ui-motion-open var(--ui-motion-pop-ms) var(--ui-motion-ease) both;
}

dialog[open]:not([data-ui-motion="none"])::backdrop {
  animation: ui-motion-fade var(--ui-motion-pop-ms) ease-out both;
}

.ui-motion-open {
  animation: ui-motion-open var(--ui-motion-pop-ms) var(--ui-motion-ease) both;
}

.ui-motion-close {
  animation: ui-motion-open var(--ui-motion-press-ms) ease-in reverse both;
}

@keyframes ui-motion-open {
  from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes ui-motion-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- 一覧の操作: 並べ替え・絞り込みで滑らかに動く(FLIP) --------------- */
.ui-motion-moving {
  transition: transform var(--ui-motion-move-ms) var(--ui-motion-ease);
  will-change: transform;
}

/* ---- タブ: 下線が次のタブへ滑って移動する ------------------------------ */
/* body 直下に 1 本だけ置く。タブの中には要素を入れない(既存の下線と組み合わない) */
.ui-motion-tab-underline {
  position: fixed;
  z-index: 2147483000;
  height: 3px;
  border-radius: 999px;
  pointer-events: none;
  background: rgb(var(--ui-motion-accent));
  transition: transform var(--ui-motion-move-ms) var(--ui-motion-ease),
              opacity var(--ui-motion-move-ms) ease-out;
  transform-origin: left center;
}

/* ---- 全部止める(動きが苦手な人・止めたい画面) ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ui-motion-reveal,
  .ui-motion-reveal.is-ui-motion-in,
  .ui-motion-press,
  .ui-motion-press:active,
  .ui-motion-ripple,
  .ui-motion-delta,
  .ui-motion-gauge,
  .ui-motion-gauge-v,
  .ui-motion-flash,
  .ui-motion-pop,
  .ui-motion-open,
  .ui-motion-close,
  .ui-motion-moving,
  .ui-motion-tab-underline {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    will-change: auto !important;
  }

  .ui-motion-ripple,
  .ui-motion-delta,
  .ui-motion-tab-underline {
    display: none !important;
  }

  /* ダイアログは transform で位置を決めていることがあるので、動きだけ止めて位置は触らない */
  dialog[open],
  dialog[open]::backdrop {
    animation: none !important;
  }
}

[data-ui-motion="none"],
[data-ui-motion="none"] * {
  animation-name: none !important;
}