.hero-image-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-image-background video,
.hero-image-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.52;
}

/*
 * 動画が再生できないときに残る静止画（動画の1コマ）。
 *
 * 端末の設定で自動再生が拒否されることがある（iOS の低電力モードなど）。
 * そのとき video は再生ボタンを描いて止まるので、JS 側で video を消す。
 * ここが残って、絵としては成立したままになる。
 *
 * 読み込み中も見えるので、動画が始まるまでの黒画面も埋まる。
 * 動画の opacity と同じ 0.52 にしてあり、切り替わっても明るさが変わらない。
 */
.hero-image-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/hero-poster.webp');
  background-size: cover;
  background-position: center;
  opacity: 0.52;
}

@media screen and (max-width: 749px) {
  /* 縦長の端末には縦の絵（sp.mp4 の1コマ）。横の絵を cover すると両端が切れる。 */
  .hero-image-background::before {
    background-image: url('img/hero-poster-sp.webp');
  }
}

/*
 * 動画が実際に動き出したら静止画を消す。重なったままだと二重写しで
 * 明るくなるため、フェードはさせず一気に消す。
 */
.hero-image-background.is-playing::before {
  opacity: 0;
}

/*
 * 文字の裏に敷く暗い層（template-parts/hero-image-background.php）。
 *
 * 動画（opacity .52）と静止画の上、粒（::after）の下。全ページ共通の
 * 背景なので、ここを1枚挟むだけで全ページの文字の後ろが暗くなる。
 *
 * 0.42 は「動画の明るいコマでも文字が沈まない」最小限として置いた値。
 * これ以上濃くすると背景が動いていることが分からなくなる。
 * 商品カードはこの上にさらに黒を重ねる（component-card-astra-product.css）。
 */
.hero-image-background__scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

/*
 * 画面の汚れ（ホコリと細かい傷）。
 *
 * XD のモックにある、目を凝らすと分かる程度の粒。動画のグラデーションが
 * きれいに出すぎると CG っぽくなるので、わずかに汚して質感を出す。
 *
 * タイルは 320px 四方で継ぎ目が出ないように作ってある（assets/img/hero-grain.svg）。
 * background-size を変えると粒の大きさも変わる。大きくすると「汚れ」ではなく
 * 模様に見えはじめるので、実寸のまま敷く。
 *
 * 動画とは別の層にしている（video の opacity: .52 に巻き込まれないように）。
 */
.hero-image-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('img/hero-grain.svg');
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity: 0.55;
  pointer-events: none;
}