/* =========================================================
   backdrop.css — ページ全体の固定背景（フレームシーケンス）
   ========================================================= */

/* 画面に貼り付いたまま動かない映像レイヤー。
   本文はこの上を流れていき、最下部で最終フレームに着地する。 */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--c-bg);
  overflow: hidden;
  pointer-events: none;
}

/* 下層ページ用。スクロールアニメーションの最終フレームで固定する */
.backdrop--static {
  background-image: url('../img/frames/frame-241.webp');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.backdrop__canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
  will-change: opacity;
}

.backdrop__canvas.is-ready {
  opacity: 1;
}

/* 本文の可読性を確保するための覆い。
   下のグラデーションは「最も濃い状態」の定義で、実際の濃さは
   base.css の --scrim-strength（0＝覆いなし／1＝最も濃い）で決まる。 */
.backdrop__scrim {
  position: absolute;
  inset: 0;
  opacity: var(--scrim-strength);
  background:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.74) 0%,
      rgba(0, 0, 0, 0.52) 22%,
      rgba(0, 0, 0, 0.50) 55%,
      rgba(0, 0, 0, 0.62) 82%,
      rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(to right,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.06) 45%,
      rgba(0, 0, 0, 0.28) 100%);
}