/**
   * c-form-002 アニメーションスタイル
   * フラットデザイン原則に準拠した統一感のあるアニメーションシステム
   *
   * 原則:
   * - 影（box-shadow）禁止 → opacity、transform、background-colorで表現
   * - グラデーション禁止 → 単色背景のみ
   * - transformは控えめに使用（scale、translateのみ）
   */

/* ============================================
     チェックボックス アニメーション
     ============================================ */

/* チェックボックスラベル全体にホバーエフェクト */
.c-form-002__checkbox-label {
  transition: background-color var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    opacity var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease);
}

.c-form-002__checkbox-label:hover {
  background-color: var(--wp--custom--overlay--light--1);
  opacity: 0.95;
}

/* チェック時のアニメーション */
.c-form-002__checkbox:checked + .c-form-002__checkbox-label {
  animation: checkbox-check var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

@keyframes checkbox-check {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* チェックマークのアニメーション */
.c-form-002__checkbox:checked + .c-form-002__checkbox-label::before {
  animation: checkmark-appear var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

@keyframes checkmark-appear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
     バッジ削除アニメーション
     ============================================ */

/* バッジアイテム全体にトランジション */
.c-form-002__badge-item {
  transition: opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
}

/* バッジ削除時のフェードアウトアニメーション */
.c-form-002__badge-item.is-removing {
  animation: badge-remove var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease) forwards;
}

@keyframes badge-remove {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* バッジ削除ボタンのホバーエフェクト */
.c-form-002__badge-remove {
  transition: background-color var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    color var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    opacity var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease);
}

.c-form-002__badge-remove:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.c-form-002__badge-remove:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* ============================================
     検索ボタン アニメーション
     ============================================ */

/* 検索ボタン基本トランジション */
.c-form-002__button {
  transition: background-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
}

/* ホバー時 */
.c-form-002__button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

/* アクティブ時（クリック時） */
.c-form-002__button:active {
  transform: translateY(0) scale(0.98);
  opacity: 0.95;
}

/* 検索ボタン押下時のリップルエフェクト */
.c-form-002__button.is-searching {
  animation: button-pulse var(--wp--custom--transition--duration--slow)
    var(--wp--custom--transition--timing--ease) infinite;
}

@keyframes button-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* ============================================
     モーダル選択ボタン アニメーション
     ============================================ */

/* 統合選択ボタン */
.c-form-002__unified-select-btn {
  transition: background-color var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    opacity var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease);
}

.c-form-002__unified-select-btn:hover {
  opacity: 0.7;
}

.c-form-002__unified-select-btn:active {
  opacity: 0.95;
}

/* アイコン回転アニメーション */
.c-form-002__unified-select-btn .material-symbols-outlined {
  transition: transform var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

.c-form-002__unified-select-btn:hover .material-symbols-outlined {
  transform: rotate(180deg);
}

/* ============================================
     モーダル検索実行ボタン アニメーション
     ============================================ */

.js-modal-search-submit {
  transition: background-color var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
}

.js-modal-search-submit:hover {
  opacity: 0.9;
}

.js-modal-search-submit:active {
  transform: translateY(0) scale(0.98);
  opacity: 0.95;
}

/* ============================================
     結果数カウント アニメーション
     ============================================ */

/* カウント更新時のアニメーション */
.c-form-002__result-count-number,
.c-form-002__modal-count-number {
  transition: color var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
  margin-right: 0.2em;
}

.c-form-002__result-count-number.is-updating,
.c-form-002__modal-count-number.is-updating {
  animation: count-update var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

@keyframes count-update {
  0% {
    opacity: 0.6;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
     入力フィールド アニメーション
     ============================================ */

/* キーワード入力フィールド */
.c-form-002__input {
  transition: border-color var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    background-color var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease);
}

.c-form-002__input:focus {
  border-color: var(--form-color);
  background-color: var(--wp--preset--color--white);
}

/* クリアボタン */
.c-form-002__input-clear {
  transition: opacity var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--fast)
      var(--wp--custom--transition--timing--ease);
}

.c-form-002__input-clear:hover {
  opacity: 0.8;
  transform: rotate(90deg);
}

.c-form-002__input-clear:active {
  opacity: 0.6;
  transform: rotate(90deg) scale(0.95);
}

/* ============================================
     モーダル アニメーション
     ============================================ */

/* モーダルオーバーレイ */
.c-form-002__modal-overlay {
  transition: opacity var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

/* モーダルコンテンツ */
.c-form-002__modal-content {
  transition: opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
}

/* モーダル表示アニメーション */
.c-form-002__modal.is-active .c-form-002__modal-overlay {
  animation: modal-overlay-in var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

.c-form-002__modal.is-active .c-form-002__modal-content {
  animation: modal-content-in var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing--ease);
}

@keyframes modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-content-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
     スクロールトップボタン アニメーション
     ============================================ */

.c-form-002__scroll-top {
  transition: opacity var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease),
    transform var(--wp--custom--transition--duration--base)
      var(--wp--custom--transition--timing--ease);
}

.c-form-002__scroll-top:hover {
  opacity: 0.9;
  transform: translateY(-4px);
}

.c-form-002__scroll-top:active {
  transform: translateY(-2px) scale(0.95);
  opacity: 0.95;
}

/* ============================================
     レスポンシブ調整（PC）
     ============================================ */

@media (min-width: 768px) {
  /* PC版ではホバーエフェクトをより強調 */
  .c-form-002__button:hover {
  }

  .c-form-002__unified-select-btn:hover {
  }
}