/* ===== 天气图标动画样式 ===== */

/* ===== 太阳图标动画 (晴天) ===== */
.sunny-icon {
  position: relative;
  width: 80px;
  height: 80px;
}

.sun-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #FFD700 0%, #FFA500 70%, #FF8C00 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 40px rgba(255, 215, 0, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  animation: sunPulse 3s ease-in-out infinite;
}

.sun-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  animation: sunRotate 20s linear infinite;
}

.sun-rays::before,
.sun-rays::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 15px;
  background: linear-gradient(to bottom, #FFD700, transparent);
  border-radius: 2px;
  transform-origin: 50% 200%;
}

.sun-rays::before {
  transform: translate(-50%, -50%) rotate(0deg);
  box-shadow: 
    0 0 rotate(45deg),
    0 0 rotate(90deg),
    0 0 rotate(135deg),
    0 0 rotate(180deg),
    0 0 rotate(225deg),
    0 0 rotate(270deg),
    0 0 rotate(315deg);
}

/* 生成多个光线 */
.sun-rays {
  background: 
    repeating-conic-gradient(
      from 0deg at 50% 50%,
      transparent 0deg 40deg,
      #FFD700 42deg 48deg,
      transparent 50deg 90deg
    );
  opacity: 0.8;
}

@keyframes sunRotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sunPulse {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 
      0 0 20px rgba(255, 215, 0, 0.6),
      0 0 40px rgba(255, 215, 0, 0.4);
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 60px rgba(255, 215, 0, 0.6);
  }
}

