/* ===== キーフレーム ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 100%, 0); }
  to   { opacity: 1; transform: translateZ(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to   { opacity: 1; transform: translateZ(0); }
}

/* ===== 初期状態（非表示）===== */
.fadeIn, .fadeInUp, .fadeInRight {
  opacity: 0;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-duration: 0.6s;
}

/* ===== o-anim-ready が付いたら再生 ===== */
.o-anim-active.fadeIn      { animation-name: fadeIn;      animation-play-state: running; }
.o-anim-active.fadeInUp    { animation-name: fadeInUp;    animation-play-state: running; }
.o-anim-active.fadeInRight { animation-name: fadeInRight; animation-play-state: running; }

/* ===== スピード ===== */
.slow        { animation-duration: 1s; }
.slower      { animation-duration: 1.4s; }

/* ===== ディレイ ===== */
.delay-200ms { animation-delay: 0.2s; }
.delay-500ms { animation-delay: 0.5s; }
.delay-1s    { animation-delay: 1s; }
.delay-2s    { animation-delay: 2s; }
.delay-4s    { animation-delay: 4s; }