/* アニメーション共通：初期値と可変パラメータ */
.animate-ignition {
  opacity: 0;
  --delay: 0s;
  --duration: 0.8s;
  will-change: transform, opacity;
}

/* 発動時に適用される共通プロパティ */
.animate-ignition.is-visible {
  animation-delay: var(--delay);
  animation-duration: var(--duration);
  animation-timing-function: ease;
  animation-fill-mode: both; /* ← delay中も初期状態を維持 */
  animation-play-state: running;
}


/* ===== 個別アニメーション（必要に応じてクラスを併記） ===== */

/* 1) fade-in */
.fade-in.is-visible { animation-name: fadeIn; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2) slide-up（下→上） */
.slide-up.is-visible { animation-name: slideUp; }
@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* 3) scale-up（縮小→等倍） */
.scale-up.is-visible { animation-name: scaleUp; }
@keyframes scaleUp {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* 4) rotate-in（回転→正位置） */
.rotate-in.is-visible { animation-name: rotateIn; }
@keyframes rotateIn {
  from { transform: rotateY(-180deg); opacity: 0; }
  to   { transform: rotateY(0deg);   opacity: 1; }
}

/* 5) bounce-in（少し弾む入り） */
.bounce-in.is-visible { animation-name: bounceIn; }
@keyframes bounceIn {
  0%   { transform: scale(0.9);  opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* 6) slide-left（左→元位置） */
.slide-left.is-visible { animation-name: slideLeft; }
@keyframes slideLeft {
  from { transform: translateX(-200px); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}

/* 7) slide-right（右→元位置） */
.slide-right.is-visible { animation-name: slideRight; }
@keyframes slideRight {
  from { transform: translateX(200px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}


/* 参考：動きを抑制したい人のための配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .animate-ignition,
  .animate-ignition.is-visible {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}