/* Weather System Styles */

.weather-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998; /* Below flies but above content */
  overflow: hidden;
  transition: background-color 3s ease;
}

/* Darkening overlay for rain/storm */
.weather-container.weather-rain {
  background-color: rgba(0, 0, 0, 0.1);
}

.weather-container.weather-storm {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Raindrops */
.weather-raindrop {
  position: absolute;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(174, 194, 224, 0.8));
  border-radius: 0 0 2px 2px;
  pointer-events: none;
}

/* Debris/leaves */
.weather-debris {
  position: absolute;
  pointer-events: none;
  opacity: 0.7;
}

.weather-debris-leaf {
  background: linear-gradient(135deg, #8B4513 0%, #228B22 50%, #556B2F 100%);
  border-radius: 50% 0 50% 0;
  box-shadow: inset -1px -1px 2px rgba(0,0,0,0.2);
}

.weather-debris-dust {
  background: radial-gradient(circle, rgba(139, 119, 101, 0.6) 0%, rgba(139, 119, 101, 0.2) 70%, transparent 100%);
  border-radius: 50%;
}

/* Wind indicator - subtle directional lines */
.weather-container.weather-wind::before,
.weather-container.weather-storm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 50px,
    rgba(255, 255, 255, 0.02) 50px,
    rgba(255, 255, 255, 0.02) 52px
  );
  animation: windLines 2s linear infinite;
  pointer-events: none;
}

@keyframes windLines {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(52px);
  }
}

/* Storm lightning flash effect */
.weather-container.weather-storm {
  animation: lightningFlash 8s ease-in-out infinite;
}

@keyframes lightningFlash {
  0%, 100% {
    background-color: rgba(0, 0, 0, 0.15);
  }
  45% {
    background-color: rgba(0, 0, 0, 0.15);
  }
  46% {
    background-color: rgba(255, 255, 255, 0.3);
  }
  47% {
    background-color: rgba(0, 0, 0, 0.15);
  }
  48% {
    background-color: rgba(255, 255, 255, 0.2);
  }
  49% {
    background-color: rgba(0, 0, 0, 0.15);
  }
}

/* Weather indicator icon in corner */
.weather-container::after {
  content: '';
  position: fixed;
  top: 10px;
  right: 60px;
  width: 24px;
  height: 24px;
  opacity: 0.6;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.weather-container.weather-clear::after {
  content: '☀️';
  font-size: 20px;
}

.weather-container.weather-rain::after {
  content: '🌧️';
  font-size: 20px;
}

.weather-container.weather-wind::after {
  content: '💨';
  font-size: 20px;
}

.weather-container.weather-storm::after {
  content: '⛈️';
  font-size: 20px;
}