:root {
  --bg: #0f172a;
  --fg: #f8fafc;
  --muted: #94a3b8;
  --accent-out: #4ade80;
  --accent-partial: #eab308;
  --accent-hidden: #cbd5e1;
  --accent-unknown: #fca5a5;
  --accent: var(--accent-unknown);
  --radius: 16px;
  --max-width: 720px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Canvas fallback — body is left transparent so the fixed .weather-fx layer
   (z-index: -1) can show through. */
html {
  background: var(--bg);
}

.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 4vw, 2rem);
  min-height: 100dvh;
}

.page[data-status="out"]     { --accent: var(--accent-out); }
.page[data-status="partial"] { --accent: var(--accent-partial); }
.page[data-status="hidden"]  { --accent: var(--accent-hidden); }
.page[data-status="unknown"] { --accent: var(--accent-unknown); }
.page[data-status="loading"] { --accent: var(--muted); }

/* The hero floats over the animated weather-fx layer, which can match the
   headline's accent color (e.g. slate "hidden" on a cloudy slate sky). A
   frosted-glass scrim — dark tint + backdrop blur — guarantees contrast
   for all three text sizes without fighting the per-status accent color. */
.hero {
  text-align: center;
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--radius);
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

/* Browsers without backdrop-filter (older Firefox flag, some embedded
   webviews) get a slightly more opaque solid scrim instead of a blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero { background: rgba(11, 18, 32, 0.7); }
}

.question {
  margin: 0 0 0.25rem;
  color: #f8fafc;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.headline {
  margin: 0;
  font-size: clamp(3rem, 16vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  transition: color 0.3s ease;
}

.description {
  margin: 0.75rem auto 0;
  max-width: 40ch;
  color: #f8fafc;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  line-height: 1.45;
}

.photo {
  margin: 0;
  background: #1e293b;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #0b1220;
}

.footer {
  margin-top: auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.footer p {
  margin: 0;
}

.footer p + p {
  margin-top: 0.35rem;
}

.footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer a:hover {
  color: var(--fg);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f8fafc;
    --fg: #0f172a;
    --muted: #64748b;
  }
  .photo { background: #e2e8f0; }
  .photo img { background: #cbd5e1; }
}

@media (max-width: 480px) {
  .page { gap: 1.25rem; }
}

/* ---------------------------------------------------------------
   Weather effects — fixed, full-viewport layer behind everything.
   data-weather is set on .page; the .weather-fx child escapes flex
   via position: fixed and renders as a backdrop.
   --------------------------------------------------------------- */

.weather-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  transition: background 1.2s ease;
}

