/* KANAME だけのゲージの動き。
   他サービスは共通の ui_motion.css(KANADE が原本)を使うが、KANAME は運営画面・企業ポータルで
   使う業務画面なので、ゲームらしい動き(現れる・沈む・波紋・数字を数える・跳ねる・ふわっと開く・
   並べ替え・タブの下線)は入れない。残すのはゲージが伸びるところだけ。
   クラスを付けるのは ui_motion_gauge.js。JS が動かない環境では何も変わらない。

   幅・高さは触らず scaleX / scaleY で伸ばす(レイアウトの計算が走らない)。
   伸び終わったら JS がクラスを外し、元の見た目に戻る。 */

:root {
  --ui-motion-gauge-ms: 400ms;
  --ui-motion-ease: cubic-bezier(.22, .68, .28, 1);
}

.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); }
}

/* 動きが苦手な人には伸ばさない(最初から満たした状態で出す) */
@media (prefers-reduced-motion: reduce) {
  .ui-motion-gauge,
  .ui-motion-gauge-v {
    animation: none !important;
    transform: none !important;
  }
}

/* 画面ごと止めたいとき(<body data-ui-motion="none">) */
[data-ui-motion="none"],
[data-ui-motion="none"] * {
  animation-name: none !important;
}