/* css/animations.css — Weather particles, loading overlay, lightning, fog */

/* ===== Loading Overlay ===== */
.loading-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #866043;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  gap: 20px;
}

.loading-overlay.hidden { display: none; }

.loading-overlay p {
  font-size: 14px;
  color: #FFFFFF;
  text-shadow: 2px 2px 0px #3F3F3F;
  margin: 0;
}

/* ===== Rain ===== */
.rain-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.rain-drop {
  position: absolute;
  top: -20px;
  width: 3px;
  height: 12px;
  background: #5B8EFF;
  image-rendering: pixelated;
  animation: rainFall linear infinite;
}

@keyframes rainFall {
  0%   { transform: translateY(-20px); opacity: 0.8; }
  100% { transform: translateY(100vh); opacity: 0.4; }
}

/* ===== Snow ===== */
.snow-flake {
  position: absolute;
  top: -10px;
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  image-rendering: pixelated;
  animation: snowFall linear infinite;
}

@keyframes snowFall {
  0%   { transform: translateY(-10px) translateX(0); opacity: 1; }
  50%  { transform: translateY(50vh) translateX(15px); }
  100% { transform: translateY(100vh) translateX(-10px); opacity: 0.7; }
}

/* ===== Lightning Flash ===== */
.lightning-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 2;
  animation: lightningFlash 0.15s ease-out forwards;
}

@keyframes lightningFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== Fog Overlay ===== */
.fog-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 1;
  animation: fogDrift 8s ease-in-out infinite alternate;
}

[data-theme="night"] .fog-overlay { background: rgba(100, 100, 120, 0.4); }

@keyframes fogDrift {
  0%   { opacity: 0.3; }
  100% { opacity: 0.6; }
}

body { transition: background-color 0.6s ease; }