/* OptiAIze LP — animations.css
   広告運用向け軽量版
   ・ヒーロー（ファーストビュー）は即座表示 → data-anim を一切付与しない
   ・スクロール入場は opacity + translateY のみ（GPU composited）
   ・連続ループ系 repaint アニメーション（box-shadow/background-clip 等）は排除
   ・prefers-reduced-motion 対応済み
----------------------------------------------------------------- */

/* =================================================================
   1. スクロール入場アニメーション基底
      ※ヒーローエリアの要素には data-anim を付与しないこと（LCP保護）
================================================================= */
@media (prefers-reduced-motion: no-preference) {
  [data-anim] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity  0.52s ease-out,
      transform 0.52s ease-out;
  }

  [data-anim].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =================================================================
   2. CTA コンサルボタン — ホバー時スケール + 光の帯スイープ
      transform + opacity のみで repaint を最小化
================================================================= */
.hero-cta-card--consult {
  position: relative;
  overflow: hidden;
  /* styles.css の transition を上書き（より自然なバウンス） */
  transition:
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.24s ease !important;
}

.hero-cta-card--consult:hover {
  transform: scale(1.028) translateY(-2px) !important;
  box-shadow: 0 18px 44px rgba(0, 57, 120, 0.38) !important;
}

/* 光の帯（transform のみ → GPU composited） */
.hero-cta-card--consult::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 20%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 80%
  );
  transform: translateX(-170%);
  transition: transform 0.48s ease;
  pointer-events: none;
  border-radius: inherit;
}

.hero-cta-card--consult:hover::after {
  transform: translateX(170%);
}

/* =================================================================
   3. 資料ダウンロードボタン — 控えめなホバーリフト
================================================================= */
.hero-cta-card--download {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease !important;
}

.hero-cta-card--download:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(0, 57, 120, 0.14) !important;
}

/* =================================================================
   4. プランCTAボタン — ホバー時スケール + シャイン
================================================================= */
.plan-cta-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.24s ease;
}

.plan-cta-btn:hover {
  transform: scale(1.02) translateY(-1px);
  box-shadow: 0 14px 36px rgba(0, 57, 120, 0.32);
}

.plan-cta-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 20%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 80%
  );
  transform: translateX(-170%);
  transition: transform 0.48s ease;
  pointer-events: none;
  border-radius: inherit;
}

.plan-cta-btn:hover::after {
  transform: translateX(170%);
}

/* =================================================================
   5. FAQアコーディオン — スムーズ展開
================================================================= */
@media (prefers-reduced-motion: no-preference) {
  @keyframes faq-reveal {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .faq-item[open] .faq-answer {
    animation: faq-reveal 0.28s ease-out forwards;
  }
}

/* =================================================================
   6. Section kicker — スクロール到達時にアンダーライン伸長
================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .section-kicker::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: var(--color-accent, #0086d9);
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.28s;
  }

  .section-head.is-visible .section-kicker::after {
    width: 100%;
  }
}

/* section-kicker は position: relative が必要 */
.section-kicker {
  position: relative;
  display: inline-flex;
}

/* =================================================================
   7. Feature card — ホバーリフト（transform のみ）
================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .feature-card {
    transition: transform 0.26s ease, box-shadow 0.26s ease;
  }

  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(0, 57, 120, 0.11);
  }
}