/* =========================================
   Scroll Animation Component
   - IntersectionObserver でビューポートに
     入った要素をアニメーション表示
   ========================================= */

/* ── 初期状態（非表示） ── */
.sa-hidden {
  opacity: 0;
  transition: none;
}

/* ── フェードイン + 上から ── */
.sa-fade-up.sa-hidden {
  transform: translateY(40px);
}

.sa-fade-up.sa-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── フェードイン + 下から ── */
.sa-fade-down.sa-hidden {
  transform: translateY(-30px);
}

.sa-fade-down.sa-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── フェードイン + 左から ── */
.sa-fade-left.sa-hidden {
  transform: translateX(-40px);
}

.sa-fade-left.sa-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── フェードイン + 右から ── */
.sa-fade-right.sa-hidden {
  transform: translateX(40px);
}

.sa-fade-right.sa-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── フェードインのみ ── */
.sa-fade-in.sa-hidden {
  transform: none;
}

.sa-fade-in.sa-visible {
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* ── スケールイン（ポップアップ） ── */
.sa-scale-in.sa-hidden {
  transform: scale(0.85);
}

.sa-scale-in.sa-visible {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── stagger 用ディレイ ── */
.sa-delay-1 { transition-delay: 0.1s !important; }
.sa-delay-2 { transition-delay: 0.2s !important; }
.sa-delay-3 { transition-delay: 0.3s !important; }
.sa-delay-4 { transition-delay: 0.4s !important; }
.sa-delay-5 { transition-delay: 0.5s !important; }
.sa-delay-6 { transition-delay: 0.6s !important; }

/* ── prefers-reduced-motion 対応 ── */
@media (prefers-reduced-motion: reduce) {
  .sa-hidden {
    opacity: 1 !important;
    transform: none !important;
  }
  [class*="sa-"].sa-visible {
    transition: none !important;
  }
}