/* ==========================================================================
   animation.css — スクロールインの共通演出
   --------------------------------------------------------------------------
   .ic-fade-up      下からふわっと出す対象（画像・画像を含むカード）
   [data-ic-inview] 発火の単位。中の .ic-fade-up は横並びの順に時間差で出る
                    （JS が --ic-fade-i に連番を入れる）
   ※ 初期状態（非表示）は .ic-js 配下だけに書く。.ic-js は head の即時実行で付く
     ため最初の描画から効き、JS が無効なら最初から通常表示になる。
   ========================================================================== */
.ic-js .ic-fade-up {
  --ic-fade-delay: calc(var(--ic-fade-i, 0) * var(--ic-fade-step, 0.12s));
  opacity: 0;
  transform: translateY(var(--ic-fade-dist, 1.5rem)); /* 24px */
  transition:
    opacity var(--ic-fade-duration, 0.7s) ease var(--ic-fade-delay),
    transform var(--ic-fade-duration, 0.7s) cubic-bezier(0.22, 0.9, 0.28, 1) var(--ic-fade-delay);
}
.ic-js .is-inview .ic-fade-up,
.ic-js .ic-fade-up.is-inview {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定では演出しない */
@media (prefers-reduced-motion: reduce) {
  .ic-js .ic-fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}