/* ==========================================================
   weather.css
   天候の変化の「状態」だけを書くファイル（STEP E〜）
   ・雨の初期状態の見た目は game.css（STEP A）のまま変えない
   ・動きの時間は js/weather.js が config.js の値から設定する
========================================================== */

/* 画面上部の単独のてるてる坊主は、雨・晴れのどちらでも表示しない
   （てるてる坊主はタイトルカード右上の小さい1体だけが正解）
   ※ 要素自体は天候の演出のプログラムが参照しているので残している */
#weather-teruteru {
  display: none;
}

/* タイトルカード内のてるてる坊主が逆さになった状態
   （正立のときの傾き 5° に 180° を足す。中心を軸に回るので、カードの配置は動かない） */
#mv-title .lp-title__teru.is-flipped {
  transform: rotate(185deg);
}


/* ---------- 晴れたら人物を STEP C で決めた位置へ移動 ----------
   html に is-sunny が付く（晴れの背景へ切り替わり始めた瞬間）と、
   人物は同じ大きさのまま右端寄り（右の街並み側）へ移動する。
   位置は STEP C の値を復元：右端 − 人物の幅の半分 − personGap（config.js titleCard）
   ※ 晴れた後はゲームの操作が無いので、人物がタイトルカードのボタンのタップを邪魔しないようにする */
html.is-sunny #thinking-person {
  left: calc(100% - var(--mv-w) * var(--person-w) / 2 - var(--fvt-person-gap, 4px));
  transition: left 0.8s ease;
  pointer-events: none;
}

/* 再訪時・確認用で最初から晴れた状態にするときは、移動の動きを付けない */
html.is-sunny-now #thinking-person {
  transition: none;
}


/* ---------- 晴れの背景（雨の背景の上に重ね、最初は透明） ----------
   重なり順：雨の背景 1 → 晴れの背景 3 → 虹 5 → てるてる坊主 20 → 雨 21 → 人物 30 */

#bg-sunny {
  z-index: 3;
  opacity: 0;
}


/* ---------- 虹（CSSで描いた仮の虹） ----------
   位置・大きさ・傾き・濃さは config.js の rainbow で調整 */

.rainbow {
  position: absolute;
  z-index: 5;
  top: var(--rb-top, -2%);
  left: var(--rb-left, 36%);
  width: var(--rb-width, 84%);
  aspect-ratio: 2 / 1;
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--rb-rotate, -8deg));
  /* 内側から 紫 → 青 → 緑 → 黄 → 橙 → 赤 の帯 */
  background: radial-gradient(circle farthest-side at 50% 100%,
    transparent 0 74%,
    rgba(140, 100, 215, 0.55) 76.5%,
    rgba(70, 125, 235, 0.55) 79%,
    rgba(60, 185, 120, 0.55) 81.5%,
    rgba(250, 228, 80, 0.6) 84%,
    rgba(248, 155, 55, 0.6) 86.5%,
    rgba(232, 72, 60, 0.55) 89%,
    transparent 92%);
  /* 下側（門のあたり）に向かって自然に消える */
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 78%);
  filter: blur(1.5px);
}


/* ---------- STEP T：晴れの背景（てるてるみくじ入りの画像） ----------
   ・晴れの背景だけ横位置を変えて、右下の「てるてるみくじ」の黒板が見えるようにする
     （config.js の background.sunnyPositionX。現在はタップ範囲の計算にだけ使用）
   ・STEP Z：鳥居をアップにして画像の虹が画面の外に出たので、上の CSS の虹を再び表示する
     （STEP F の虹をそのまま使い、位置・大きさだけ config.js の rainbow で鳥居の上の空に合わせた） */
#bg-sunny {
  object-position: var(--bg-sunny-pos-x, var(--bg-pos-x)) var(--bg-pos-y);
}