/*
 * assets/css/components.css
 *
 * 共通コンポーネントCSS。
 * ボタン・フォーム・エラーメッセージ・アニメーション・カードなどのサイト共通スタイル。
 * Tailwindクラスで足りない細かい調整はここに書く。
 */

/* =====================================================================
   エラー表示
   ===================================================================== */

/* バリデーションエラーメッセージ */
.error-msg {
  color: #C62828;
  font-size: 0.75rem;
  margin-top: 0.25rem;
  display: block;
}

/* フォーム入力フィールドのエラー状態 */
.input-error {
  border-color: #C62828 !important;
}

/* =====================================================================
   ボタン状態
   ===================================================================== */

/* フォーム送信中ローディング状態（二重送信防止） */
.btn-loading {
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
}

/* =====================================================================
   スクロールアニメーション
   ===================================================================== */

/* .reveal: common.js の IntersectionObserver が .revealed を付与することで発火 */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 連続要素の遅延表示（親に .reveal-group を付けると子要素が順番に出る） */
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.40s; }

/* =====================================================================
   フェードイン（チェックアウトステップ切り替え等に使用）
   ===================================================================== */

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   ユーティリティ
   ===================================================================== */

/* スクリーンリーダー専用テキスト（Tailwind の sr-only と同等） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 製品コード・スペック値は文字間隔ゼロ（数字・英字の判読性向上） */
.product-code,
.spec-value,
.font-mono {
  letter-spacing: 0;
}