/* ============================================================
   hero-slideshow.css — 仕様⑦（dependency_map 2026-06-01決定）
   ------------------------------------------------------------
   選ばれた variant 内の 2〜3 カットを CSS-only でクロスフェード
   ＋ Ken Burns 循環表示。JS禁止（Pages相性・LCP配慮）。

   表示モード:
     .hero-ss-multi  : 2〜3枚 SS
     .hero-ss-single : 1枚 (Ken Burns のみ)
   ※ 0枚フォールバックは render 側で default-{gender} に差替済の前提

   既存 .hero::before の単一画像表示を完全に置換する役割。
   既存 style.css の .hero / .hero::after グラデ等はそのまま生かす。
   ============================================================ */

/* スライドコンテナ. .hero の position:relative; を前提に絶対配置で背景化 */
.hero-bg-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg-slides > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  will-change: opacity, transform;
  /* 既存 .hero::after グラデと合わさるよう薄めに */
  filter: saturate(0.95);
}

/* ===== Ken Burns（共通） ===== */
@keyframes kenburns-zoomin {
  0%   { transform: scale(1.00) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
@keyframes kenburns-zoomout {
  0%   { transform: scale(1.08) translate3d(1%, 0.5%, 0); }
  100% { transform: scale(1.00) translate3d(0, 0, 0); }
}
@keyframes kenburns-pan {
  0%   { transform: scale(1.05) translate3d(-1%, 0, 0); }
  100% { transform: scale(1.05) translate3d(1%, -0.5%, 0); }
}

/* ===== 単一画像モード（Ken Burns のみ・常時表示） ===== */
.hero-ss-single > img {
  opacity: 1;
  animation: kenburns-zoomin 14s ease-in-out infinite alternate;
}

/* ===== スライドショー（2枚） =====
   合計 16s ループ：各画像 8s（フェードイン 1s ＋ 表示 6s ＋ フェードアウト 1s）。
   2枚目は 8s 遅延で発火。 */
.hero-ss-multi.count-2 > img {
  animation: hero-ss-2-fade 16s ease-in-out infinite;
}
.hero-ss-multi.count-2 > img:nth-child(1) { animation-delay: 0s; }
.hero-ss-multi.count-2 > img:nth-child(2) { animation-delay: 8s; }

@keyframes hero-ss-2-fade {
  0%, 50%, 100% { opacity: 0; }
  6.25%, 43.75% { opacity: 1; }   /* 1s/16s 〜 7s/16s で 1.0 をキープ */
}

/* Ken Burns を画像ごとに分散（同一動きの単調さ回避） */
.hero-ss-multi.count-2 > img:nth-child(1) {
  animation: hero-ss-2-fade 16s ease-in-out infinite,
             kenburns-zoomin 16s ease-in-out infinite alternate;
}
.hero-ss-multi.count-2 > img:nth-child(2) {
  animation: hero-ss-2-fade 16s ease-in-out infinite,
             kenburns-zoomout 16s ease-in-out infinite alternate;
  animation-delay: 8s, 8s;
}

/* ===== スライドショー（3枚） =====
   合計 24s ループ：各画像 8s枠。1秒フェードイン → 6秒表示 → 1秒フェードアウト。
   2枚目: 8s遅延 / 3枚目: 16s遅延。 */
.hero-ss-multi.count-3 > img {
  animation: hero-ss-3-fade 24s ease-in-out infinite,
             kenburns-pan 24s ease-in-out infinite alternate;
}
.hero-ss-multi.count-3 > img:nth-child(1) {
  animation-delay: 0s, 0s;
  animation-name: hero-ss-3-fade, kenburns-zoomin;
}
.hero-ss-multi.count-3 > img:nth-child(2) {
  animation-delay: 8s, 8s;
  animation-name: hero-ss-3-fade, kenburns-pan;
}
.hero-ss-multi.count-3 > img:nth-child(3) {
  animation-delay: 16s, 16s;
  animation-name: hero-ss-3-fade, kenburns-zoomout;
}

@keyframes hero-ss-3-fade {
  0%, 33.333%, 100% { opacity: 0; }
  4.166%, 29.166%   { opacity: 1; }
}

/* ===== reduced motion（OS設定で動きを嫌う人向け）対応 ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-slides > img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* 複数あるなら最初の1枚だけ残す */
  .hero-ss-multi > img:not(:first-child) { display: none; }
}

/* ===== SP（モバイル）：横長 PC 画像を引き伸ばさず、SP 専用を当てる ===== */
@media (max-width: 768px) {
  .hero-bg-slides > img.pc-only { display: none; }
}
@media (min-width: 769px) {
  .hero-bg-slides > img.sp-only { display: none; }
}

/* ===== 既存 .hero::before（旧単一画像）を無効化 =====
   .hero-bg-slides がDOMにある時のみ無効化（DOM未挿入の旧LPは触らない） */
.hero:has(.hero-bg-slides)::before {
  display: none;
}

/* ===== 可読性スクリム（仕様⑦ §6） =====
   slides の上に薄いグラデで文字とのコントラストを確保。
   既存 .hero::after よりも下、slides の上。 */
.hero:has(.hero-bg-slides)::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.35) 40%,
    rgba(255, 255, 255, 0.50) 100%
  );
}