/*
 * フォント表示最適化専用CSS
 * font-display: swap 対応とレイアウトシフト軽減
 */

/* ベースフォント設定 - レイアウトシフト軽減のため類似メトリクスのフォールバック */
* {
  font-family:
    "noto-sans-cjk-jp",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.josefin,
.josefin * {
  font-family:
    "josefin-sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;
}

/* フォント読み込み状態の管理 */
.wf-loading * {
  /* フォント読み込み中は system フォントを使用 */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  /* レイアウトシフトを軽減するため、同等の line-height を維持 */
  line-height: 1.5;
}

.wf-loading .josefin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  /* Josefin Sans と同等の太さを維持 */
  font-weight: 700;
  /* 同等の文字間隔を維持 */
  letter-spacing: 0.05em;
}

.wf-active * {
  /* フォント読み込み完了後 */
  font-family:
    "noto-sans-cjk-jp",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition: font-family 0.1s ease-out;
}

.wf-active .josefin {
  font-family:
    "josefin-sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition: font-family 0.1s ease-out;
}

.wf-inactive * {
  /* フォント読み込み失敗時はシステムフォントのまま */
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.wf-inactive .josefin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* 新しいフォント状態管理 */
.font-loading * {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
}

.font-loading .josefin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
  font-weight: 700;
}

.font-fallback * {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.font-fallback .josefin {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
}

.font-loaded * {
  font-family:
    "noto-sans-cjk-jp",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition: font-family 0.2s ease-out;
}

.font-loaded .josefin {
  font-family:
    "josefin-sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  transition: font-family 0.2s ease-out;
}

/* パフォーマンス向上のため、フォント切り替え時のリフローを最小化 */
@supports (font-display: swap) {
  @font-face {
    font-family: "noto-sans-cjk-jp";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
  }

  @font-face {
    font-family: "noto-sans-cjk-jp";
    font-display: swap;
    font-style: normal;
    font-weight: 700;
  }

  @font-face {
    font-family: "josefin-sans";
    font-display: swap;
    font-style: normal;
    font-weight: 700;
  }
}

/* フォント読み込み中のちらつき防止 */
.wf-loading {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 160ms削減対策：重要なテキストの優先表示 */
h1,
h2,
h3,
.josefin {
  /* 重要な見出しは即座に表示 */
  font-display: swap;
}

/* レイアウトシフト軽減：フォントサイズとline-heightの調整 */
.josefin {
  /* Josefin Sans のメトリクスに近いフォールバック設定 */
  font-size: 4.5rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* モバイル対応でのフォント最適化 */
@media (max-width: 768px) {
  .josefin {
    font-size: 2.5rem;
  }

  /* モバイルでは system フォントを優先（パフォーマンス重視） */
  .wf-loading * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  }
}