/* Turbo Progress Bar Customization */
/* Growing + Fade スタイル：パルス効果で成長とフェード */

.turbo-progress-bar {
  /* Position and z-index */
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  right: 0;

  /* 細く控えめな高さ */
  height: 3px;

  /* 常に画面幅100%を使用 */
  width: 100% !important;

  /* 薄い背景トラック */
  background: rgba(101, 127, 75, 0.1);

  z-index: 2147483647;

  /* 不透明度のトランジションのみ */
  transition: opacity 60ms 60ms ease-in;
  transform: translate3d(0, 0, 0);

  /* 控えめなグロー効果 */
  box-shadow: 0 0 6px rgba(101, 127, 75, 0.2);
  border-radius: 0;
  overflow: hidden;
}

/* Growing + Fade アニメーション：幅が成長してフェードアウト */
.turbo-progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;

  /* tea-greenブランドカラーのグラデーション */
  background: linear-gradient(
    to right,
    var(--tea-green-500),
    var(--tea-green-400),
    var(--tea-green-300),
    var(--tea-green-400),
    var(--tea-green-500)
  );

  /* Growing + Fadeアニメーション */
  animation: growingFade 1.5s ease-in-out infinite;

  /* 控えめなグロー効果 */
  box-shadow: 0 0 8px rgba(101, 127, 75, 0.4);
}

/* Growing + Fade アニメーションの定義 */
/* 幅が0→100%に成長しながら、フェードイン→フェードアウト */
@keyframes growingFade {
  0% {
    width: 0%;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}


/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .turbo-progress-bar {
    /* ダークモードでは背景を少し濃く */
    background: rgba(101, 127, 75, 0.15);
    box-shadow: 0 0 8px rgba(101, 127, 75, 0.3);
  }

  .turbo-progress-bar::after {
    /* Growingバーのグロー効果を強調 */
    box-shadow: 0 0 10px rgba(101, 127, 75, 0.5);
  }
}

/* Tailwind .dark クラス対応 */
.dark .turbo-progress-bar {
  background: rgba(101, 127, 75, 0.15);
  box-shadow: 0 0 8px rgba(101, 127, 75, 0.3);
}

.dark .turbo-progress-bar::after {
  box-shadow: 0 0 10px rgba(101, 127, 75, 0.5);
}

/* レスポンシブ対応：デバイスサイズに応じた高さ調整 */
@media (max-width: 768px) {
  .turbo-progress-bar {
    /* モバイルではさらに細く（2px） */
    height: 2px;
  }
}

@media (min-width: 1920px) {
  .turbo-progress-bar {
    /* 大画面でも3pxを維持（控えめに） */
    height: 3px;
  }
}

/* 状態別の代替カラーテーマ（将来の拡張用） */
.turbo-progress-bar.error::after {
  /* エラー状態：赤のグラデーション */
  background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.5);
}

.turbo-progress-bar.success::after {
  /* 成功状態：緑のグラデーション */
  background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80);
  box-shadow: 0 0 12px rgba(22, 163, 74, 0.5);
}

/* アクセシビリティ：モーション軽減設定への対応 */
@media (prefers-reduced-motion: reduce) {
  .turbo-progress-bar::after {
    /* Growing + Fadeアニメーションを無効化 */
    animation: none;
    /* 静的に表示（画面幅の50%を固定表示） */
    width: 50%;
    opacity: 0.8;
  }
}