/* sunrise-sunsit */

 :root{
   --color3: rgba(127, 160, 221, 0);
   --color4: rgb(127 161 222 / 0%);
   --color5: rgb(115 162 223 / 0%); 
   --color6: rgb(100 163 224 / 0%); 
   --color7: rgb(87 160 211 / 0%); 
   --color8: rgb(88 161 212 / 0%); 
   --color9: rgb(89 162 213 / 0%); 
   --color10: rgb(90 163 214 / 0%); 
   --color11: rgb(92 164 215 / 0%); 
   --color12: rgb(93 165 216 / 0%); 
   --color13: rgb(94 166 217 / 0%); 
   --color14: rgb(95 167 218 / 0%); 
   --color15: rgb(96 168 219 / 0%); 
   --color16: rgb(97 169 220 / 0%); 
   --color17: rgb(98 168 221 / 0%); 
   --color18: rgb(71 167 220 / 0%); 
   --color19: rgb(71 167 220 / 0%); 
   --color20: rgb(71 167 220 / 0%); 
}

html, body { margin: 0;}
.rain-container {
    position: fixed;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
}
/*天气预警*/
.dlarm {
   position: fixed;
    bottom: 40px;
    width: 420px;
    left: 90px;
    height: 30px;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

#main-dlarm {
    width: 120px;
    padding: 5px;
    font-size: 14px;
    color: #f7b401;
    background-color: rgb(52 52 52 / 90%);
}
#alarm-desc {
   width: 300px;
    padding: 5px;
    font-size: 14px;
    color: #ffffff;
    background-color: rgb(52 52 52 / 50%);
}

/* 通用样式，用于所有天气类型 */
.result-area {position: absolute; top:0;  left: 0;  width: 100%;  height: 100%;  pointer-events: none; z-index: 99;}

.result-area canvas{ overflow: hidden; color: white; 
    background-size: 100% 100%;
}