.weather-fx::before,
.weather-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Clear: warm sun bloom in the upper right over a blue gradient. */
.page[data-weather="clear"] .weather-fx {
  background: linear-gradient(180deg, #60a5fa 0%, #1e3a8a 100%);
}
.page[data-weather="clear"] .weather-fx::before {
  background: radial-gradient(circle at 78% 18%, rgba(253, 224, 71, 0.65) 0%, rgba(253, 186, 116, 0.25) 25%, transparent 55%);
  opacity: 1;
  animation: sun-pulse 8s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}

/* Cloudy: cartoon-style clouds drifting across a muted sky. Two layers at
   different sizes and speeds for depth. Each tile has two cloud shapes so
   drift looks populated. */
.page[data-weather="cloudy"] .weather-fx {
  background: linear-gradient(180deg, #64748b 0%, #1e293b 100%);
}
.page[data-weather="cloudy"] .weather-fx::before,
.page[data-weather="cloudy"] .weather-fx::after {
  opacity: 1;
  background-repeat: repeat-x;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 140'><g fill='white' opacity='0.45'><ellipse cx='90' cy='75' rx='55' ry='18'/><circle cx='70' cy='65' r='20'/><circle cx='100' cy='52' r='26'/><circle cx='130' cy='62' r='22'/><ellipse cx='270' cy='95' rx='55' ry='18'/><circle cx='250' cy='85' r='22'/><circle cx='285' cy='72' r='28'/><circle cx='320' cy='86' r='22'/></g></svg>");
}
.page[data-weather="cloudy"] .weather-fx::before {
  background-size: 360px auto;
  background-position-y: 12%;
  animation: cloud-drift-far 90s linear infinite;
}
.page[data-weather="cloudy"] .weather-fx::after {
  background-size: 260px auto;
  background-position-y: 62%;
  opacity: 0.7;
  animation: cloud-drift-near 55s linear infinite;
}
@keyframes cloud-drift-far {
  from { background-position-x: 0; }
  to   { background-position-x: -360px; }
}
@keyframes cloud-drift-near {
  from { background-position-x: 0; }
  to   { background-position-x: 260px; }
}

/* Rain: small teardrops falling over a stormy gradient. Two layers (small
   drops farther back, larger drops foreground) for depth. */
.page[data-weather="rain"] .weather-fx {
  background: linear-gradient(180deg, #334155 0%, #0b1220 100%);
}
.page[data-weather="rain"] .weather-fx::before,
.page[data-weather="rain"] .weather-fx::after {
  opacity: 1;
  background-repeat: repeat;
}
.page[data-weather="rain"] .weather-fx::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><g fill='%23bae6fd' opacity='0.55'><ellipse cx='15' cy='12' rx='1.2' ry='4'/><ellipse cx='48' cy='40' rx='1.2' ry='4'/><ellipse cx='78' cy='22' rx='1.2' ry='4'/><ellipse cx='110' cy='55' rx='1.2' ry='4'/><ellipse cx='28' cy='78' rx='1.2' ry='4'/><ellipse cx='65' cy='95' rx='1.2' ry='4'/><ellipse cx='122' cy='105' rx='1.2' ry='4'/><ellipse cx='88' cy='125' rx='1.2' ry='4'/></g></svg>");
  background-size: 140px 140px;
  animation: rain-fall-far 1.4s linear infinite;
}
.page[data-weather="rain"] .weather-fx::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23bae6fd' opacity='0.85'><ellipse cx='12' cy='15' rx='1.6' ry='6'/><ellipse cx='42' cy='55' rx='1.6' ry='6'/><ellipse cx='72' cy='30' rx='1.6' ry='6'/><ellipse cx='90' cy='85' rx='1.6' ry='6'/><ellipse cx='28' cy='80' rx='1.6' ry='6'/><ellipse cx='62' cy='92' rx='1.6' ry='6'/></g></svg>");
  background-size: 100px 100px;
  animation: rain-fall-near 0.8s linear infinite;
}
@keyframes rain-fall-far {
  from { background-position: 0 0; }
  to   { background-position: 0 140px; }
}
@keyframes rain-fall-near {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* Fog: uniform misty wash across the whole viewport, with drifting patches
   of denser mist on top. Base layer fills everything so there's no central
   hotspot; animated layer moves patches around to give it life. */
.page[data-weather="fog"] .weather-fx {
  background: linear-gradient(180deg, #64748b 0%, #334155 100%);
}
.page[data-weather="fog"] .weather-fx::before {
  opacity: 1;
  background: rgba(226, 232, 240, 0.28);
}
.page[data-weather="fog"] .weather-fx::after {
  opacity: 1;
  background:
    radial-gradient(ellipse 45vw 22vh at 15% 25%, rgba(241, 245, 249, 0.4), transparent 70%),
    radial-gradient(ellipse 55vw 28vh at 80% 55%, rgba(241, 245, 249, 0.35), transparent 70%),
    radial-gradient(ellipse 40vw 20vh at 40% 85%, rgba(241, 245, 249, 0.3), transparent 70%),
    radial-gradient(ellipse 35vw 18vh at 90% 15%, rgba(241, 245, 249, 0.28), transparent 70%);
  animation: fog-drift 38s ease-in-out infinite alternate;
}
@keyframes fog-drift {
  from { transform: translateX(-6%) scale(1); }
  to   { transform: translateX(6%) scale(1.08); }
}

/* Snow: two layers of round flakes falling over a cold slate sky. Pure
   vertical drift, tile-aligned shift so the loop is seamless. */
.page[data-weather="snow"] .weather-fx {
  background: linear-gradient(180deg, #475569 0%, #0f172a 100%);
}
.page[data-weather="snow"] .weather-fx::before,
.page[data-weather="snow"] .weather-fx::after {
  opacity: 1;
  background-repeat: repeat;
}
.page[data-weather="snow"] .weather-fx::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='white'><circle cx='20' cy='15' r='2.5'/><circle cx='60' cy='40' r='3'/><circle cx='110' cy='25' r='2'/><circle cx='155' cy='60' r='3'/><circle cx='85' cy='95' r='2.5'/><circle cx='35' cy='125' r='2'/><circle cx='175' cy='135' r='3'/><circle cx='125' cy='155' r='2.5'/><circle cx='70' cy='180' r='2'/><circle cx='25' cy='170' r='2.5'/></g></svg>");
  background-size: 200px 200px;
  animation: snow-fall-back 12s linear infinite;
}
.page[data-weather="snow"] .weather-fx::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140'><g fill='white' opacity='0.75'><circle cx='20' cy='18' r='1.5'/><circle cx='55' cy='45' r='1.5'/><circle cx='95' cy='28' r='1.5'/><circle cx='125' cy='58' r='1.5'/><circle cx='75' cy='78' r='1.5'/><circle cx='30' cy='102' r='1.5'/><circle cx='110' cy='118' r='1.5'/><circle cx='55' cy='130' r='1.5'/></g></svg>");
  background-size: 140px 140px;
  animation: snow-fall-front 7s linear infinite;
}
@keyframes snow-fall-back {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}
@keyframes snow-fall-front {
  from { background-position: 0 0; }
  to   { background-position: 0 140px; }
}

/* Honor reduced-motion preferences — keep the colors, drop the motion. */
@media (prefers-reduced-motion: reduce) {
  .weather-fx,
  .weather-fx::before,
  .weather-fx::after {
    animation: none !important;
  }
}