/**
 * GARMIN 汎用ボタンシステム
 *
 * 動画ページのボタンスタイルを汎用化
 * どのページでも使用できる統一されたボタンデザイン
 *
 * バージョン: 1.1.0
 * 最終更新: 2026-01-09
 * 変更内容: ホバー時のシアングラデーション有効化、デフォルト中央揃え追加
 */

/* ============================================================================
   CSS変数（既存のデザインシステムと統一）
   ========================================================================= */

:root {
  /* カラーシステム */
  --garmin-navy-900: #0a1628;
  --garmin-navy-800: #0f1f35;
  --garmin-ocean-700: #1e3a5f;
  --garmin-ocean-600: #2c4f7c;
  --garmin-cyan-400: #00d4ff;
  --garmin-cyan-300: #33ddff;
  --garmin-white: #ffffff;

  /* フォント */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* エフェクト */
  --shadow-sm: 0 2px 8px rgba(10, 22, 40, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 22, 40, 0.12);
  --shadow-lg: 0 8px 24px rgba(10, 22, 40, 0.16);

  /* イージング */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* アニメーション速度 */
  --duration-base: 300ms;
}

/* ============================================================================
   基本ボタンスタイル
   ========================================================================= */

.garmin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--garmin-ocean-700), var(--garmin-ocean-600));
  color: var(--garmin-white);
  font-family: var(--font-body);
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1.5;
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out-quad);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* ホバーエフェクト用のシアングラデーション */
.garmin-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--garmin-cyan-400), var(--garmin-cyan-300));
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-quad);
  z-index: 0;
}

/* テキストとアイコンを前面に */
.garmin-button span,
.garmin-button svg {
  position: relative;
  z-index: 1;
}

/* ホバー状態 */
.garmin-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.garmin-button:hover::before {
  opacity: 1;
}

/* アイコンの動きアニメーション */
.garmin-button svg {
  transition: transform var(--duration-base) var(--ease-out-quad);
}

.garmin-button:hover svg {
  transform: translateX(4px);
}

/* フォーカス状態（アクセシビリティ） */
.garmin-button:focus {
  outline: 3px solid var(--garmin-cyan-400);
  outline-offset: 4px;
}

/* アクティブ状態 */
.garmin-button:active {
  transform: translateY(0);
}

/* ============================================================================
   サイズバリエーション
   ========================================================================= */

/* 小サイズ */
.garmin-button--small {
  font-size: 0.875rem; /* 14px */
  padding: 10px 20px;
}

/* 中サイズ（デフォルト） */
.garmin-button--medium {
  font-size: 1rem; /* 16px */
  padding: 12px 28px;
}

/* 大サイズ */
.garmin-button--large {
  font-size: 1.125rem; /* 18px */
  padding: 14px 32px;
}

/* ============================================================================
   形状バリエーション
   ========================================================================= */

/* 角丸（デフォルト） */
.garmin-button--rounded {
  border-radius: 8px;
}

/* 完全な丸型ボタン */
.garmin-button--pill {
  border-radius: 50px;
}

/* 四角ボタン */
.garmin-button--square {
  border-radius: 4px;
}

/* ============================================================================
   幅バリエーション
   ========================================================================= */

/* 全幅ボタン */
.garmin-button--full-width {
  width: 100%;
  display: flex;
}

/* 自動幅（デフォルト） */
.garmin-button--auto {
  width: auto;
}

/* ============================================================================
   ボタンラッパー（中央揃え）
   ========================================================================= */

/* ボタンを中央揃えにするラッパー */
.garmin-button-wrapper {
  text-align: center;
  margin: 1.5rem 0;
}

/* ラッパー内のボタンはインライン要素として振る舞う */
.garmin-button-wrapper .garmin-button {
  display: inline-flex;
}

/* ============================================================================
   カラーバリエーション（将来の拡張用）
   ========================================================================= */

/* プライマリ（デフォルト：オーシャンブルー） */
.garmin-button--primary {
  background: linear-gradient(135deg, var(--garmin-ocean-700), var(--garmin-ocean-600));
}

/* セカンダリ（ネイビー） */
.garmin-button--secondary {
  background: linear-gradient(135deg, var(--garmin-navy-900), var(--garmin-navy-800));
}

.garmin-button--secondary::before {
  background: linear-gradient(135deg, var(--garmin-ocean-700), var(--garmin-ocean-600));
}

/* アウトライン */
.garmin-button--outline {
  background: transparent;
  border: 2px solid var(--garmin-ocean-600);
  color: var(--garmin-ocean-600);
  box-shadow: none;
}

.garmin-button--outline::before {
  background: linear-gradient(135deg, var(--garmin-ocean-700), var(--garmin-ocean-600));
}

.garmin-button--outline:hover {
  color: var(--garmin-white);
}

/* ============================================================================
   無効状態
   ========================================================================= */

.garmin-button:disabled,
.garmin-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================================
   レスポンシブデザイン
   ========================================================================= */

/* モバイル（768px以下） */
@media (max-width: 768px) {
  .garmin-button--large {
    font-size: 1rem;
    padding: 12px 28px;
  }

  .garmin-button--medium {
    font-size: 0.9375rem;
    padding: 11px 24px;
  }

  .garmin-button--small {
    font-size: 0.8125rem;
    padding: 9px 18px;
  }
}

/* スマホ（480px以下） */
@media (max-width: 480px) {
  .garmin-button {
    font-size: 0.9375rem;
    padding: 10px 24px;
  }

  .garmin-button--large {
    font-size: 0.9375rem;
    padding: 11px 24px;
  }

  .garmin-button--small {
    font-size: 0.8125rem;
    padding: 8px 16px;
  }
}

/* ============================================================================
   Reduced Motion 対応（アクセシビリティ）
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .garmin-button,
  .garmin-button::before,
  .garmin-button svg {
    transition: none;
  }

  .garmin-button:hover,
  .garmin-button:hover svg {
    transform: none;
  }
}

/* ============================================================================
   使用例（コメント）
   ========================================================================= */

/*
使用方法:

1. 基本的なボタン:
   <a href="#" class="garmin-button">
     <span>ボタンテキスト</span>
   </a>

2. 矢印アイコン付き:
   <a href="#" class="garmin-button">
     <span>すべての商品を見る</span>
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
       <path d="M7.5 5L12.5 10L7.5 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
     </svg>
   </a>

3. サイズと形状の組み合わせ:
   <a href="#" class="garmin-button garmin-button--large garmin-button--pill">
     <span>大きな丸型ボタン</span>
   </a>

4. 全幅ボタン:
   <button class="garmin-button garmin-button--full-width">
     <span>送信する</span>
   </button>

5. アウトラインボタン:
   <a href="#" class="garmin-button garmin-button--outline">
     <span>詳細を見る</span>
   </a>
*/