/* anime.css - ミニマルアニメーション集 */

/* 初期状態：透明＆変形あり */
.anime {
  opacity: 0;
  transition: all 0.6s ease-out;
  will-change: opacity, transform;
}

/* アニメーションが発火したときに付与されるクラス */
.anime-active {
  opacity: 1;
  transform: none;
}

/* ========== アニメーションの種類 ========== */

/* フェードのみ（位置変化なし） */
.fade-in {
  transform: none;
}

/* 上から出現 */
.fade-up {
  transform: translateY(30px);
}
.fade-up.anime-active {
  transform: translateY(0);
}

/* 下から出現 */
.fade-down {
  transform: translateY(-30px);
}
.fade-down.anime-active {
  transform: translateY(0);
}

/* 左から出現 */
.fade-left {
  transform: translateX(-30px);
}
.fade-left.anime-active {
  transform: translateX(0);
}

/* 右から出現 */
.fade-right {
  transform: translateX(30px);
}
.fade-right.anime-active {
  transform: translateX(0);
}

/* ズームイン */
.zoom-in {
  transform: scale(0.9);
}
.zoom-in.anime-active {
  transform: scale(1);
}

/* ========== 遅延用 ========== */
.delay-01 { transition-delay: 0.2s; }
.delay-02 { transition-delay: 0.4s; }
.delay-03 { transition-delay: 0.6s; }
.delay-04 { transition-delay: 0.8s; }
.delay-05 { transition-delay: 1.0s; }