/* ========================================
   スクロール フェードインアニメーション
   Intersection Observer で .is-visible が付与されたら発火
   blur → clear + slide の2025-2026トレンド対応
   ======================================== */

/* ----------------------------------------
   共通: 初期状態（非表示）
   ---------------------------------------- */
.fade-in,
.fade-in-up,
.fade-in-left,
.fade-in-right,
.fade-in-scale {
  opacity: 0;
  filter: blur(6px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  will-change: opacity, transform, filter;
}

/* 各バリエーションの初期位置 */
.fade-in {
  transform: none;
}

.fade-in-up {
  transform: translateY(30px);
}

.fade-in-left {
  transform: translateX(-30px);
}

.fade-in-right {
  transform: translateX(30px);
}

.fade-in-scale {
  transform: scale(0.96);
  filter: blur(10px);
}

/* ----------------------------------------
   表示状態（.is-visible 付与後）
   ---------------------------------------- */
.fade-in.is-visible,
.fade-in-up.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible,
.fade-in-scale.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) translateX(0) scale(1);
}

/* ----------------------------------------
   ディレイ（連続表示用）
   ---------------------------------------- */
.delay-1 {
  transition-delay: 0.42s;
}

.delay-2 {
  transition-delay: 0.54s;
}

.delay-3 {
  transition-delay: 0.66s;
}

.delay-4 {
  transition-delay: 0.78s;
}

.delay-5 {
  transition-delay: 0.9s;
}

.delay-6 {
  transition-delay: 1.02s;
}

.delay-7 {
  transition-delay: 1.14s;
}

.delay-8 {
  transition-delay: 1.26s;
}

/* ----------------------------------------
   スピードバリエーション
   ---------------------------------------- */
.anim-fast {
  transition-duration: 0.7s;
}

.anim-slow {
  transition-duration: 1.8s;
}

/* ----------------------------------------
   Hero専用 — 初回ロード時アニメーション
   ---------------------------------------- */
.hero__title {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  animation: heroFadeInUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.hero__cta {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(16px);
  animation: heroFadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

.hero__badges {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(16px);
  animation: heroFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}

.hero__feature {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(20px);
  animation: heroFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__feature:nth-child(1) {
  animation-delay: 1.0s;
}

.hero__feature:nth-child(2) {
  animation-delay: 1.2s;
}

.hero__feature:nth-child(3) {
  animation-delay: 1.4s;
}

@keyframes heroFadeInUp {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes heroFadeInRight {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
  }
}

/* ----------------------------------------
   アクセシビリティ: モーション軽減設定を尊重
   ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .fade-in,
  .fade-in-up,
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .hero__title,
  .hero__cta,
  .hero__badges,
  .hero__feature {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
  }

  .faq__question::after {
    transition: none;
  }

}