/*
 * Loading Overlay CSS
 *
 * 画面遷移時に表示するローディングインジケータのスタイル定義。
 * View Transitionsの対象外とすることで、遷移アニメーション中も固定表示される。
 */

/* ============================================
   View Transition 除外設定
   ============================================ */

/* ローディングオーバーレイを独立したトランジショングループとして定義 */
.loading-overlay {
  view-transition-name: loading-overlay;
}

/* ローディングオーバーレイのトランジションアニメーションを無効化 */
::view-transition-old(loading-overlay),
::view-transition-new(loading-overlay) {
  animation: none;
}

/* ============================================
   オーバーレイ基本スタイル
   ============================================ */

.loading-overlay {
  /* フルスクリーン固定配置 */
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* 中央寄せレイアウト */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 半透明の白背景 */
  background-color: rgb(255 255 255 / 0.8);

  /* 背景のぼかし効果（オプション） */
  backdrop-filter: blur(2px);
}

/* 非表示状態 */
.loading-overlay.hidden {
  display: none;
}

/* ============================================
   スピナーコンテナ
   ============================================ */

.loading-spinner {
  /* スピナーのサイズ */
  width: 3rem;   /* 48px */
  height: 3rem;  /* 48px */
}

/* ============================================
   スピナーアイコン（SVG）
   ============================================ */

.loading-spinner-icon {
  width: 100%;
  height: 100%;

  /* 回転アニメーション */
  animation: loading-spin 1s linear infinite;
}

/* 背景トラック（薄いグレー） */
.loading-spinner-track {
  color: #e5e7eb;  /* gray-200 */
  opacity: 0.5;
}

/* 回転する円弧（テーマカラー） */
.loading-spinner-arc {
  color: #92400e;  /* amber-800 */

  /* 円弧の開始位置を上部に */
  transform-origin: center;
}

/* ============================================
   キーフレーム定義
   ============================================ */

@keyframes loading-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   アクセシビリティ対応
   ============================================ */

/* 動きを減らす設定が有効な場合、アニメーションを控えめに */
@media (prefers-reduced-motion: reduce) {
  .loading-spinner-icon {
    animation-duration: 2s;
  }
}