/* ==================== Codeisa — Weather Page CSS ==================== */

.weather-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  min-height: 320px;
  padding: 24px;
  transition: background .6s ease;
}
.weather-animation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.weather-content {
  position: relative;
  z-index: 10;
}

/* Weather animations */
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255,200,0,.5)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 30px rgba(255,200,0,.7)); }
}
.sun-glow { animation: sun-pulse 3s ease-in-out infinite; }

@keyframes twinkle { 0%, 100% { opacity:.3; } 50% { opacity:1; } }
.star { animation: twinkle 2s ease-in-out infinite; }

@keyframes cloudFloat { 0% { transform: translateX(120%); } 100% { transform: translateX(-140%); } }
.cloud { animation: cloudFloat linear infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.18)); opacity: 0.95; }
.cloud.slow { animation-duration: 38s; }
.cloud.mid { animation-duration: 28s; }
.cloud.fast { animation-duration: 18s; }
.cloudLayer { position: absolute; inset: 0; pointer-events: none; }
.mist { position: absolute; inset: -20px; background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.14), transparent 55%), radial-gradient(circle at 70% 60%, rgba(255,255,255,0.10), transparent 60%); filter: blur(6px); opacity: 0.7; }

@keyframes rain-fall { 0% { transform: translateY(-100%); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform: translateY(400px); opacity:0; } }
.rain-drop { animation: rain-fall 1s linear infinite; }

@keyframes rainSlash { 0% { transform: translateY(-120%) translateX(0); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform: translateY(420px) translateX(80px); opacity:0; } }
.rain-slash { animation: rainSlash 0.95s linear infinite; }

@keyframes snow-fall { 0% { transform: translateY(-100%) rotate(0deg); opacity:0; } 10% { opacity:1; } 90% { opacity:.8; } 100% { transform: translateY(400px) rotate(360deg); opacity:0; } }
.snow-flake { animation: snow-fall 3s linear infinite; }

@keyframes lightningFlash { 0%, 92%, 100% { opacity:0; } 93% { opacity:0.65; } 94% { opacity:0.15; } 95% { opacity:0.85; } 96% { opacity:0.2; } 97% { opacity:0.7; } }
.lightning-flash { position: absolute; inset: 0; background: rgba(255,255,255,0.55); animation: lightningFlash 5.5s infinite; pointer-events: none; mix-blend-mode: overlay; }

@keyframes windDrift { 0% { transform: translateX(120%); } 100% { transform: translateX(-140%); } }
.wind-line { position: absolute; height: 2px; width: 80px; background: rgba(255,255,255,0.18); border-radius: 99px; filter: blur(0.2px); animation: windDrift linear infinite; }

/* Forecast strip */
.forecast-strip {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.06);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
}
.forecast-strip > * { scroll-snap-align: start; flex-shrink: 0; }
.forecast-strip:active { cursor: grabbing; }
.forecast-strip::-webkit-scrollbar { height: 8px; }
.forecast-strip::-webkit-scrollbar-track { background: rgba(255,255,255,0.06); border-radius: 999px; }
.forecast-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 999px; }

/* City search */
.city-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 10px 14px;
}
.city-search-box input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: var(--c-text);
  font-size: 14px;
}
.city-results {
  border-radius: 16px;
  padding: 12px;
}