/* ============================================================
   KUMOTO FP Office — アニメーション専用スタイル
   方針：動いていることを意識させない、自然で上品な動き
   Apple / 無印良品 / 高級ホテルサイト水準
   ============================================================ */

/* ============================================================
   1. GPU最適化のベースルール
   ============================================================ */
.sr-target,
.sr-image,
.sr-stagger > * {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* アニメーション完了後はwill-changeを解放 */
.sr-done {
  will-change: auto;
}

/* ============================================================
   2. Scroll Reveal — セクション・要素共通
   初期状態：非表示（下から24px・透明）
   ============================================================ */
.sr-target {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.sr-target.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* セクションタイトル・リード文：少しゆっくり */
.sr-target-slow {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sr-target-slow.sr-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   3. 画像 Scroll Reveal
   わずかなスケール（1.02倍）+フェードイン
   ============================================================ */
.sr-image {
  opacity: 0;
  transform: scale(0.98) translateY(16px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.sr-image.sr-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ============================================================
   4. Stagger Animation — カード群
   JSで --stagger-i カスタムプロパティを付与
   ============================================================ */
.sr-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--stagger-i, 0) * 0.09s);
}

.sr-stagger.sr-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   5. ボタン — hover / active エフェクト
   既存のhoverスタイルに scale を追加する形で補強
   ============================================================ */

/* 全 .btn に共通の scale トランジション追加 */
.btn {
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    color var(--transition);
}

/* ホバー：1.03倍に拡大（既存のtranslateYと共存） */
.btn:hover {
  transform: scale(1.03) translateY(-2px);
}

/* プライマリはhoverを上書き */
.btn-primary:hover {
  transform: scale(1.03) translateY(-2px);
  box-shadow: 0 8px 36px rgba(205, 136, 88, 0.58);
}

/* アウトライン系 */
.btn-outline:hover,
.btn-outline-white:hover {
  transform: scale(1.03) translateY(-1px);
}

/* btn-brown/gold/sage/green */
.btn-brown:hover,
.btn-gold:hover,
.btn-sage:hover,
.btn-green:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: 0 6px 24px rgba(205, 136, 88, 0.46);
}

/* クリック（active）：0.97倍に縮む — 押した感覚 */
.btn:active {
  transform: scale(0.97) translateY(0) !important;
  box-shadow: none !important;
  transition-duration: 0.1s;
}

/* ナビCTAボタン */
.nav-cta-btn:hover {
  transform: scale(1.03) translateY(-1px) !important;
}
.nav-cta-btn:active {
  transform: scale(0.97) translateY(0) !important;
  transition-duration: 0.1s;
}

/* ============================================================
   6. ヘッダー — スクロール時シャドウ
   .scrolled クラスをJSで付与
   ============================================================ */
#site-header {
  transition:
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.35s ease;
}

/* ページ最上部：元のシャドウをごく薄く */
#site-header.at-top {
  box-shadow: 0 1px 8px rgba(65, 46, 39, 0.04);
}

/* スクロール開始後：少し強いシャドウ */
#site-header.scrolled {
  box-shadow:
    0 2px 20px rgba(65, 46, 39, 0.12),
    0 1px 4px rgba(65, 46, 39, 0.06);
}

/* ============================================================
   7. FAQ アコーディオン — スムーズな高さ変化
   既存の max-height transition を強化
   ============================================================ */
.faq-a {
  transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 矢印回転は既存（style.cssで .faq-arrow / .faq-item.open .faq-arrow 定義済み） */
/* transition をより自然に */
.faq-arrow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   8. カードホバー — 既存に自然な浮き上がりを追加
   ============================================================ */
.card {
  transition:
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   9. アクセシビリティ — モーション低減設定の尊重
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sr-target,
  .sr-target-slow,
  .sr-image,
  .sr-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn,
  .btn:hover,
  .btn:active,
  .nav-cta-btn:hover,
  .nav-cta-btn:active {
    transform: none !important;
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
  }

  #site-header {
    transition: none;
  }

  .faq-a {
    transition: none;
  }
}