/**
 * トップページヒーロー: deliver_main_01〜05 の背景クロスフェード（index のみ読み込み）。
 * JS なし・画像は Markup の background-image で指定（パス変更が一箇所で済むよう home.php と対で管理）。
 */

.deliver-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* わずかに拡大してタイル端の隙間を隠す（object-fit: cover に相当） */
.deliver-hero-bg__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  /* 5 枚 × 約 5 秒＝25 秒周期。遅延で開始時刻をずらし順番に表示 */
  animation: deliverHeroBgCrossfade 25s ease-in-out infinite;
  animation-fill-mode: backwards;
  will-change: opacity;
  transform: scale(1.06);
}

.deliver-hero-bg__slide:nth-child(1) {
  animation-delay: 0s;
}
.deliver-hero-bg__slide:nth-child(2) {
  animation-delay: 5s;
}
.deliver-hero-bg__slide:nth-child(3) {
  animation-delay: 10s;
}
.deliver-hero-bg__slide:nth-child(4) {
  animation-delay: 15s;
}
.deliver-hero-bg__slide:nth-child(5) {
  animation-delay: 20s;
}

/**
 * 1 枚あたり「フェードイン → 表示キープ → フェードアウト → 非表示キープ」の時間配分（全体の 20% 区画）
 */
@keyframes deliverHeroBgCrossfade {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  16% {
    opacity: 1;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deliver-hero-bg__slide {
    animation: none;
    opacity: 0;
    transform: none;
  }

  /* 静止時は 1 枚目のみ表示（LCP 想定の先頭画像） */
  .deliver-hero-bg__slide:nth-child(1) {
    opacity: 1;
  }
}

/* 狭い画面: 写真内のバンが右寄りのため、やや右基準でトリミングし車体が見えやすくする（md 未満＝768px） */
@media (max-width: 767.98px) {
  .deliver-hero-bg__slide {
    background-position: 82% center;
  }
}