/* weather-header.css — a living top banner: animated sky (day/night gradient,
 * sun/moon arc, drifting clouds, rain, stars) behind live time + conditions.
 * Driven by html-root/js/weather-header.js (Open-Meteo). No libraries. */

.wx {
  position: relative;
  height: 150px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
  color: #fff;
  box-shadow: 0 1px 16px rgba(15, 17, 23, .12);
  isolation: isolate;
}

/* Merged top strip: brand + version (left), account controls (right). */
.wx-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px;
}
.wx-brandwrap { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.05; }
.wx-topbar .brand-home { text-decoration: none; }
.wx-topbar .brand { font-family: 'Alkatra', cursive; font-weight: 600; font-size: 22px; line-height: 1.1; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.wx-topbar .version-chip { color: rgba(255,255,255,.8); font-size: 10.5px; }
.wx-topbar .auth-status { display: flex; align-items: center; gap: 10px; }
.wx-topbar .auth-status-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.5); }
.wx-topbar .auth-status-settings { color: #fff; opacity: .9; }
.wx-topbar .auth-status-settings:hover { opacity: 1; }
.wx-topbar .auth-status-signout { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.wx-topbar .auth-status-signout:hover { background: rgba(255,255,255,.28); }

/* ── Sky gradient (class-driven, smoothly transitioning) ─────────────── */
.wx-sky { position: absolute; inset: 0; transition: background 2s linear; z-index: 0; }
.wx.day  .wx-sky { background: linear-gradient(180deg, #4a90d9 0%, #8fc1ec 60%, #cfe6f7 100%); }
.wx.dawn .wx-sky { background: linear-gradient(180deg, #2b3a67 0%, #c96f5a 55%, #f6b67e 100%); }
.wx.dusk .wx-sky { background: linear-gradient(180deg, #1f2b54 0%, #b8556a 50%, #f0a062 100%); }
.wx.night .wx-sky { background: linear-gradient(180deg, #0a1230 0%, #122150 60%, #1d2e63 100%); }
/* Weather darkens the sky a touch. */
.wx.overcast .wx-sky { filter: saturate(.7) brightness(.82); }
.wx.rainy .wx-sky { filter: saturate(.6) brightness(.66); }

/* ── Sun / Moon ──────────────────────────────────────────────────────── */
.wx-celestial {
  position: absolute; width: 56px; height: 56px; border-radius: 50%;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  transition: left 1.5s linear, top 1.5s linear, opacity 1.5s linear, background 2s linear, box-shadow 2s linear;
  z-index: 1;
}
.wx.is-day .wx-celestial {
  background: radial-gradient(circle at 50% 50%, #fff6c8 0%, #ffe57a 45%, #ffcf3f 100%);
  box-shadow: 0 0 38px 12px rgba(255, 213, 79, .55);
}
.wx.is-night .wx-celestial {
  background: radial-gradient(circle at 38% 38%, #ffffff 0%, #e7ecf7 55%, #c5cee0 100%);
  box-shadow: 0 0 26px 6px rgba(220, 230, 255, .4);
}

/* ── Stars (night only) ──────────────────────────────────────────────── */
.wx-stars { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 2s linear; pointer-events: none; }
.wx.is-night .wx-stars { opacity: 1; }
.wx-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: .8; animation: wx-twinkle 3s ease-in-out infinite; }
@keyframes wx-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }

/* ── Clouds ──────────────────────────────────────────────────────────── */
.wx-clouds { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wx-cloud {
  position: absolute; width: 92px; height: 26px;
  background: rgba(255, 255, 255, .85);
  border-radius: 100px; filter: blur(2px);
  opacity: 0; transition: opacity 2s linear;
  animation: wx-drift linear infinite;
}
.wx-cloud::before, .wx-cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.wx-cloud::before { width: 42px; height: 42px; top: -18px; left: 12px; }
.wx-cloud::after  { width: 58px; height: 58px; top: -30px; right: 14px; }
.wx.has-clouds .wx-cloud { opacity: .9; }
.wx.overcast .wx-cloud, .wx.rainy .wx-cloud { background: rgba(207, 214, 226, .92); }
@keyframes wx-drift { from { left: -160px; } to { left: calc(100% + 60px); } }

/* ── Rain ────────────────────────────────────────────────────────────── */
.wx-rain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 1s linear; }
.wx.rainy .wx-rain { opacity: 1; }
.wx-drop { position: absolute; top: -20px; width: 2px; height: 16px; background: linear-gradient(rgba(255,255,255,0), rgba(210,225,255,.8)); animation: wx-fall linear infinite; }
@keyframes wx-fall { to { transform: translateY(190px); } }

/* ── Content overlay ─────────────────────────────────────────────────── */
.wx-content {
  position: absolute; left: 0; right: 0; top: 40px; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.wx-city { font-size: 15px; font-weight: 600; letter-spacing: .02em; opacity: .95; }
.wx-clock { font-size: 30px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.wx-date { font-size: 13px; opacity: .9; margin-top: 2px; }
.wx-forecast { display: flex; gap: 14px; align-items: center; }
.wx-fc { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; line-height: 1.2; }
.wx-fc-d { font-weight: 600; opacity: .9; }
.wx-fc-g { font-size: 15px; line-height: 1; }
.wx-fc-t { font-weight: 600; }
.wx-fc-t .lo { opacity: .68; margin-left: 3px; font-weight: 400; }
.wx-fc-p { font-size: 10px; color: #bfe0ff; opacity: .9; }
@media (max-width: 640px) { .wx-forecast { display: none; } }

.wx-right { text-align: right; }
.wx-temp { font-size: 32px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-cond { font-size: 15px; font-weight: 600; margin-top: 2px; opacity: .96; }
.wx-meta { font-size: 12px; opacity: .9; margin-top: 4px; }

@media (max-width: 560px) {
  .wx-clock { font-size: 30px; }
  .wx-temp { font-size: 34px; }
  .wx-content { padding: 0 16px; }
}