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

/* 発動時に適用される共通プロパティ */
.animate-ignition.is-visible {
  opacity: 1;                 /* ← これを追加 */
  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.85);  opacity: 0; }
  40%  { transform: scale(1.4);  opacity: 1; } /* 1回目：大きく */
  55%  { transform: scale(0.96); }               /* 戻る */
  70%  { transform: scale(1.1); }               /* 2回目：少し */
  85%  { transform: scale(0.98); }               /* 微調整 */
  100% { transform: scale(1);    opacity: 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; }
}


/*8 text-slide（テキスト1文字ずつ表示） テキストにspan追加はJS*/
.text-slide {
  overflow: hidden;
}
.text-slide span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-0.6em);
}
.text-slide.is-visible span {
  animation: textSlideIn 0.3s ease forwards;
  animation-delay: var(--char-delay);
}
@keyframes textSlideIn {
  from {
    opacity: 0;
    transform: translateX(-0.6em);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* 参考：個別に動きを抑制するため用 */
@media (prefers-reduced-motion: reduce) {
  .animate-ignition,
  .animate-ignition.is-visible {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}