/* アニメーション前の初期状態 */
[data-appear] {
  opacity: 0;
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 下からスライドイン */
[data-appear="slide-up"] {
  transform: translateY(40px);
}

/* 左からスライドイン */
[data-appear="slide-right"] {
  transform: translateX(-40px);
}

/* 右からスライドイン */
[data-appear="slide-left"] {
  transform: translateX(40px);
}

/* ズームイン */
[data-appear="zoom"] {
  transform: scale(0.88);
}

/* フェードのみ（動きなし） */
[data-appear="fade"] {
  transition-duration: 1.1s;
}

/* 回転しながらフェードイン */
[data-appear="rotate"] {
  transform: rotate(-6deg) scale(0.92);
  transform-origin: left center;
}

/* is-visible が付いたらアニメーション発火 */
[data-appear].is-visible {
  opacity: 1;
  transform: none;
}