/* =========================================================
   enhance.css — モダン表現の追加レイヤー（任意・切り離し可）

   このファイルは style.css を一切書き換えずに、
   最新のCSS機能だけで見た目を底上げする「追加レイヤー」です。

   ■ 元に戻す方法
     各HTMLの <link rel="stylesheet" href="./css/enhance.css" /> を
     1行削除するだけで、完全に元の状態に戻ります。
     （style.css には手を加えていません）

   ■ 使用している新しい技術
     - スクロール駆動アニメーション（animation-timeline: view()）
       → JSなしでスクロールに連動したフェードイン
     - View Transitions API（@view-transition）
       → ページ遷移をクロスフェード
     - color-mix() / text-wrap: balance
     すべて @supports で囲むか、非対応でも無視される書き方のため、
     未対応ブラウザ（Safari旧版など）では従来の見た目のまま表示されます。

   ■ アクセシビリティ
     OSの「視差効果を減らす」設定時は、全アニメーションを無効化します。
   ========================================================= */

/* ---------------------------------------------------------
   1. ページ遷移のクロスフェード（View Transitions API）
   トップ → プライバシーポリシー等の移動がなめらかになります。
   非対応ブラウザでは従来通りの即時遷移。
   --------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: enh-fade-out 0.25s ease both;
}

::view-transition-new(root) {
  animation: enh-fade-in 0.35s ease both;
}

@keyframes enh-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes enh-fade-in {
  from {
    opacity: 0;
  }
}

/* ---------------------------------------------------------
   2. スクロール連動フェードイン（JS不要）
   AOS（data-aos属性）が付いている要素は二重動作を避けるため対象外。
   対象：メンバーカード／パートナー枠／規約ページの見出し
   --------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .member-card,
    .partner-box,
    .legal-body h2 {
      animation: enh-rise-in linear both;
      animation-timeline: view();
      /* 画面下から入り始め、少し上がった時点で完了 */
      animation-range: entry 0% entry 45%;
    }
  }
}

@keyframes enh-rise-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   3. 大きな図版のスクロール連動（ふわっと立ち上がる）
   data-aos が付いた親の「中の img」に効かせるため、
   AOSのフェードとは競合しません。
   --------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-public img,
    #stats img {
      animation: enh-zoom-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }
  }
}

@keyframes enh-zoom-in {
  from {
    opacity: 0.55;
    transform: scale(0.965);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------------------------------------------------
   4. ホバー表現の質感アップ
   既存の transition: all を、より自然なイージングに上書き。
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .member-card {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .member-card:hover {
    transform: translateY(-8px);
  }

  .partner-box {
    transition:
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s ease;
  }

  .partner-box.has-logo:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -12px rgba(10, 37, 64, 0.25);
  }
}

/* ※ ロゴのグレースケール表示は、自治体・企業ロゴの色が失われるため無効化しました。
   （スマホではホバーがないため、常にグレーのまま表示されてしまいます） */

/* ---------------------------------------------------------
   5. 見出しの折り返し最適化（text-wrap）
   1行だけ余る不格好な折り返しを自動で回避します。
   --------------------------------------------------------- */
h1,
h2,
h3 {
  text-wrap: balance;
}

.legal-body p,
.concept-text p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   6. CTAボタンの光沢（color-mix で既存カラーから自動生成）
   --------------------------------------------------------- */
@supports (background: color-mix(in srgb, red, blue)) {
  @media (prefers-reduced-motion: no-preference) {
    .btn-hgc-primary:hover,
    a[href="#contact"]:hover {
      box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--secondary) 70%, transparent);
    }
  }
}

/* ---------------------------------------------------------
   7. フォーム入力欄のフォーカス表現
   --------------------------------------------------------- */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   8. アクセシビリティ：視差効果を減らす設定への対応
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}