/* ================================================================================
 * ファイル名: app/assets/stylesheets/landing_animations.css
 * 📊 リファクタリング基準（コメント行は行数カウントから除外）
 *   ✅ 500行未満: 完璧
 *   ✅ 800行未満: 問題なし
 *   ⚠️  1200行未満: 注意喚起・リファクタリング要検討
 *   🚨 1200行以上: リファクタリング必須
 * 現在のコード行数: 約40行（コメント除く） / 総行数 84行 → ✅ 完璧
 *
 * 🎯 作成日: 2026-03-20
 * 📝 目的: ランディングページのアニメーション定義（gradient-shift・pulse-glow・スクロールトリガー）
 *
 * 【分離元】landing.css（Phase 1 セクション別分離）
 *
 * 【読込順序の注意】（2026-05-03 追記）
 *   landing_animations.css は landing.html.erb の stylesheet_link_tag で
 *   landing.css より先に読み込む必要がある。
 *   理由: .animate-on-scroll の transition プロパティを後発の section CSS
 *         （例: .landing-demo__card）が上書きできるよう、特異性の同じ
 *         ルール同士で「後勝ち」を成立させるため。順序が逆になると
 *         demo カードのフォーカス拡大アニメ（flex transition）が無効化される。
 *
 * 【セクション構成】
 *   1. @keyframes gradient-shift: ヒーロー背景のスケール+回転アニメ
 *   2. @keyframes pulse-glow: ボタンの発光パルス
 *   3. animate-on-scroll: スクロール連動フェードイン（JSと連携）
 *   4. staggered delay: 機能カードの段階的表示（0.1秒刻み）
 *
 * 【ジュニアエンジニア向け解説】
 *   - animate-on-scroll クラスは初期状態で opacity: 0 + translateY(30px)
 *   - JSがスクロール位置を検知して .is-visible クラスを付与すると表示される
 *   - transition-delay で各カードの出現タイミングをずらす（staggered effect）
 *
 * 【関連ファイル】
 *   - app/assets/stylesheets/landing.css（CSS変数・ベーススタイル）
 *   - public/javascripts/landing_page.js（スクロールトリガーJS）
 *
 * 【変更履歴】
 *   2026-03-22: 日本語コメント追加（保守性向上）
 *   2026-05-03: landing.html.erb 配線確認 + 読込順序の注意事項を追記（Phase 1+2 リファクタリング）
 * ================================================================================ */

/* ----------------------------------------
   アニメーション定義
   gradient-shift: ヒーロー背景のスケール+回転アニメ。
   pulse-glow: ボタンの発光パルス。
   animate-on-scroll: スクロール連動フェードイン（JSと連携）。
   機能カードには0.1秒刻みのstaggered delay。
   ---------------------------------------- */
@keyframes gradient-shift {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  33% {
    opacity: 0.8;
    transform: scale(1.1) rotate(1deg);
  }
  66% {
    opacity: 0.9;
    transform: scale(0.95) rotate(-1deg);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animations（カテゴリカードの段階的表示） */
.landing-features__category:nth-child(1) { transition-delay: 0s; }
.landing-features__category:nth-child(2) { transition-delay: 0.1s; }
.landing-features__category:nth-child(3) { transition-delay: 0.2s; }
.landing-features__category:nth-child(4) { transition-delay: 0.3s; }

/* Pricing carousel cards: no staggered delay (handled by carousel JS) */

/* Problem carousel cards: no staggered delay (handled by carousel JS) */