/* UNLABELED motion enhancement — 追加のみ・既存を壊さない上質モーション層
   既存の .btn 押下やreduced-motionと共存。再描画で暴れないよう入場はアプリ全体に一度だけ。 */
:root{ --mo-ease:cubic-bezier(.22,.61,.36,1); --mo-accent:var(--accent,#bf5630); }

/* ① 入場アニメは撤去。
   理由: ルートに transform をかけると内部の position:fixed 要素(タブバー)の基準がずれて崩れ、
   opacity 起点にすると背景タブ等でアニメ未完了時にアプリが不可視で取り残される危険があった。
   “入場”より、下記の触った時の手応え(マイクロインタラクション)の方が安全かつ効果的。 */

/* ② マイクロ: ボタンの手応え（押下は既存、ホバー影とイージングを補完） */
.btn,.btn-sub{ transition:transform .12s var(--mo-ease),box-shadow .2s var(--mo-ease),filter .2s var(--mo-ease),background .2s var(--mo-ease); }
@media (hover:hover){
  .btn:not(.ghost):hover,.btn-sub:hover{ filter:brightness(1.04); box-shadow:0 7px 18px -7px color-mix(in srgb,var(--mo-accent) 55%,transparent); }
  .btn.ghost:hover{ background:color-mix(in srgb,var(--mo-accent) 8%,#fff); }
}
.btn:active,.btn-sub:active{ transform:translateY(1px) scale(.98); }

/* ④ カード: デスクトップのみ、影だけで“浮き”を表現（transformは使わない＝fixed要素を壊さない） */
@media (hover:hover){
  .card,.seccard{ transition:box-shadow .2s var(--mo-ease); }
  .seccard:hover{ box-shadow:0 12px 28px -16px rgba(26,26,28,.3); }
}

/* ② 入力: フォーカス時にアクセント色の枠がふわり */
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--mo-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mo-accent) 15%,transparent);
  transition:border-color .18s var(--mo-ease),box-shadow .18s var(--mo-ease);
}

/* ② 追加の安全な底上げ（マークアップ非依存・グローバル） */
::selection{ background:color-mix(in srgb,var(--mo-accent) 22%,transparent); }         /* テキスト選択が上質に */
a{ transition:color .18s var(--mo-ease),opacity .18s var(--mo-ease); }                  /* リンクの色がふわり */
:focus-visible{ outline:2px solid color-mix(in srgb,var(--mo-accent) 60%,transparent); outline-offset:2px; } /* キーボード操作時の分かりやすい枠 */
html{ scroll-behavior:smooth; }                                                        /* アンカー移動が滑らか */

/* ⑥ 待ち: shimmerスケルトン用ユーティリティ（.mo-sk を付けた要素が光る） */
.mo-sk{
  background:linear-gradient(100deg,#ececef 30%,#f5f5f7 50%,#ececef 70%);
  background-size:200% 100%; border-radius:7px;
  animation:mo-sh 1.3s ease-in-out infinite;
}
@keyframes mo-sh{ from{background-position:180% 0;} to{background-position:-180% 0;} }

/* reduced-motion: 既存の *{} ブロックが本追加分も停止するが、明示的にも無効化 */
@media (prefers-reduced-motion: reduce){
  .btn,.btn-sub,.card,.seccard,input,select,textarea,a{ transition:none; }
  .mo-sk{ animation:none; }
  html{ scroll-behavior:auto; }
}