/* =========================
   基本アニメーション定義
========================= */

/* アニメーション共通設定 */
.animated {
  animation-fill-mode: both;
}

/* fadeIn 本体 */
.fadeIn {
  animation-name: fadeIn;
}

/* jackInTheBox 本体 */
.jackInTheBox {
  animation-name: jackInTheBox;
}

@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================
   フェード方向
========================= */
.fade-top {
  transform: translateY(-20px);
}
.fade-bottom {
  transform: translateY(20px);
}
.fade-left {
  transform: translateX(-20px);
}
.fade-right {
  transform: translateX(20px);
}
.fade-center {
  transform: translate(0, 0);
}
.fadeIn.fade-top {
  animation-name: fadeInDown;
}
.fadeIn.fade-bottom {
  animation-name: fadeInUp;
}
.fadeIn.fade-left {
  animation-name: fadeInLeft;
}
.fadeIn.fade-right {
  animation-name: fadeInRight;
}
.fadeIn.fade-center {
  animation-name: fadeIn;
}

/* keyframes for fade directions */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: none;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================
   再発火（スクロール）
========================= */
.o-replay-scroll {
  will-change: transform, opacity;
}