/* ========================================================================== 
   TOP専用：ファーストビューのクロスフェード + リバースズーム
   --------------------------------------------------------------------------
   このCSSはTOPの写真レイヤーだけを担当します。
   婚姻届ページの無限レールとはクラス・CSS・JavaScriptを共有しません。

   v63での重要な変更
   - 実際のフェード／ズームは home-hero-slider.js の Web Animations API で実行
   - OSの「動きを減らす」設定で共通CSSの transition-duration が 0.01ms に
     上書きされても、TOPの指定モーションが消えない構造に変更
   - Web Animations API が使えないブラウザだけCSS transitionへフォールバック
   - JavaScriptが動かなくても1枚目は必ず表示する
   ========================================================================== */

.page-home .home-hero-slider__slides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #a8a59e;
}

.page-home .home-hero-slider__slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transform: scale(1.07);
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: opacity, transform;
}

/*
 * フォールバック：JS初期化前・JS読込失敗時でも最初の写真は必ず表示します。
 */
.page-home .home-hero-slider__slides:not(.is-slider-ready) .home-hero-slider__slide:first-child,
.page-home .home-hero-slider__slide.is-current {
  opacity: 1;
}

/*
 * Web Animations API非対応ブラウザ用。
 * 共通CSSの prefers-reduced-motion 内にある !important より具体的な指定にして、
 * TOPだけは依頼どおりフェードとズームを維持します。
 */
.page-home .home-hero-slider__slides.is-css-motion-fallback .home-hero-slider__slide {
  transition-property: opacity, transform !important;
  transition-duration: 1.5s, 6.2s !important;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1), ease-out !important;
}

.page-home .home-hero-slider__slides.is-css-motion-fallback .home-hero-slider__slide.is-entering,
.page-home .home-hero-slider__slides.is-css-motion-fallback .home-hero-slider__slide.is-current {
  opacity: 1;
  transform: scale(1);
}

/* 4枚目は主要部分が中央付近に残るよう、既存のトリミング位置を維持します。 */
.page-home .home-hero-slider__slide:nth-child(4) {
  object-position: center 44%;
}

@media (max-width: 769px) {
  .page-home .home-hero-slider__slide {
    object-position: center center;
  }

  .page-home .home-hero-slider__slide:nth-child(4) {
    object-position: center 44%;
  }
}