:root{
  --reveal-distance: 26px;
  --reveal-duration: .75s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

/* 初期状態 */
.reveal{
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--delay, 0ms),
    transform var(--reveal-duration) var(--reveal-ease) var(--delay, 0ms);
  will-change: opacity, transform;
}

/* 可視になったら */
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* 方向バリエーション */
.reveal--up{    transform: translateY(var(--reveal-distance)); }    /* デフォルト */
.reveal--down{  transform: translateY(calc(var(--reveal-distance) * -1)); }
.reveal--left{  transform: translateX(var(--reveal-distance)); }
.reveal--right{ transform: translateX(calc(var(--reveal-distance) * -1)); }
.reveal--zoom{  transform: scale(.96); }

/* 遅延ユーティリティ（必要に応じて使用） */
.reveal-delay-1{ --delay: 120ms; }
.reveal-delay-2{ --delay: 240ms; }
.reveal-delay-3{ --delay: 360ms; }

/* 動きを控える環境配慮 */
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}

.reveal{
  /* GPU最適化系は残してOK。ただし transform は書かない！ */
  will-change: transform, opacity;
  backface-visibility: hidden;
  /* transform: translate3d(0,0,0); ← 削除 */
  /* contain: layout paint;        ← 削除（切れの原因） */
}