/*==================================================
# 100. ANIMATIONS – Triggered by IntersectionObserver
==================================================*/

/* 共通：初期状態（非表示・移動）＋トランジション */
.fadein-bottom,
.fadein-left,
.fadein-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

/* 下からフェードイン */
.fadein-bottom {
  transform: translateY(20px);
}
.fadein-bottom.is-inview {
  opacity: 1;
  transform: translateY(0);
}

.fadein-bottom--late {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
  will-change: opacity, transform;
}
.fadein-bottom--late.is-inview {
  opacity: 1;
  transform: translateY(0);
}

/* 左からフェードイン */
.fadein-left {
  transform: translateX(-20px);
}
.fadein-left.is-inview {
  opacity: 1;
  transform: translateX(0);
}

/* 右からフェードイン（必要ならここにアニメーション追加） */
.fadein-right {
  transform: translateX(20px);
}
.fadein-right.is-inview {
  opacity: 1;
  transform: translateX(0);
}

/* スケール拡大しながらフェードイン（例） */
.fadein-scale {
  transform: scale(0.95);
}
.fadein-scale.is-inview {
  opacity: 1;
  transform: scale(1);
}