@layer animations {
  /* ========================================
     Scroll Animation Base
  ======================================== */
  
  /* フェードイン（その場で） */
  .js-fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
  }

  .js-fade-in.is-visible {
    opacity: 1;
  }

  /* フェードイン + 下から上へ */
  .js-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .js-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ========================================
     Stagger Animation（子要素が順に表示）
  ======================================== */
  .js-fade-up-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .js-fade-up-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
  .js-fade-up-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
  .js-fade-up-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
  .js-fade-up-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
  .js-fade-up-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
  .js-fade-up-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

  .js-fade-up-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* ========================================
     Hero Animation（ページ読み込み時）
  ======================================== */
  .js-hero-fade {
    opacity: 0;
    transition: opacity 1s ease-out;
  }

  .js-hero-fade.is-visible {
    opacity: 1;
  }

  /* ========================================
     Reduced Motion（動きを減らす設定の場合）
  ======================================== */
  @media (prefers-reduced-motion: reduce) {
    .js-fade-in,
    .js-fade-up,
    .js-fade-up-stagger > *,
    .js-hero-fade {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}