/* ===== パララックス背景：明るい街中の流れる風景 ===== */

#parallax-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/* ---- 空（明るい昼間） ---- */
.layer-sky {
  background: linear-gradient(
    180deg,
    #87ceeb 0%,
    #b8e0f0 25%,
    #d4eef7 50%,
    #e8f4f8 70%,
    #f0f4e8 85%,
    #e8e8dc 100%
  );
}

/* ---- 遠くの山並み（地平線・空に溶け込む最遠景） ---- */
.layer-far-mountains {
  top: auto;
  bottom: 0;
  height: 60%;
}

.layer-far-mountains .parallax-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: parallax-scroll 150s linear infinite;
}

.far-mountains-set {
  flex: 0 0 50%;
  height: 100%;
  background: url("../img/far-mountains-bg.svg?v=9") repeat-x bottom / auto 70%;
}

/* ---- 雲（空に浮かべて水色をやわらげる・最も遅い遠景） ---- */
.layer-clouds {
  top: 0;
  bottom: auto;
  height: 58%;
}

.layer-clouds .parallax-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: parallax-scroll 120s linear infinite;
}

.clouds-set {
  flex: 0 0 50%;
  height: 100%;
  /* 1タイル=セット幅(画面幅)ぴったりにして、セット境界で雲が分断されない
     ようにする（SVGの左右端は余白＝透明）。 */
  background: url("../img/clouds-bg.svg?v=10") no-repeat top / 100% auto;
}

/* ---- 山（遠景・一番遅い） ---- */
.layer-mountains {
  top: auto;
  height: 45%;
  bottom: 0;
}

.layer-mountains .parallax-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: parallax-scroll 90s linear infinite;
}

