/* ═══════════════════════════════════
   SKYCAST — Weather App
   style.css
═══════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --glass:     rgba(255,255,255,.14);
  --glass-b:   rgba(255,255,255,.25);
  --text:      #ffffff;
  --muted:     rgba(255,255,255,.7);
  --r: 22px;
  --font: 'Sora', sans-serif;
}

body{
  font-family:var(--font);
  min-height:100vh;
  color:var(--text);
  overflow-x:hidden;
  position:relative;
}

/* ── DYNAMIC BACKGROUND ── */
.bg-layer{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(160deg,#3b82f6,#1e40af 60%,#0f172a);
  transition:background 1.2s ease;
}
.bg-layer.clear   { background:linear-gradient(160deg,#38bdf8,#2563eb 60%,#1e3a8a); }
.bg-layer.cloudy  { background:linear-gradient(160deg,#94a3b8,#64748b 60%,#334155); }
.bg-layer.rain    { background:linear-gradient(160deg,#475569,#334155 60%,#1e293b); }
.bg-layer.snow    { background:linear-gradient(160deg,#cbd5e1,#94a3b8 60%,#475569); }
.bg-layer.storm   { background:linear-gradient(160deg,#4338ca,#312e81 60%,#1e1b4b); }
.bg-layer.night   { background:linear-gradient(160deg,#1e293b,#0f172a 60%,#020617); }

/* Floating orbs for ambience */
.bg-layer::before, .bg-layer::after{
  content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;
}
.bg-layer::before{width:300px;height:300px;background:#fff;top:-80px;left:-80px;animation:drift1 18s ease-in-out infinite;}
.bg-layer::after{width:250px;height:250px;background:#fff;bottom:-60px;right:-60px;animation:drift2 22s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(60px,40px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,-30px);}}

/* ── APP SHELL ── */
.app{
  max-width:560px;margin:0 auto;padding:3rem 1.5rem 2rem;
  display:flex;flex-direction:column;gap:1.5rem;
  position:relative;z-index:1;
}

.app-head{text-align:center;}
.app-head h1{font-size:2rem;font-weight:800;display:flex;align-items:center;justify-content:center;gap:.6rem;}
.app-head h1 i{color:#fde68a;}
.tagline{color:var(--muted);font-size:.9rem;margin-top:.3rem;}

/* ── SEARCH ── */
.search-bar{
  display:flex;align-items:center;gap:.7rem;
  background:var(--glass);border:1px solid var(--glass-b);
  border-radius:99px;padding:.5rem .5rem .5rem 1.3rem;
  backdrop-filter:blur(16px);
}
.search-bar i{color:var(--muted);}
.search-bar input{
  flex:1;background:none;border:none;outline:none;color:var(--text);
  font-family:inherit;font-size:.95rem;
}
.search-bar input::placeholder{color:var(--muted);}
.search-btn{
  background:#fff;color:#1e3a8a;font-weight:700;font-size:.85rem;
  padding:.7rem 1.4rem;border-radius:99px;border:none;cursor:pointer;
  transition:transform .2s;
}
.search-btn:hover{transform:scale(1.04);}

/* ── QUICK CITIES ── */
.quick-cities{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;}
.quick-cities button{
  padding:.45rem 1.1rem;border-radius:99px;
  background:var(--glass);border:1px solid var(--glass-b);
  color:var(--text);font-size:.82rem;font-weight:500;cursor:pointer;
  transition:background .2s,transform .2s;
}
.quick-cities button:hover{background:rgba(255,255,255,.28);transform:translateY(-2px);}

/* ── LOADING ── */
.loading{text-align:center;padding:2rem 0;}
.spinner{
  width:42px;height:42px;border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;border-radius:50%;margin:0 auto 1rem;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.loading p{color:var(--muted);font-size:.88rem;}

/* ── ERROR ── */
.error-box{
  text-align:center;background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.35);
  border-radius:var(--r);padding:1.6rem;
}
.error-box i{font-size:1.6rem;color:#fca5a5;margin-bottom:.6rem;}
.error-box p{color:#fee2e2;font-size:.9rem;}

/* ── WEATHER CARD ── */
.weather-card{
  background:var(--glass);border:1px solid var(--glass-b);
  border-radius:28px;padding:2rem;backdrop-filter:blur(20px);
  animation:cardIn .5s ease;
}
@keyframes cardIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

.wc-main{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem;}
.wc-main h2{font-size:1.5rem;font-weight:700;}
.date-now{color:var(--muted);font-size:.85rem;margin-top:.2rem;}
.wc-icon{font-size:3.2rem;animation:iconBob 3s ease-in-out infinite;}
@keyframes iconBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

.wc-temp{font-size:4.5rem;font-weight:800;line-height:1;display:flex;align-items:flex-start;}
.wc-temp sup{font-size:1.8rem;font-weight:600;margin-top:.5rem;}
.weather-desc{color:var(--muted);font-size:1rem;text-transform:capitalize;margin-bottom:1.6rem;}

.wc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.stat-box{
  background:rgba(255,255,255,.08);border-radius:14px;padding:.9rem .5rem;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.stat-box i{color:#bfdbfe;font-size:1rem;}
.stat-val{font-weight:700;font-size:.92rem;}
.stat-label{font-size:.68rem;color:var(--muted);}

/* ── FORECAST ── */
.forecast h3{font-size:1.05rem;margin-bottom:1rem;font-weight:700;}
.forecast-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;}
.forecast-day{
  background:var(--glass);border:1px solid var(--glass-b);border-radius:16px;
  padding:1rem .4rem;text-align:center;backdrop-filter:blur(12px);
}
.fd-day{font-size:.75rem;color:var(--muted);font-weight:600;margin-bottom:.5rem;}
.fd-icon{font-size:1.6rem;margin-bottom:.4rem;}
.fd-temp{font-size:.85rem;font-weight:700;}
.fd-temp .lo{color:var(--muted);font-weight:500;}

/* ── FOOTER ── */
.app-footer{text-align:center;margin-top:1rem;}
.app-footer p{font-size:.78rem;color:var(--muted);}
.app-footer a{color:#fff;text-decoration:underline;}

.hidden{display:none !important;}

/* ── MOBILE ── */
@media (max-width:480px){
  .wc-stats{grid-template-columns:repeat(2,1fr);}
  .forecast-grid{grid-template-columns:repeat(3,1fr);}
  .wc-temp{font-size:3.5rem;}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}