/*
 * hero-live.css  (同志社幼稚園サイト用)
 * STEP1: 天気フィルター・朝夕光レイヤー
 * STEP2: 湿度霞み・風向風速による雲演出
 */

/* ============================================================
   #wrapper > .bg の上書き
   ============================================================ */
#wrapper > .bg {
  background-image: none;
  background-color: #1a0a28;
  background-position: center center;
  transition: opacity 0.8s ease, filter 2.5s ease;
}

#wrapper > .bg.is-loaded {
  opacity: 1;
}

/* ============================================================
   STEP1: 天気フィルター（#wrapper に付くクラスで制御）
   ============================================================ */

/* 曇り: 彩度・コントラストをわずかに落として柔らかく */
#wrapper.hero-live--cloudy > .bg {
  filter: saturate(0.78) brightness(0.97) contrast(0.92);
}

/* 雨: さらに重く、青灰色寄りに */
#wrapper.hero-live--rainy > .bg {
  filter: saturate(0.62) brightness(0.88) contrast(0.88) hue-rotate(4deg);
}

/* ============================================================
   #intro への追加スタイル
   ============================================================ */
#intro[data-hero-live] {
  position: relative;
  overflow: hidden;
}

#intro[data-hero-live] > h1,
#intro[data-hero-live] > p,
#intro[data-hero-live] > ul,
#intro[data-hero-live] > .actions {
  position: relative;
  z-index: 20;
}

#intro[data-hero-live] > h1 {
  text-shadow:
    0 1px 6px  rgba(0, 0, 0, 0.85),
    0 0  20px  rgba(0, 0, 0, 0.55);
}

#intro[data-hero-live] > p {
  text-shadow:
    0 1px 4px  rgba(0, 0, 0, 0.80),
    0 0  14px  rgba(0, 0, 0, 0.45);
}

/* ============================================================
   STEP2: 湿度霞みレイヤー
   z-index: 9（overlay の下）
   JS が style.opacity を直接設定し、transition でなめらかに変化
   ============================================================ */
.hero-live__haze {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0;
  transition: opacity 4s ease;
  /* 画面下部〜中央から霞むグラデーション（白く飛ばさない） */
  background: radial-gradient(
    ellipse 120% 55% at 50% 110%,
    rgba(195, 208, 218, 0.9) 0%,
    rgba(200, 212, 222, 0.5) 40%,
    transparent 70%
  );
}

/* ============================================================
   オーバーレイ（テキスト視認性の確保）
   ============================================================ */
.hero-live__overlay {
  display: none;
}

/* ============================================================
   STEP1: 朝・夕の光レイヤー（#wrapper クラスで制御）
   z-index: 11（overlay の上、clouds の下）
   ============================================================ */
.hero-live__light {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transition: opacity 3s ease;
}

/* 朝 (5:00-8:59): 右上から柔らかい斜光。北東向き想定 */
#wrapper.hero-live--morning #intro .hero-live__light {
  opacity: 1;
  background:
    radial-gradient(
      ellipse 60% 70% at 96% 4%,
      rgba(255, 238, 195, 0.13) 0%,
      rgba(255, 220, 160, 0.06) 40%,
      transparent 70%
    );
}

/* 夕方 (16:00-18:29): 全体に薄い金色のフィルム */
#wrapper.hero-live--evening #intro .hero-live__light {
  opacity: 1;
  background:
    linear-gradient(
      170deg,
      rgba(255, 212, 105, 0.08) 0%,
      rgba(250, 190, 80,  0.05) 45%,
      rgba(235, 168, 55,  0.03) 75%,
      transparent 100%
    );
}

/* ============================================================
   雲レイヤー
   STEP2: --cloud-base-duration で速度を、
          hero-live--wind-right で方向を制御
   ============================================================ */
.hero-live__clouds {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0; /* JS が天気に応じて上書きする */
  transition: opacity 2s ease;
}

.hero-live__cloud {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
}

/*
 * --cloud-base-duration: JS が風速から計算して設定（デフォルト 130）
 * 各レイヤーは比率で速度差をつける（ループ感を自然に）
 */
.hero-live__cloud--1 {
  opacity: 0.22;
  background-image:
    radial-gradient(ellipse 28% 22% at 18% 28%, rgba(255,255,255,1) 0%, transparent 68%),
    radial-gradient(ellipse 22% 16% at 55% 20%, rgba(255,255,255,1) 0%, transparent 65%),
    radial-gradient(ellipse 18% 14% at 80% 32%, rgba(255,255,255,1) 0%, transparent 60%);
  background-size: 100% 100%;
  /* 左流れ（デフォルト）: 0 → -50% */
  animation: hero-live-cloud-drift calc(var(--cloud-base-duration, 130) * 1s) linear infinite;
}

.hero-live__cloud--2 {
  opacity: 0.13;
  background-image:
    radial-gradient(ellipse 32% 18% at 35% 40%, rgba(255,255,255,1) 0%, transparent 68%),
    radial-gradient(ellipse 20% 20% at 72% 35%, rgba(255,255,255,1) 0%, transparent 65%);
  background-size: 100% 100%;
  /* reverse で右流れ（視差による自然な不規則感） */
  animation: hero-live-cloud-drift calc(var(--cloud-base-duration, 130) * 1.54s) linear infinite reverse;
  animation-delay: -60s;
}

.hero-live__cloud--3 {
  opacity: 0.09;
  background-image:
    radial-gradient(ellipse 24% 16% at 60% 50%, rgba(255,255,255,1) 0%, transparent 65%),
    radial-gradient(ellipse 18% 12% at 25% 45%, rgba(255,255,255,1) 0%, transparent 60%);
  background-size: 100% 100%;
  animation: hero-live-cloud-drift calc(var(--cloud-base-duration, 130) * 2.08s) linear infinite;
  animation-delay: -100s;
}

/*
 * STEP2: 風向クラス（hero-live--wind-right）
 * W/NW/N からの風 → 画面右流れ
 * cloud--1, --3 を reverse に。cloud--2 は元々 reverse なので変更なし。
 */
#intro.hero-live--wind-right .hero-live__cloud--1 {
  animation-direction: reverse;
}
#intro.hero-live--wind-right .hero-live__cloud--3 {
  animation-direction: reverse;
}

/* ============================================================
   雲ドリフトキーフレーム
   左流れ: translateX(0 → -50%)
   右流れ: reverse で使用（translateX(-50% → 0)）
   ============================================================ */
@keyframes hero-live-cloud-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   モバイル: 縦長画面でのヒーロー画角修正
   landscape 画像 (≈3:2) を cover で表示する際、
   90vh の高さ指定だと大幅にズームインされてしまうため
   aspect-ratio で高さをアスペクト比に合わせる
   ============================================================ */
@media (max-width: 736px) {
  #intro[data-hero-live] {
    min-height: 0 !important;
    aspect-ratio: 3 / 2;
  }

  /*
   * 昼夜共通: .bg は 100vh だが、landscape 画像を cover すると
   * 縦スケールで上部(空・星)しか #intro に写らない。
   * 幅基準（115% auto）に切り替えて画像全体を上部に収める。
   */
  #wrapper > .bg {
    background-size: 115% auto;
    background-position: center top;
  }
}

/* ============================================================
   prefers-reduced-motion 対応
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-live__cloud {
    animation: none;
  }
  .hero-live__haze,
  .hero-live__light,
  .hero-live__clouds {
    transition: none;
  }
  #wrapper > .bg {
    transition: none;
  }
}