.mountains-set {
  flex: 0 0 50%;
  height: 100%;
  background:
    /* 遠い山 */
    linear-gradient(165deg, transparent 52%, #7d9a6c 52%, #6b8b5a 58%, transparent 58%) 20% 100% / 28% 85% no-repeat,
    linear-gradient(175deg, transparent 48%, #8a9f7a 48%, #7a9068 55%, transparent 55%) 35% 100% / 22% 75% no-repeat,
    linear-gradient(185deg, transparent 50%, #6b7c5a 50%, #5a6b4a 58%, transparent 58%) 48% 100% / 30% 90% no-repeat,
    linear-gradient(170deg, transparent 55%, #7d9a6c 55%, #6b8b5a 62%, transparent 62%) 62% 100% / 25% 80% no-repeat,
    linear-gradient(178deg, transparent 50%, #8a9f7a 50%, #7a9068 58%, transparent 58%) 78% 100% / 26% 88% no-repeat,
    linear-gradient(172deg, transparent 52%, #6b7c5a 52%, #5a6b4a 60%, transparent 60%) 92% 100% / 24% 82% no-repeat,
    linear-gradient(180deg, transparent 100%, #e8e8dc 100%) 0 0 / 100% 100% no-repeat;
}

/* ---- 木（中景） ---- */
.layer-trees {
  top: auto;
  height: 50%;
  bottom: 0;
}

.layer-trees .parallax-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: parallax-scroll 50s linear infinite;
}

.trees-set {
  flex: 0 0 50%;
  height: 100%;
  position: relative;
  /* 幹＋丸い葉の木々 */
  background: url("../img/trees-bg.svg?v=3") repeat-x bottom / auto 66%;
}

.trees-set::before,
.trees-set::after {
  content: none;
}

/* 木を複数（box-shadowで並べる） */
.trees-set::before {
  left: 5%;
  border-width: 0 20px 120px 20px;
  border-color: transparent transparent #2d5a27 transparent;
  box-shadow:
    120px 0 0 -2px #2d5a27,
    240px 10px 0 -2px #3d6b35,
    360px -5px 0 -2px #2d5a27,
    480px 15px 0 -2px #356030,
    600px 0 0 -2px #2d5a27,
    720px 8px 0 -2px #3d6b35,
    880px -8px 0 -2px #2d5a27;
}

.trees-set::after {
  left: 8%;
  border-width: 0 14px 80px 14px;
  border-color: transparent transparent #3d6b35 transparent;
  box-shadow:
    180px 25px 0 -2px #2d5a27,
    320px 15px 0 -2px #3d6b35,
    500px 30px 0 -2px #2d5a27,
    640px 20px 0 -2px #356030,
    820px 18px 0 -2px #3d6b35;
}

/* ---- ビル（中〜手前） ---- */
/* UDwebサンプル流用の街並み。旧シルエット(city-bg.svg)は下45%が道路に隠れる
   前提だったが、この街並みは全体を見せたいので、レイヤー下端を道路の上端
   (bottom:22%)より1%だけ下げて足元を道路に軽く隠しつつ立たせる。 */
.layer-buildings {
  top: auto;
  height: 55%;
  bottom: 21%;
}

/* 他レイヤーの「100vw幅セット×2 + translateX(-50%)」方式だと、セット境界で
   タイルが途中で切れて絵柄が縦にスパッと分断される（旧シルエットビルでは
   目立たなかったが、この街並みでは致命的）。そこでビルだけは、スクロール幅を
   ちょうどタイル1枚分にした独自アニメーションでシームレスにループさせる。
   タイル幅 = 画像高さ(72% × 55vh = 39.6vh) × アスペクト比(1620/662 = 2.44713)
            = 96.9063vh */
.layer-buildings .parallax-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  /* タイル6枚分。1タイルぶん左へ流した状態でも超横長画面を覆える幅 */
  width: calc(6 * 96.9063vh);
  height: 100%;
  /* UDwebサンプル流用の街並み（UDタワー/時計台/家/ビル群、img/udweb-city-bg.svg）。
     旧: 自作シルエットビル url("../img/city-bg.svg?v=3")（ファイルは残置） */
  background: url("../img/udweb-city-bg.svg?v=1") repeat-x bottom / auto 72%;
  animation: buildings-scroll 19s linear infinite;
}

/* 旧マークアップ（.buildings-set×2）は使わない。背景は親の .parallax-scroll 側 */
.buildings-set {
  display: none;
}

/* ちょうどタイル1枚分だけ左へ流してループ（切れ目なし） */
@keyframes buildings-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-96.9063vh); }
}

/* ---- 道路（手前・一番速い） ---- */
.layer-road {
  top: auto;
  height: 22%;
  bottom: 0;
}

.layer-road .parallax-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: parallax-scroll 12s linear infinite;
}

.road-strip {
  flex: 0 0 50%;
  height: 100%;
  background:
    /* センターライン（白破線） */
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 24px,
      #f5f5dc 24px,
      #f5f5dc 44px
    ) center / 100% 6px no-repeat,
    /* アスファルト */
    linear-gradient(180deg, #4a4a4a 0%, #3d3d3d 30%, #353535 100%);
}

/* ---- 道路脇に立って流れるキャラ ---- */
/* レイヤー下端を道路の上端（ビルの床面ライン = 道路高さ22%）に合わせ、
   background-position を bottom にしてキャラの足元をそのラインに揃える。 */
.layer-roadside {
  top: auto;
  bottom: 22%;
  height: 32%;
  pointer-events: none;
}

.layer-roadside .parallax-scroll {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  display: flex;
  flex-direction: row;
  animation: parallax-scroll 16s linear infinite;
}

.roadside-set {
  flex: 0 0 50%;
  height: 100%;
  background-image:
    url("../img/03_ochibichan.png"),
    url("../img/06_seibishika.png"),
    url("../img/05_bill.png"),
    url("../img/04_sousagi.png"),
    url("../img/07_seibishika_ochibichan.png"),
    url("../img/06_seibishika.png");
  background-repeat: no-repeat;
  /* 足元（絵の下端）をレイヤー下端＝道路の上端に揃える。画像ごとに下部の
     透明余白が異なるので、その分だけ calc(100% + Npx) で下へ押し下げる。 */
  background-size: auto 82px, auto 94px, auto 116px, auto 76px, auto 98px, auto 86px;
  background-position:
    5% calc(100% + 12px),
    21% calc(100% + 9px),
    39% calc(100% + 20px),
    55% calc(100% + 8px),
    72% calc(100% + 8px),
    90% calc(100% + 8px);
}

/* ---- 道路を走り抜けるキャラ ---- */
/* 走るキャラは道路の上（アスファルト上）を走らせる。レイヤーを道路の高さ
   (bottom0〜22%)に置き、bottom で道路上の高さに調整（下部透明余白ぶん補正）。 */
.layer-runner {
  top: auto;
  bottom: 0;
  height: 22%;
  pointer-events: none;
  overflow: visible;
}

.runner {
  position: absolute;
  left: 0;
  width: auto;
  will-change: transform;
}

.runner--a {
  height: 135px;
  bottom: calc(9% - 14px);
  animation: run-across-flip 8s linear infinite;
}

.runner--b {
  height: 82px;
  bottom: calc(7% - 12px);
  animation: run-across 12s linear infinite;
  animation-delay: -5s;
}

/* そうさぎは右向きに反転して走る */
@keyframes run-across-flip {
  0%   { transform: translateX(-14vw) scaleX(-1); }
  100% { transform: translateX(114vw) scaleX(-1); }
}

@keyframes run-across {
  0%   { transform: translateX(-14vw); }
  100% { transform: translateX(114vw); }
}

/* キーフレーム：左へ流れる */
@keyframes parallax-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}