/* 晴白天夜晚通用样式 */
 .sun-zhen{ width: 100%; min-height: 100vh;  position: relative; }

 .sunetg { width: 100%; overflow: hidden; }
 .sun-mask {height: 20vw; }
 .sunboxyh { 
      position: relative; width: 140vw;  height: 140vw; left: -20vw;  right: -20vw; 
      -webkit-transition-duration: 2s;
      transition-duration: 2s;
      -webkit-transition-timing-function: linear;
      transition-timing-function: linear;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      -webkit-transition-property: -webkit-transform;
      transition-property: -webkit-transform;
      transition-property: transform;
      transition-property: transform, -webkit-transform;
  }
 
 .sun-orbit {top: 2vw; }

   .sun_icon {
      width: 18vw;
      height: 18vw;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 0.2vw;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

   .sun_rail {
      width: 140vw;
      height: 140vw;
      position: absolute;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-radius: 50%;
      border: 0.2vw solid;
      -webkit-transform: rotateZ(-45deg);
      transform: rotateZ(-45deg);
      border-top-color: rgba(255, 150, 50, 0.2);
      border-right-color: rgba(255, 150, 50, 0.2);
      border-bottom-color: rgba(255, 150, 50, 1);
      border-left-color: rgba(255, 150, 50);
    }

/* 晴白天太阳样式 */
 .sunrise_icon{width: 5vw;  height: 5vw; background-image: radial-gradient(circle at 50% 50%, #fff965, #ffeea4, rgb(255 245 177 / 4%), rgb(127 161 222 / 0%)); }

  .sunoon_icon{ background-image:radial-gradient(circle at 50% 50%, rgb(255 250 200), rgb(255 253 239), rgb(255 247 172 / 39%), rgb(197 230 255 / 10%), rgb(206 21 200 / 1%), var(--color6), var(--color7), var(--color8), var(--color9), var(--color10), var(--color11), var(--color12), var(--color13), var(--color14), var(--color15), var(--color16), var(--color17), var(--color18)); }

  .evening_icon{ width: 5vw;  height: 5vw;
  background-image: radial-gradient(circle at 50% 50%, rgb(255 77 0 / 86%), rgb(237 100 7 / 70%), rgb(255 96 0 / 60%), rgb(255 183 7 / 11%), #ffaf0700, rgb(100 163 224 / 0%)); }
  
  .sunset_icon{ width: 5vw;  height: 5vw;
  background-image: radial-gradient(circle at 50% 50%, rgb(255 154 72 / 90%), rgb(255 126 38 / 80%), rgb(255 121 7 / 50%), rgb(255 183 7 / 28%), #ffaf0700, rgb(100 163 224 / 0%)); }
  
  
 .sun_icon .sunicimg{width:100%; height:100%; position: relative; opacity: 0.5; }  
 
 .sunrise_icon .sunicimg{opacity: 0.8; background-image: url("../shimg/texiao/sun1.webp"); background-size: cover; }   
 
 .sunoon_icon .sunicimg{opacity: 0.5;
  animation: sunrise 10s ease-out infinite;
  background-image: url("../shimg/texiao/sun.webp");
  background-size: cover;
 }
 
@keyframes sunrise {
    0% { transform: translateX(0) rotate(0deg); opacity: 0.4;}
    50% { transform: translateX(0) rotate(10deg); opacity: 0.6; }
    100% { transform: translateX(0) rotate(-2deg); opacity: 0.5; }
}
 

.evening_icon .sunicimg{opacity: 0.8;
  animation: sunset 10s ease-out infinite;
  background-image: url("../shimg/texiao/sun3.webp");
  background-size: cover;
 }

.sunset_icon .sunicimg{opacity: 0.8;

  animation: sunset 10s ease-out infinite;
  background-image: url("../shimg/texiao/sun7.webp");
  background-size: cover;
 }
 
@keyframes sunset {
    0% { transform: translateX(0) rotate(0deg); opacity: 0.7;}
    100% { transform: translateX(0) rotate(360deg); opacity: 0.8; }
}


/* 夜间月落样式 */
 .moon-mask {height: 50vw; }
 .moon-orbit  {top: 3vw;}
 .moon_icon {
      width: 6vw;
      height: 6vw;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 0.2vw;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      z-index: 1;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

 .moon_icon .sunicimg{opacity:0.5;
  width:100%; height:100%; position: relative;
  background: #fffc73 url(../shimg/texiao/mon.webp);
  background-size: cover;
  animation: sunset 200s ease-out infinite;
  border-radius: 50%;
 }
 .moonphase {
	  width: 101%;
	  height: 101%;
	  top: 0;
	  left:0;
	  position: absolute;
	  border-radius: 50%;
	  transition: all 0.5s ease;
	  background-size: cover;
	  z-index: 1;
	  opacity: 0.9;
 }
 /* 月相名称 */
 .tooltip {
      position: absolute;
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
      opacity: 1;
      transition: opacity 0.3s ease;
    }
 

/* 多云样式 */

.dawn .sky .cloud-area.cloudy, .morning .sky .cloud-area.cloudy, .noon .sky .cloud-area.cloudy, .evening .sky .cloud-area.cloudy{
	background:rgb(163 163 163 / 48%) url("../shimg/texiao/cloudy.webp");
	background-size: 100% 100%;
	position: absolute;
	left: 0; top: 0; height: 100%;  width: 200%; 
 }
.dawn .sky .result-bckg.cloudy, .morning .sky .result-bckg.cloudy, .noon .sky .result-bckg.cloudy, .evening .sky .result-bckg.cloudy{
	background-size: 100% 100%; position: absolute; left: 0; top: 0; height: 100%;  width: 200%;
	animation: Cloudy_on 160s linear infinite;
	background-image: url("../shimg/texiao/cloudy1.webp"); 
 }
.dawn .sky .ground.cloudy, .morning .sky .ground.cloudy, .noon .sky .ground.cloudy, .evening .sky .ground.cloudy {
	background-size: 100% 100%;
	position: absolute;
	left: 0; top: 0; height: 100%;  width: 200%;
	animation: Cloudy_on 200s linear infinite;
	background-image: url("../shimg/texiao/cloudy2.webp");
 }

.twilight .sky .cloud-area.cloudy, .night .sky .cloud-area.cloudy {
   background: rgb(26 26 26 / 90%);
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 200%;
 }
.twilight .sky .result-bckg.cloudy, .night .sky .result-bckg.cloudy {
	opacity: 0.1;
	background-size: 100% 100%; position: absolute; left: 0; top: 0; height: 100%;  width: 100%; 
	background-image: url("../shimg/texiao/cloudy1.webp"); 
}
.twilight .sky .ground.cloudy, .night .sky .ground.cloudy {
	opacity: 0.1;
	background-size: 100% 100%; position: absolute; left: 0; top: 0; height: 100%;  width: 200%; 
	animation: Cloudy_on 360s linear infinite;
    background-image: url("../shimg/texiao/cloudy2.webp"); 
}
/* 多云动画定义动画的序列， 也可以单独绑定其他前景 */

@keyframes Cloudy_o {
 0% {left: 0; top:-1%;}
  100% {left: -150%}
}

@keyframes Cloudy_on {
 0% {left: 0;  top:1%;}
  100% {left: -200%}
}

/* 天气状态切换开关 */
.Nof{display: block !important; }
.Fon, .cloud-area, .resbck-area, .result-bckg, .result-area, .ground{display: none;}
/* 阴天雾天slide状态 */
.raj-day{opacity: 0.6;}
.rak-day{opacity: 0.3;}
.ral-day{opacity: 0.2;}
/* 雨天地面样式 */
.dawn .sky .ground.rain, .morning .sky .ground.rain, .noon .sky .ground.rain, .evening .sky .ground.rain{
	position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 1;
	background-image: url("../shimg/texiao/raind.webp"); background-size: 100% 100% ;
}
.twilight .sky .ground.rain, .night .sky .ground.rain{
	position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: 1;
	background-image: url("../shimg/texiao/rainy.webp"); background-size: 100% 100%; opacity: 0.6;
}
/* 阴天样式 */
.cloudyday {background: #555 url("../shimg/texiao/rain61.webp"); background-size: 100% 100%; opacity: 0.8; }

/* 小雨中雨天样式 */
.result-bckg.rain {background: #555 url("../shimg/texiao/rain61.webp"); background-size: 100% 100%; opacity: 0.8; }
/* 大雨暴雨天样式 */
.result-bckg.rain2 {background: #333 url("../shimg/texiao/rain61.webp"); background-size: 100% 100%; }
/* 雷阵雨样式 */
.resbck-area.rain3, .result-bckg{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
}

/* 雾天、浮尘、扬沙等模糊天气样式 */
.foggy { background: linear-gradient(rgb(160 159 156 / 80%), rgb(160 159 156 / 40%), rgb(178 178 178 / 20%), rgb(141 141 141 / 30%)); }
/* 浮尘、扬沙等模糊天气样式 */
.dust { background: linear-gradient(rgb(141 135 116 / 85%), rgb(151 140 108 / 52%), rgb(178 155 123 / 30%), rgb(123 100 75 / 50%)); }
/* 霾天样式 */
.haze { background: linear-gradient(rgb(100 134 163 / 93%), rgb(194 194 194 / 61%), rgb(78 101 131), rgb(141 141 141 / 30%)); }

/* 沙尘暴、龙卷风、台风等极端天气样式 */
.sandstorm { background: linear-gradient(rgb(89 65 65 / 80%), rgb(112 82 58 / 50%), rgb(44 19 3 / 30%)); }

/* 冰雹样式 */
.hail { background: linear-gradient(rgb(31 33 38 / 92%), rgb(97 97 97 / 90%); rgb(86 86 86 / 92%), rgb(141 141 141 / 30%)); }

/* 雨夹雪样式 */
.sleet { background: linear-gradient(rgb(221 221 221 / 93%), rgb(176 176 176 / 86%), rgb(219 219 219), rgb(141 141 141 / 30%)); }

/* 霜样式（这可能需要更具体的视觉表示，这里仅作为示例）*/
.frost {
    background: linear-gradient(rgb(186 195 203 / 93%), rgb(176 176 176 / 78%), rgb(219 219 219));
 
}
/* 雪天样式 */
.snowy { background: linear-gradient(rgb(233 245 255 / 93%), rgb(214 214 214 / 42%), rgb(243 243 243)); }