/* =============================================
   METEOSPHERE — ANIMATIONS CSS
   ============================================= */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes snowFlake {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  20%  { opacity: 0.8; }
  100% { transform: translateY(60px) rotate(360deg); opacity: 0; }
}

@keyframes lightningFlash {
  0%, 90%, 100% { opacity: 0; }
  92%, 96%      { opacity: 1; }
}

@keyframes windWave {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes countUp {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sunRise {
  from { transform: translateY(20px) scale(0.8); opacity: 0; }
  to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(79,195,247,0.3); }
  50%       { box-shadow: 0 0 24px rgba(79,195,247,0.7); }
}

/* ---- APPLIED ANIMATIONS ---- */
.weather-icon-large { animation: float 4s ease-in-out infinite; }

.status-dot { animation: pulse 2s infinite; }

.metric-card { animation: fadeIn 0.4s ease both; }
.metric-card:nth-child(1)  { animation-delay: 0.05s; }
.metric-card:nth-child(2)  { animation-delay: 0.10s; }
.metric-card:nth-child(3)  { animation-delay: 0.15s; }
.metric-card:nth-child(4)  { animation-delay: 0.20s; }
.metric-card:nth-child(5)  { animation-delay: 0.25s; }
.metric-card:nth-child(6)  { animation-delay: 0.30s; }
.metric-card:nth-child(7)  { animation-delay: 0.35s; }
.metric-card:nth-child(8)  { animation-delay: 0.40s; }

.hero-weather { animation: fadeIn 0.5s ease; }

.section-card { animation: fadeIn 0.4s ease; }

.toast { animation: slideInRight 0.3s ease; }

/* ---- WEATHER ANIMATIONS (canvas/SVG based) ---- */

/* Rain overlay */
.weather-bg-rain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    175deg,
    transparent 0px,
    transparent 3px,
    rgba(79,195,247,0.08) 3px,
    rgba(79,195,247,0.08) 4px
  );
  pointer-events: none;
  animation: rainDrop 0.8s linear infinite;
}

/* Snow overlay */
.weather-bg-snow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 1px at 20% 30%, rgba(255,255,255,0.5) 100%, transparent),
              radial-gradient(circle 1px at 60% 70%, rgba(255,255,255,0.5) 100%, transparent),
              radial-gradient(circle 1px at 80% 20%, rgba(255,255,255,0.5) 100%, transparent);
  pointer-events: none;
  animation: snowFlake 2s ease-in infinite;
}

/* Thunderstorm flash */
.weather-bg-thunder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,100,0.05);
  pointer-events: none;
  animation: lightningFlash 3s ease infinite;
}

/* ---- HOVER EFFECTS ---- */
.metric-card:hover .mc-icon { animation: float 1s ease-in-out; }
.forecast-day:hover .fd-icon { animation: float 0.5s ease; }

/* ---- TRANSITION HELPERS ---- */
.fade-in    { animation: fadeIn 0.4s ease; }
.slide-in   { animation: slideInRight 0.3s ease; }
.count-up   { animation: countUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}