/* ================================================================
   Scroll-scrub background (top page only)
   スクロール量で背景映像をコマ送り / 巻き戻しする全画面固定レイヤー。
   有効化は <html class="mf-seq-on">。挙動は /mf/seq.js。
================================================================ */
.mf-seq {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* lvh = ツールバー収納時の高さ。svh だと iOS でツールバーが縮んだ瞬間に下端へ黒帯が出る */
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  /* 先頭フレームのポスター。動画をデコードできない環境でも映像の顔を出す */
  background: #000 url(/videos/hero-poster-hd.8d284d33.jpg) center / cover no-repeat;
}
.mf-seq-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform, filter;
  transition:
    transform 1.8s cubic-bezier(.22, .61, .36, 1),
    filter 1.8s cubic-bezier(.22, .61, .36, 1);
}
.mf-seq-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: .3;
  transition: opacity 1.4s ease;
}

/* 画面幅いっぱいのラッパーの黒だけ透かす（カード・表・フォーム等は変えない）。
   body の背景は z-index:-1 の固定レイヤーより上に描画されるため必ず透過する。
   html の #000 は残す */
html.mf-seq-on body { background: transparent; }
html.mf-seq-on .mf-main { background: transparent; }
html.mf-seq-on .mf-hero--cinematic { background: transparent; }
html.mf-seq-on .mf-footer { background: rgba(0, 0, 0, .6); }

/* モーションを減らす設定 / 映像エラー → ポスター静止画 */
@media (prefers-reduced-motion: reduce) {
  .mf-seq-video { display: none; }
}
html.mf-seq-static .mf-seq-video { display: none; }