/* assets/css/style/02_interactions.css */
/* ボタン押下エフェクト - CSS :active + スプリング遷移
   ─ 押し込み：55ms ease（素早く沈む）
   ─ 解放  ：380ms cubic-bezier（y>1 でオーバーシュート → バウンス感）
   ─ JS 不要・クラス不要                                              */

.btn {
  /* 解放時スプリング（y = 2.2 でバウンスを出す） */
  transition:
    transform 380ms cubic-bezier(.22, 2.2, .36, 1),
    filter    200ms ease;
  transform: translateZ(0);
  position: relative;
  overflow: hidden;
}

/* 押し込み（すべての .btn 共通ベース） */
.btn:active {
  transition:
    transform 55ms ease,
    filter    55ms ease;
  transform: translateY(3px) scale(0.92);
  filter: brightness(0.84);
}

/* 低刺激設定 */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: translateY(1px); filter: none; }
}