/* ============================================================
   スプラッシュ画面
   ============================================================ */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #f4f3ec;
  overflow: hidden;                 /* もや・ズームのはみ出しを隠す */
  transition: opacity 0.9s ease;    /* フェードアウト */
}

#splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---- 背景（風景のみ）：z-index 0 ---- */
.splash__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  animation: splash-fade-in 1.4s ease both,
             splash-zoom 9s linear both;
  will-change: transform;   /* ★変更：opacity を外す */
}

@keyframes splash-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ズームは控えめ＆linear（ease-outだと“拡大”が目立つため） */
@keyframes splash-zoom {
  from { transform: scale(1);    }
  to   { transform: scale(1.05); }
}

/* ============================================================
   もや・霧レイヤー（横スクロールで流れる）：z-index 1
   ============================================================ */
/* もや共通 */
#splash::before,
#splash::after {
  content: "";
  position: absolute;
  top: 0;                    /* ★変更：inset:0 → 縦だけ固定に */
  bottom: 0;
  pointer-events: none;
  z-index: 1;
  background-repeat: repeat-x;
  will-change: transform;    /* ★変更：background-position → transform */
}

/* 手前：濃い・速い（左へ流れる） */
#splash::before {
  left: 0;                        /* ★追加 */
  width: calc(100% + 1100px);     /* ★追加：移動量ぶん右に余白を確保 */
  background-image: url(../images/fog-1.webp);
  background-size: 1100px 100%;
  opacity: .9;
  animation: fog-scroll-1 13s linear infinite;
}

/* 奥：薄い・ゆっくり（右へ流れる＝逆方向で奥行き） */
#splash::after {
  right: 0;                       /* ★追加 */
  width: calc(100% + 1400px);     /* ★追加：移動量ぶん左に余白を確保 */
  background-image: url(../images/fog-2.webp);
  background-size: 1400px 100%;
  opacity: .6;
  animation: fog-scroll-2 22s linear infinite;
}

/* ★ translateX に変更（移動量 = background-size の幅 ＝ シームレス） */
@keyframes fog-scroll-1 {
  from { transform: translateX(0); }
  to   { transform: translateX(-1100px); }
}
@keyframes fog-scroll-2 {
  from { transform: translateX(0); }
  to   { transform: translateX(1400px); }   /* ＋値で逆方向 */
}

/* ============================================================
   ロゴ（最前面・くっきり）：z-index 2
   ============================================================ */
.splash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;             /* 中央要素の見せたい大きさで調整 */
  max-width: 460px;       /* PCで大きくなりすぎない上限 */
  height: auto;
  z-index: 2;
  animation: splash-fade-in 1.2s ease both;
  animation-delay: .3s;   /* ロゴだけ少し遅れて出すと上品 */
}