/* ===== 风力图标动画 (大风) ===== */
.windy-icon {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.wind-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.wind-line {
  height: 3px;
  background: linear-gradient(90deg, #87CEEB, #4682B4, transparent);
  border-radius: 2px;
  animation: windFlow 2s ease-in-out infinite;
}

.wind-line:nth-child(1) {
  width: 60%;
  animation-delay: 0s;
}

.wind-line:nth-child(2) {
  width: 80%;
  animation-delay: 0.3s;
}

.wind-line:nth-child(3) {
  width: 50%;
  animation-delay: 0.6s;
}

@keyframes windFlow {
  0%, 100% {
    transform: translateX(0) scaleX(1);
    opacity: 0.6;
  }
  50% {
    transform: translateX(10px) scaleX(1.2);
    opacity: 1;
  }
}

/* ===== 雨滴图标动画 (暴雨) ===== */
.rainy-icon {
  position: relative;
  width: 80px;
  height: 80px;
}

.cloud {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
}

.cloud-part {
  position: absolute;
  background: linear-gradient(135deg, #696969, #2F4F4F);
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.cloud-part-1 {
  width: 25px;
  height: 25px;
  top: 5px;
  left: 0;
}

.cloud-part-2 {
  width: 35px;
  height: 35px;
  top: 0;
  left: 15px;
}

.cloud-part-3 {
  width: 20px;
  height: 20px;
  top: 8px;
  right: 0;
}

.rain-drops {
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 35px;
}

.rain-drop {
  position: absolute;
  width: 2px;
  height: 12px;
  background: linear-gradient(to bottom, #87CEEB, #4682B4);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  animation: rainFall 1.5s ease-in infinite;
}

.rain-drop:nth-child(1) {
  left: 10px;
  animation-delay: 0s;
}

.rain-drop:nth-child(2) {
  left: 20px;
  animation-delay: 0.2s;
}

.rain-drop:nth-child(3) {
  left: 30px;
  animation-delay: 0.4s;
}

.rain-drop:nth-child(4) {
  left: 40px;
  animation-delay: 0.6s;
}

.rain-drop:nth-child(5) {
  left: 50px;
  animation-delay: 0.8s;
}

@keyframes rainFall {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(25px);
    opacity: 0;
  }
}

/* ===== 雪花图标动画 (暴雪) ===== */
.snowy-icon {
  position: relative;
  width: 80px;
  height: 80px;
}

.snowy-icon .cloud {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 30px;
}

.snowy-icon .cloud-part {
  background: linear-gradient(135deg, #F0F8FF, #B0C4DE);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5);
}

.snow-flakes {
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 35px;
}

.snow-flake {
  position: absolute;
  color: #FFFFFF;
  font-size: 14px;
  opacity: 0;
  animation: snowFall 3s linear infinite;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.snow-flake:nth-child(1) {
  left: 5px;
  animation-delay: 0s;
  animation-duration: 2.5s;
}

.snow-flake:nth-child(2) {
  left: 15px;
  animation-delay: 0.5s;
  animation-duration: 3s;
}

.snow-flake:nth-child(3) {
  left: 25px;
  animation-delay: 1s;
  animation-duration: 2.8s;
}

.snow-flake:nth-child(4) {
  left: 35px;
  animation-delay: 1.5s;
  animation-duration: 3.2s;
}

.snow-flake:nth-child(5) {
  left: 45px;
  animation-delay: 2s;
  animation-duration: 2.7s;
}

@keyframes snowFall {
  0% {
    transform: translateY(-10px) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(25px) rotate(360deg);
    opacity: 0;
  }
}

/* ===== 卡片进入动画 ===== */
.weather-card {
  animation: cardSlideIn 0.6s var(--easing-bounce) forwards;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
}

.weather-card:nth-child(1) { animation-delay: 0.1s; }
.weather-card:nth-child(2) { animation-delay: 0.2s; }
.weather-card:nth-child(3) { animation-delay: 0.3s; }
.weather-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardSlideIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ===== 悬停时的特殊动画 ===== */
.weather-card:hover .sunny-icon .sun-center {
  animation-duration: 1.5s;
}

.weather-card:hover .sunny-icon .sun-rays {
  animation-duration: 10s;
}

.weather-card:hover .windy-icon .wind-line {
  animation-duration: 1s;
}

.weather-card:hover .rainy-icon .rain-drop {
  animation-duration: 0.8s;
}

.weather-card:hover .snowy-icon .snow-flake {
  animation-duration: 2s;
}

/* ===== 温度数字计数动画 ===== */
.temp-value {
  counter-reset: temperature;
  animation: temperatureCount 1s ease-out forwards;
}

.temp-value::before {
  content: counter(temperature);
}

@keyframes temperatureCount {
  from { counter-increment: temperature 0; }
  to { counter-increment: temperature var(--temp-target, 24); }
}

/* ===== 页面加载动画 ===== */
.weather-app {
  animation: appFadeIn 1s ease-out forwards;
}

@keyframes appFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.app-header {
  animation: headerSlideDown 0.8s var(--easing-bounce) forwards;
  opacity: 0;
  transform: translateY(-20px);
}

@keyframes headerSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.app-footer {
  animation: footerSlideUp 0.8s var(--easing-bounce) 0.5s forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes footerSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== 点击波纹效果 ===== */
.weather-card {
  position: relative;
  overflow: hidden;
}

.weather-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: 10;
  pointer-events: none;
}

.weather-card:active::before {
  width: 300px;
  height: 300px;
}

/* ===== 性能优化 - 减少重绘和回流 ===== */
.weather-icon,
.sun-center,
.sun-rays,
.wind-line,
.rain-drop,
.snow-flake,
.cloud-part {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== 无障碍访问 - 减少动画 ===== */
@media (prefers-reduced-motion: reduce) {
  .weather-card,
  .app-header,
  .app-footer,
  .weather-icon,
  .sun-center,
  .sun-rays,
  .wind-line,
  .rain-drop,
  .snow-flake {
    animation: none !important;
    transition: none !important;
  }
  
  .weather-card:hover {
    transform: translateY(-2px);
  }
}

/* ===== 高性能动画替代方案 ===== */
@supports (transform-style: preserve-3d) {
  .weather-icon {
    transform-style: preserve-3d;
  }
}

/* ===== 移动设备优化 ===== */
@media (max-width: 768px) {
  .weather-card {
    animation-duration: 0.4s;
  }
  
  .sun-rays {
    animation-duration: 15s;
  }
  
  .wind-line {
    animation-duration: 1.5s;
  }
  
  .rain-drop {
    animation-duration: 1.2s;
  }
  
  .snow-flake {
    animation-duration: 2.5s;
  }
}

/* ===== 特殊视觉效果 ===== */

/* 卡片光晕效果 */
.weather-card.sunny:hover {
  box-shadow: 
    0 16px 32px rgba(255, 165, 0, 0.3),
    0 8px 16px rgba(255, 215, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.weather-card.windy:hover {
  box-shadow: 
    0 16px 32px rgba(70, 130, 180, 0.3),
    0 8px 16px rgba(135, 206, 235, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.weather-card.rainy:hover {
  box-shadow: 
    0 16px 32px rgba(47, 79, 79, 0.4),
    0 8px 16px rgba(105, 105, 105, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.weather-card.snowy:hover {
  box-shadow: 
    0 16px 32px rgba(176, 196, 222, 0.4),
    0 8px 16px rgba(240, 248, 255, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}