/* 共通：横wipeで画像を出す start----------------------------------------------- */
.reveal{
  --revealCover: #fff; /* 背景色に合わせて上書き可能 */
  position: relative;
  overflow: hidden;
}
/* 画像の“ちょいズーム戻し” */
.reveal > img{
  display: block;
  width: 100%;
  height: auto;

  transform: scale(1.08) translateX(-12px);
  transition: transform 1.35s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
/* 幕 */
.reveal::before{
  content:"";
  position: absolute;
  inset: 0;
  background: var(--revealCover);
  transform: translateX(0);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  z-index: 2;
  pointer-events: none;
}
/* 幕のエッジ影 */
.reveal::after{
  content:"";
  position: absolute;
  top: 0;
  left: -20%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0));
  transform: translateX(0);
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1), opacity .6s ease;
  z-index: 3;
  pointer-events: none;
  opacity: .9;
}
/* 発火 */
.reveal.is-inview::before{
  transform: translateX(100%);
}
.reveal.is-inview::after{
  transform: translateX(600%);
  opacity: 0;
}
.reveal.is-inview > img{
  transform: scale(1) translateX(0);
}
/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .reveal::before,
  .reveal::after{
    display:none !important;
  }
  .reveal > img{
    transition:none !important;
    transform:none !important;
  }
}
/* 共通：横wipeで画像を出す end----------------------------------------------- */
/* フェード アニメーション start------------------------------------------------------ */
/* 共通：最初は見えない＆少しだけぼかす（お好み） */
.reveal-fade{
  opacity: 0;
  filter: blur(2px);
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.9s cubic-bezier(.16, 1, .3, 1),
    opacity 0.9s ease,
    filter 0.9s ease;
  will-change: transform, opacity, filter;
}
/* 下→上 */
.reveal-up{
  transform: translate3d(0, 36px, 0);
}
/* 左→右 */
.reveal-ltr{
  transform: translate3d(-36px, 0, 0);
}
/* 右→左 */
.reveal-rtl{
  transform: translate3d(36px, 0, 0);
}
/* 発火：元の位置へ + 表示 */
.reveal-fade.is-inview{
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0);
}
/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .reveal-fade{
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}
.reveal-delay-1{ transition-delay: .08s; }
.reveal-delay-2{ transition-delay: .16s; }
.reveal-delay-3{ transition-delay: .24s; }
/* フェード アニメーション end------------------------------------------------------ */