/* ==========================================================================
   Scroll Animations
   - Intersection Observer によるスクロール連動アニメーション
   - 行政書士事務所にふさわしい、落ち着いた表現
   ========================================================================== */

/* --- 基本: 表示前の状態 --- */
.sa {
  opacity: 0;
  will-change: opacity, transform;
}

/* --- 表示後 --- */
.sa.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   バリエーション
   ========================================================================== */

/* フェードイン + 下から上へ (デフォルト) */
.sa-up {
  transform: translateY(24px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* フェードイン + 左から右へ */
.sa-left {
  transform: translateX(-24px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* フェードイン + 右から左へ */
.sa-right {
  transform: translateX(24px);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* フェードインのみ (移動なし) */
.sa-fade {
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* スケールイン (少し小さい状態から) */
.sa-scale {
  transform: scale(0.97);
  transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   遅延 (段階表示用)
   ========================================================================== */

.sa-delay-1 { transition-delay: 0.1s; }
.sa-delay-2 { transition-delay: 0.2s; }
.sa-delay-3 { transition-delay: 0.3s; }
.sa-delay-4 { transition-delay: 0.4s; }
.sa-delay-5 { transition-delay: 0.5s; }
.sa-delay-6 { transition-delay: 0.6s; }

/* ==========================================================================
   アクセシビリティ: モーション低減設定
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sa {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}