#monolith-transition-overlay{
  position: fixed;
  inset: 0;
  z-index: 99999;

  pointer-events: none;
  opacity: 1; /* 透過なし前面絵なら常に1でOK */

  /* 画像は CSS 変数で受け取る（JSがセット） */
  background-image: var(--monolith-overlay-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  transform: translateY(-100%); /* モード側で上書き */
  will-change: transform, opacity, background-position;
}

#monolith-transition-overlay.is-blocking{
  pointer-events: auto; /* クリック遮断 */
}

/* =========================
   split-curtain（上布＋下布）
   ========================= */
#monolith-transition-overlay.mode-split-curtain{
  background-image: none;
  transform: none;
}

#monolith-transition-overlay.mode-split-curtain::before,
#monolith-transition-overlay.mode-split-curtain::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;

  background-image: var(--monolith-overlay-image);
  background-repeat: no-repeat;
  background-size: cover;

  will-change: transform;
}

#monolith-transition-overlay.mode-split-curtain::before{
  top: 0;
  background-position: center top;
  transform: translateY(-100%);
}

#monolith-transition-overlay.mode-split-curtain::after{
  bottom: 0;
  background-position: center bottom;
  transform: translateY(100%);
}

/* =========================
   split-wipe（左布＋右布）★追加
   ========================= */
#monolith-transition-overlay.mode-split-wipe{
  background-image: none;
  transform: none;
}

#monolith-transition-overlay.mode-split-wipe::before,
#monolith-transition-overlay.mode-split-wipe::after{
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;

  background-image: var(--monolith-overlay-image);
  background-repeat: no-repeat;
  background-size: cover;

  will-change: transform;
}

/* 左：画像の左半分 */
#monolith-transition-overlay.mode-split-wipe::before{
  left: 0;
  background-position: left center;
  transform: translateX(-100%);
}

/* 右：画像の右半分 */
#monolith-transition-overlay.mode-split-wipe::after{
  right: 0;
  background-position: right center;
  transform: translateX(100%);
}

/* =========================
   loop-scroll（布ループスクロール）
   ========================= */
@keyframes monolithLoopEnter {
  from { background-position: center 0px; }
  to   { background-position: center 240px; }
}
@keyframes monolithLoopExit {
  from { background-position: center 240px; }
  to   { background-position: center 480px; }
}

@media (prefers-reduced-motion: reduce){
  #monolith-transition-overlay{
    transition: none !important;
    animation: none !important;
  }
  #monolith-transition-overlay.mode-split-curtain::before,
  #monolith-transition-overlay.mode-split-curtain::after,
  #monolith-transition-overlay.mode-split-wipe::before,
  #monolith-transition-overlay.mode-split-wipe::after{
    transition: none !important;
  }
}