/* =========================
   CoDaMa風：画像マスクスライド
   使い方：追加CSSクラスに「ce-mask」
   ========================= */

:root{
  --ce-mask-color: rgba(90, 210, 255, 0.92); /* 明るいブルー */
  --ce-mask-duration: 1.55s;                 /* 遅め */
  --ce-mask-ease: cubic-bezier(.22,.8,.2,1);
}

/* 対象 */
.ce-mask{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: block;
}

/* ブロックに高さが無い場合があるので、画像ブロックなどに付けるのが確実
   ただ、念のため「中身がimgだけ」でも覆えるように */
.ce-mask > img,
.ce-mask img{
  max-width: 100%;
  height: auto;
}

/* マスク */
.ce-mask::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ce-mask-color);
  transform: translateX(0%);
  z-index: 5;
  pointer-events: none;
  transition: transform var(--ce-mask-duration) var(--ce-mask-ease);
  will-change: transform;
}

/* in-view */
.ce-mask.is-in::after{
  transform: translateX(105%);
}

@media (prefers-reduced-motion: reduce){
  .ce-mask::after{ transition: none !important; }
}