/* ==========================================================================
   治愈系 2D 动画书桌 - 真实窗外天气 + 昼夜光影系统 (weather.css v2)
   设计原则：
     1) 天气只作用在「窗外」——用 window_glass_mask.webp 把窗玻璃作为遮罩，
        雨雪/阴云/雷闪不会涂到桌面和室内。
     2) 昼夜不再整屏压色，改为底图真实换景 + 自窗口斜射进来的光柱（clip-path 梯形）。
   ========================================================================== */

/* ---------- 交叉溶解用的上层底图 ---------- */
#room-panoramic-bg-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 窗外天气氛围层（严格按窗玻璃遮罩） ---------- */
#window-weather-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease, background .9s ease;
  -webkit-mask-image: url(../assets/window_glass_mask.webp);
  mask-image: url(../assets/window_glass_mask.webp);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 🌧️ 细雨：窗外湿冷的灰蓝 */
[data-weather="rain"] #window-weather-layer {
  background: linear-gradient(180deg, rgba(86, 108, 134, 0.52) 0%, rgba(62, 82, 108, 0.36) 55%, rgba(48, 66, 92, 0.26) 100%);
  opacity: 1;
}

/* ⛈️ 雷雨：更压暗的铅灰 */
[data-weather="thunder"] #window-weather-layer {
  background: linear-gradient(180deg, rgba(54, 60, 82, 0.66) 0%, rgba(40, 48, 68, 0.55) 100%);
  opacity: 1;
}

/* ❄️ 飞雪：清冷泛白的雪天 */
[data-weather="snow"] #window-weather-layer {
  background: linear-gradient(180deg, rgba(216, 230, 248, 0.40) 0%, rgba(188, 208, 234, 0.26) 100%);
  opacity: 1;
}

/* ⛅ 多云：漫射阴天 */
[data-weather="cloudy"] #window-weather-layer {
  background: linear-gradient(180deg, rgba(152, 164, 180, 0.30) 0%, rgba(126, 138, 156, 0.20) 100%);
  opacity: 1;
}

/* ☀️ 晴天 / 🍃 微风：窗外暖阳 */
[data-weather="sunny"] #window-weather-layer {
  background: radial-gradient(ellipse at 50% 10%, rgba(255, 238, 186, 0.38) 0%, rgba(255, 228, 150, 0.14) 45%, transparent 72%);
  opacity: .9;
}

[data-weather="breeze"] #window-weather-layer {
  background: radial-gradient(ellipse at 50% 10%, rgba(255, 238, 186, 0.24) 0%, transparent 70%);
  opacity: .8;
}

/* 夜晚：窗外整体压暗、去饱和（仍然只在窗口内） */
[data-time="night"] #window-weather-layer {
  filter: brightness(0.70) saturate(0.85);
}

/* ---------- 斜射入室的光柱（取代原来的整屏径向压色） ---------- */
#sunlight-ray-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s ease, background 1.2s ease;
  /* 自窗口（约 18%~82% 宽）向下扩散到桌面的梯形 */
  clip-path: polygon(19% 28%, 81% 28%, 97% 100%, 3% 100%);
}

/* 🌅 晨曦：低角度暖橘 */
[data-time="dawn"] #sunlight-ray-overlay {
  background: linear-gradient(180deg,
      rgba(255, 214, 165, 0) 0%,
      rgba(255, 206, 150, 0.20) 34%,
      rgba(255, 196, 140, 0.13) 58%,
      rgba(255, 186, 130, 0) 82%);
  opacity: .85;
}

/* ☀️ 白昼：明亮的正午光 */
[data-time="day"] #sunlight-ray-overlay {
  background: linear-gradient(180deg,
      rgba(255, 248, 220, 0) 0%,
      rgba(255, 246, 208, 0.26) 36%,
      rgba(255, 240, 190, 0.14) 60%,
      rgba(255, 236, 180, 0) 84%);
  opacity: 1;
}

/* 🌇 晚霞：贴着地平线的橘红 */
[data-time="dusk"] #sunlight-ray-overlay {
  background: linear-gradient(180deg,
      rgba(255, 168, 120, 0) 0%,
      rgba(255, 150, 96, 0.26) 32%,
      rgba(240, 120, 96, 0.15) 56%,
      rgba(220, 100, 90, 0) 80%);
  opacity: .9;
}

/* 🌙 星夜：清冷月光 */
[data-time="night"] #sunlight-ray-overlay {
  background: linear-gradient(180deg,
      rgba(168, 205, 255, 0) 0%,
      rgba(160, 198, 255, 0.12) 34%,
      rgba(140, 180, 240, 0.07) 58%,
      rgba(130, 170, 235, 0) 80%);
  opacity: .55;
}

/* 雨雪天：光柱减弱，避免和窗外阴天冲突 */
[data-weather="rain"] #sunlight-ray-overlay,
[data-weather="thunder"] #sunlight-ray-overlay {
  opacity: .35;
}

[data-weather="snow"] #sunlight-ray-overlay {
  opacity: .6;
  filter: saturate(0.7);
}

/* ==========================================================================
   天气专属微动效
   ========================================================================== */

/* 🍃 微风：窗边风铃轻摇 */
[data-weather="breeze"] #desk-item-windchime {
  animation: windChimeSway 3.2s ease-in-out infinite;
}

@keyframes windChimeSway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(4deg) translateX(2px);
  }
  75% {
    transform: rotate(-3.5deg) translateX(-2px);
  }
}

/* 🌧️ 雨天：室内绿植微微低垂，制造湿气感 */
[data-weather="rain"] #desk-item-plant {
  transform-origin: bottom center;
  animation: plantDroop 6s ease-in-out infinite;
}

@keyframes plantDroop {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(0.6deg); }
}