/* ============================================================
   topdevphone — Weather app styles
   Hero with a pure-CSS animated sky (no images, no network), a
   scrollable hourly strip and a 5-day range chart.
   The hero paints its own sky so it keeps its own light/dark
   contrast; everything outside the hero uses the shared tokens.
   ============================================================ */

.wx-scroll { padding-top: 2px; }

/* ---------- hero ---------- */
.wx-hero {
  position: relative;
  border-radius: var(--radius-card-lg);
  overflow: hidden;
  min-height: 216px;
  margin-bottom: 16px;
  color: #fff;
  background: linear-gradient(165deg, var(--wx-sky-a, #4facfe), var(--wx-sky-b, #00c6fb));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}
.wx-hero.wx-sunny  { --wx-sky-a: #3fa6ff; --wx-sky-b: #00d0f5; }
.wx-hero.wx-cloudy { --wx-sky-a: #6e7f96; --wx-sky-b: #9fb0c4; }
.wx-hero.wx-rain   { --wx-sky-a: #3a5169; --wx-sky-b: #6c88a8; }
.wx-hero.wx-storm  { --wx-sky-a: #202839; --wx-sky-b: #45516b; }
.wx-hero.wx-fog    { --wx-sky-a: #77828f; --wx-sky-b: #aeb7c1; }
.wx-hero.wx-none   { --wx-sky-a: #4a5160; --wx-sky-b: #6d7686; }

.wx-scene { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* Readability scrim: the scenes range from a bright fog bank to a dark storm,
   so the hero text needs a guaranteed floor of contrast over all of them. */
.wx-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.10) 55%, rgba(0, 0, 0, 0.22) 100%);
}

.wx-hero-body { position: relative; z-index: 2; padding: 18px 18px 20px; }
.wx-city { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; opacity: 0.85; }
.wx-temp {
  font-size: 62px; font-weight: 200; line-height: 1.02;
  letter-spacing: -3px; margin-top: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}
.wx-temp span { font-weight: 200; opacity: 0.7; }
.wx-cond {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; font-weight: 700; margin-top: 4px;
}
.wx-cond .wx-ic { width: 20px; height: 20px; }
.wx-hilo { font-size: 12.5px; opacity: 0.85; margin-top: 6px; }

.wx-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; }

/* ---------- scene: sun ---------- */
.wx-sun { position: absolute; top: -34px; right: -30px; width: 168px; height: 168px; }
.wx-sun-core {
  position: absolute; inset: 52px; border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0%, #ffe37a 58%, rgba(255, 214, 92, 0) 72%);
  animation: wxBreathe 5.5s ease-in-out infinite;
}
.wx-sun-rays {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(
    rgba(255, 255, 255, 0.30) 0deg 5deg,
    rgba(255, 255, 255, 0) 5deg 22deg);
  mask-image: radial-gradient(circle, transparent 28%, #000 42%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 42%, transparent 74%);
  animation: wxSpin 26s linear infinite;
}
@keyframes wxSpin { to { transform: rotate(360deg); } }
@keyframes wxBreathe { 50% { transform: scale(1.07); opacity: 0.88; } }

/* ---------- scene: drifting clouds ---------- */
.wx-cloud {
  position: absolute;
  width: 108px; height: 34px; border-radius: 34px;
  background: rgba(255, 255, 255, 0.72);
  filter: blur(0.4px);
}
.wx-cloud::before, .wx-cloud::after {
  content: ''; position: absolute; border-radius: 50%;
  background: inherit;
}
.wx-cloud::before { width: 46px; height: 46px; left: 18px; top: -20px; }
.wx-cloud::after  { width: 34px; height: 34px; right: 20px; top: -14px; }

.wx-cloud.dark  { background: rgba(230, 236, 244, 0.55); }
.wx-cloud.faint { background: rgba(255, 255, 255, 0.34); }

.wx-cloud.c1 { top: 34px;  left: -120px; transform: scale(0.95); animation: wxDrift 26s linear infinite; }
.wx-cloud.c2 { top: 16px;  left: -140px; transform: scale(1.25); opacity: 0.8; animation: wxDrift 38s linear infinite 4s; }
.wx-cloud.c3 { top: 74px;  left: -110px; transform: scale(0.72); opacity: 0.65; animation: wxDrift 20s linear infinite 8s; }

@keyframes wxDrift {
  from { transform: translateX(0) scale(var(--wx-cs, 1)); }
  to   { transform: translateX(420px) scale(var(--wx-cs, 1)); }
}
.wx-cloud.c1 { --wx-cs: 0.95; }
.wx-cloud.c2 { --wx-cs: 1.25; }
.wx-cloud.c3 { --wx-cs: 0.72; }

/* ---------- scene: rain streaks ----------
   NOTE: this is `wx-rainfall`, NOT `wx-rain`. `wx-rain` is the hero's
   condition modifier (`.wx-hero.wx-rain`) — reusing it here would apply
   `position:absolute` to the hero itself and destroy the layout. */
.wx-rainfall {
  position: absolute; inset: -30% -10% -10%;
  background-image: repeating-linear-gradient(
    76deg,
    rgba(255, 255, 255, 0) 0 6px,
    rgba(255, 255, 255, 0.42) 6px 7px,
    rgba(255, 255, 255, 0) 7px 15px);
  background-size: 100% 60px;
  animation: wxRain 0.72s linear infinite;
  opacity: 0.55;
}
.wx-rainfall.fast { animation-duration: 0.42s; opacity: 0.7; }
@keyframes wxRain { to { background-position: -34px 60px; } }

/* ---------- scene: lightning flash ---------- */
.wx-flash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0));
  opacity: 0;
  animation: wxFlash 7s steps(1, end) infinite;
}
@keyframes wxFlash {
  0%, 88% { opacity: 0; }
  89% { opacity: 0.65; }
  90% { opacity: 0; }
  91% { opacity: 0.45; }
  93%, 100% { opacity: 0; }
}

/* ---------- scene: fog bands ---------- */
.wx-fogband {
  position: absolute; left: -40%; width: 180%; height: 40px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.55), rgba(255,255,255,0));
  filter: blur(7px);
}
.wx-fogband.b1 { top: 46px;  animation: wxFog 17s ease-in-out infinite alternate; }
.wx-fogband.b2 { top: 104px; animation: wxFog 23s ease-in-out infinite alternate-reverse; opacity: 0.75; }
.wx-fogband.b3 { top: 158px; animation: wxFog 29s ease-in-out infinite alternate; opacity: 0.5; }
@keyframes wxFog { from { transform: translateX(-8%); } to { transform: translateX(8%); } }

/* ---------- error banner ---------- */
.wx-banner {
  display: flex; align-items: center; gap: 10px;
  background: color-mix(in srgb, var(--accent-orange) 16%, var(--bg-secondary));
  border-radius: var(--radius-card);
  padding: 11px 13px; margin-bottom: 16px;
}
.wx-banner-main { flex: 1; min-width: 0; }
.wx-banner-title { font-size: 13.5px; font-weight: 700; }
.wx-banner-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.wx-retry {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: #fff;
  background: var(--accent-blue); border-radius: 10px; padding: 7px 13px;
}
.wx-retry:active { filter: brightness(0.85); }

/* ---------- condition tints (outside the hero) ---------- */
.wx-tint-sunny  { color: var(--accent-yellow); }
.wx-tint-cloudy { color: var(--text-secondary); }
.wx-tint-rain   { color: var(--accent-blue); }
.wx-tint-storm  { color: var(--accent-purple); }
.wx-tint-fog    { color: var(--accent-teal); }

/* ---------- hourly strip ---------- */
.wx-hours {
  display: flex; gap: 4px; overflow-x: auto;
  background: var(--bg-secondary);
  border-radius: var(--radius-card-lg);
  padding: 12px 8px; margin-bottom: 16px;
  scrollbar-width: none;
}
.wx-hours::-webkit-scrollbar { height: 0; }
.wx-hour {
  flex: 0 0 auto; width: 54px; text-align: center;
  border-radius: 12px; padding: 4px 0;
}
.wx-hour.now { background: color-mix(in srgb, var(--accent-blue) 16%, transparent); }
.wx-hour-t { font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.wx-hour.now .wx-hour-t { color: var(--accent-blue); font-weight: 800; }
.wx-hour-ic { margin: 7px 0 6px; }
.wx-hour-ic .wx-ic { width: 22px; height: 22px; }
.wx-hour-deg { font-size: 14.5px; font-weight: 700; }

/* ---------- 5-day forecast ---------- */
.wx-days {
  background: var(--bg-secondary);
  border-radius: var(--radius-card-lg);
  padding: 4px 14px; margin-bottom: 16px;
}
.wx-day {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; position: relative;
}
.wx-day + .wx-day::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--separator);
}
.wx-day-name { flex: 0 0 58px; font-size: 14px; font-weight: 600; }
.wx-day-ic { flex: 0 0 24px; display: flex; align-items: center; }
.wx-day-ic .wx-ic { width: 22px; height: 22px; }
.wx-day-lo, .wx-day-hi { flex: 0 0 34px; font-size: 14px; text-align: right; }
.wx-day-lo { color: var(--text-secondary); }
.wx-day-hi { font-weight: 700; }
.wx-bar {
  flex: 1; min-width: 40px; height: 5px; border-radius: 3px;
  background: color-mix(in srgb, var(--text-secondary) 22%, transparent);
  position: relative; overflow: hidden;
}
.wx-bar-fill {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: currentColor; opacity: 0.9;
}

/* ---------- detail tiles ---------- */
.wx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.wx-tile {
  background: var(--bg-secondary); border-radius: var(--radius-card);
  padding: 11px 10px; text-align: center;
}
.wx-tile-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-secondary);
}
.wx-tile-value { font-size: 17px; font-weight: 700; margin-top: 4px; }

.wx-foot {
  font-size: 11.5px; color: var(--text-tertiary);
  text-align: center; padding: 4px 10px; line-height: 1.45;
}

/* ---------- home-screen widget ---------- */
.wx-w { display: flex; align-items: center; gap: 11px; }
.wx-w-ic { flex: 0 0 auto; }
.wx-w-ic .wx-ic { width: 30px; height: 30px; }
.wx-w-temp { font-size: 30px; font-weight: 300; letter-spacing: -1.4px; }
.wx-w-main { flex: 1; min-width: 0; }
.wx-w-cond { font-size: 14px; font-weight: 700; }
.wx-w-hilo { font-size: 11.5px; opacity: 0.65; margin-top: 1px; }
.wx-w.none .wx-w-temp { opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .wx-sun-core, .wx-sun-rays, .wx-cloud, .wx-rainfall, .wx-flash, .wx-fogband {
    animation: none !important;
  }
  .wx-cloud.c1 { left: 12%; }
  .wx-cloud.c2 { left: 46%; }
  .wx-cloud.c3 { left: 24%; }
}