/* ============================================================================
   government.wien — weather & storms page
   Condition-driven animated sky (CSS) + canvas particles (weather.js).
   ========================================================================== */

.wx-hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: clamp(340px, 30vw, 460px);
  display: flex;
  align-items: flex-end;
  box-shadow: var(--shadow-md);
  isolation: isolate;
  color: #fff;
}

/* --- Sky background, swapped by condition/day class on .wx-hero --- */
.wx-sky { position: absolute; inset: 0; z-index: 0; transition: background 1.2s var(--ease); background: linear-gradient(180deg, #4a86c4 0%, #7db0dd 55%, #bcd9ef 100%); }
.wx-hero canvas.wx-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.wx-hero.is-day.cond-clear   .wx-sky,
.wx-hero.is-day.cond-partly  .wx-sky { background: linear-gradient(180deg, #2f7fc9 0%, #63a6dc 50%, #b8dcf3 100%); }
.wx-hero.is-day.cond-cloudy  .wx-sky { background: linear-gradient(180deg, #7f93a6 0%, #9fb0bf 60%, #c6d1da 100%); }
.wx-hero.is-day.cond-fog     .wx-sky { background: linear-gradient(180deg, #9aa6ab 0%, #b9c1c4 60%, #d5dadb 100%); }
.wx-hero.is-day.cond-drizzle .wx-sky,
.wx-hero.is-day.cond-rain    .wx-sky,
.wx-hero.is-day.cond-showers .wx-sky { background: linear-gradient(180deg, #566677 0%, #6c7d8d 55%, #93a3af 100%); }
.wx-hero.is-day.cond-snow    .wx-sky { background: linear-gradient(180deg, #8d9aa8 0%, #b3bec9 55%, #dbe3ea 100%); }
.wx-hero.cond-thunder        .wx-sky { background: linear-gradient(180deg, #2b2740 0%, #443a55 55%, #6a5f74 100%); }

.wx-hero.is-night .wx-sky            { background: linear-gradient(180deg, #0e1633 0%, #1b2550 55%, #2c375f 100%); }
.wx-hero.is-night.cond-cloudy .wx-sky,
.wx-hero.is-night.cond-rain   .wx-sky,
.wx-hero.is-night.cond-showers .wx-sky { background: linear-gradient(180deg, #131a2c 0%, #232a3d 60%, #333c4f 100%); }

/* --- Sun --- */
.wx-sun {
  position: absolute; z-index: 1;
  top: 16%; right: 14%;
  width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6d8, #ffd85e 60%, #ffbf3a 100%);
  box-shadow: 0 0 60px 18px rgba(255, 205, 90, 0.55);
  opacity: 0; transform: scale(0.6); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.wx-sun::before {
  content: ""; position: absolute; inset: -34px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(255, 214, 110, 0.5) 8deg 12deg, transparent 12deg 30deg);
  animation: wx-spin 60s linear infinite;
}
.wx-hero.is-day.cond-clear .wx-sun,
.wx-hero.is-day.cond-partly .wx-sun { opacity: 1; transform: scale(1); }

/* --- Moon + stars --- */
.wx-moon {
  position: absolute; z-index: 1; top: 16%; right: 16%;
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f4f6ff, #cdd6f2 70%, #aab6dd 100%);
  box-shadow: 0 0 40px 8px rgba(200, 214, 255, 0.35), inset -10px -8px 0 -2px rgba(120, 135, 190, 0.35);
  opacity: 0; transition: opacity 0.8s var(--ease);
}
.wx-stars { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1s var(--ease); }
.wx-stars i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #fff; opacity: 0.8; animation: wx-twinkle 3.5s ease-in-out infinite;
}
.wx-hero.is-night .wx-moon,
.wx-hero.is-night .wx-stars { opacity: 1; }
.wx-hero.is-night.cond-rain .wx-moon,
.wx-hero.is-night.cond-thunder .wx-moon,
.wx-hero.is-night.cond-cloudy .wx-moon { opacity: 0.35; }

/* --- Clouds --- */
.wx-clouds { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 0.9s var(--ease); }
.wx-cloud {
  position: absolute; border-radius: 100px;
  background: rgba(255, 255, 255, 0.9);
  filter: blur(0.3px);
  will-change: transform;
}
.wx-cloud::before, .wx-cloud::after {
  content: ""; position: absolute; border-radius: 50%; background: inherit;
}
.wx-cloud { width: 150px; height: 46px; }
.wx-cloud::before { width: 66px; height: 66px; top: -26px; left: 24px; }
.wx-cloud::after  { width: 92px; height: 92px; top: -40px; left: 62px; }
.wx-cloud.c1 { top: 22%; left: -20%; transform: scale(1);    animation: wx-drift 42s linear infinite; }
.wx-cloud.c2 { top: 40%; left: -30%; transform: scale(0.7);  animation: wx-drift 60s linear infinite; opacity: 0.8; }
.wx-cloud.c3 { top: 12%; left: -45%; transform: scale(1.25); animation: wx-drift 78s linear infinite; opacity: 0.65; }
.wx-hero.cond-partly .wx-clouds  { opacity: 0.85; }
.wx-hero.cond-cloudy .wx-clouds,
.wx-hero.cond-fog .wx-clouds,
.wx-hero.cond-drizzle .wx-clouds,
.wx-hero.cond-rain .wx-clouds,
.wx-hero.cond-showers .wx-clouds,
.wx-hero.cond-snow .wx-clouds,
.wx-hero.cond-thunder .wx-clouds { opacity: 1; }
.wx-hero.is-night .wx-cloud { background: rgba(190, 200, 225, 0.6); }

/* --- Fog overlay --- */
.wx-fog { position: absolute; inset: 0; z-index: 1; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(220,225,228,0.55)); backdrop-filter: blur(1px); transition: opacity 0.9s var(--ease); }
.wx-hero.cond-fog .wx-fog { opacity: 1; }

/* --- Lightning flash (thunder) --- */
.wx-flash { position: absolute; inset: 0; z-index: 3; background: rgba(255,255,255,0.9); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.wx-hero.cond-thunder .wx-flash { animation: wx-flash 7s steps(1) infinite; }

/* --- Current conditions overlay --- */
.wx-current {
  position: relative; z-index: 4;
  width: 100%;
  padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.6rem;
  align-items: end;
  background: linear-gradient(0deg, rgba(10, 12, 20, 0.5), transparent 70%);
}
.wx-temp { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.4rem, 2rem + 8vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; grid-row: span 2; text-shadow: 0 2px 18px rgba(0,0,0,0.3); }
.wx-temp sup { font-size: 0.4em; vertical-align: super; font-weight: 700; }
.wx-place { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.9; }
.wx-cond { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); letter-spacing: -0.01em; }
.wx-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; grid-column: 1 / -1; margin-top: 0.6rem; font-size: var(--fs-small); }
.wx-meta span { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.14); padding: 0.35rem 0.7rem; border-radius: 999px; backdrop-filter: blur(4px); }
.wx-updated { font-family: var(--font-mono); font-size: 0.72rem; opacity: 0.75; grid-column: 1 / -1; margin-top: 0.5rem; }

/* --- Storm badge --- */
.wx-storm {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: var(--white);
  margin-top: 1.5rem;
}
.wx-storm .ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.wx-storm strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.wx-storm span { font-size: var(--fs-small); color: var(--stone); }
.wx-storm.is-alert { border-color: var(--red); background: color-mix(in srgb, var(--red) 6%, var(--white)); }
.wx-storm.is-alert .ic { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.wx-storm.is-watch .ic { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.wx-storm.is-calm .ic  { background: color-mix(in srgb, #2f8f5b 16%, transparent); color: #2f8f5b; }

/* --- 7-day forecast --- */
.wx-forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6rem; margin-top: 1.5rem; }
.wx-day {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1rem 0.5rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); text-align: center;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.wx-day:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.wx-day.is-today { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.wx-day__name { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--stone); }
.wx-day__icon { width: 34px; height: 34px; color: var(--red-ink); }
.wx-day__icon svg { width: 100%; height: 100%; }
.wx-day__hi { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.wx-day__lo { font-size: var(--fs-small); color: var(--stone); }
.wx-day__rain { font-family: var(--font-mono); font-size: 0.68rem; color: #3c7fb1; display: inline-flex; align-items: center; gap: 0.2rem; }

/* --- Blitzortung live map --- */
.wx-blitz { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #0b1020; }
.wx-blitz iframe { display: block; width: 100%; height: clamp(360px, 46vw, 560px); border: 0; }
.wx-blitz__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.8rem 1.1rem; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: var(--fs-small); }
.wx-blitz__bar .live { display: inline-flex; align-items: center; gap: 0.5rem; }
.wx-blitz__bar .live b { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255,77,77,0.6); animation: wx-pulse 1.8s ease-out infinite; }
.wx-blitz__bar a { color: var(--gold-soft); }

.wx-source { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--stone); margin-top: 1.2rem; }
.wx-source a { color: var(--red-ink); }

@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-drift { from { transform: translateX(0); } to { transform: translateX(160vw); } }
@keyframes wx-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes wx-flash { 0%, 92%, 100% { opacity: 0; } 93% { opacity: 0.85; } 94% { opacity: 0.1; } 95% { opacity: 0.7; } 96% { opacity: 0; } }
@keyframes wx-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,77,77,0.6); } 100% { box-shadow: 0 0 0 8px rgba(255,77,77,0); } }

@media (max-width: 720px) {
  .wx-forecast { grid-template-columns: repeat(4, 1fr); }
  .wx-current { grid-template-columns: 1fr; }
  .wx-temp { grid-row: auto; }
}
@media (max-width: 440px) {
  .wx-forecast { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .wx-sun::before, .wx-cloud, .wx-stars i, .wx-hero.cond-thunder .wx-flash, .wx-blitz__bar .live b { animation: none !important; }
}