/* ============================================
   RiverReady — sky moods
   Driven by data-weather on <body>.
   ============================================ */

/* The page background never goes truly dark: the text is navy and
   the cards are near-white, so "storm" has to be overcast rather
   than night or the whole UI stops being readable. */
body.body--app {
  transition: background 1.6s ease;
}

body[data-weather="clear"]    { background: linear-gradient(180deg, #f2f8fd 0%, #d3e8f8 100%); }
body[data-weather="watch"]    { background: linear-gradient(180deg, #e9eff5 0%, #cbd9e5 100%); }
body[data-weather="flooding"] { background: linear-gradient(180deg, #d8dee5 0%, #b4c1cd 100%); }
body[data-weather="avoid"]    { background: linear-gradient(180deg, #c3cad2 0%, #9aa7b4 100%); }

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

/* ---------- Sun ---------- */

.sun {
  position: absolute;
  top: 7%;
  right: 12%;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: radial-gradient(circle,
    rgba(255, 214, 130, 0.55) 0%,
    rgba(255, 214, 130, 0.18) 45%,
    rgba(255, 214, 130, 0) 70%);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.sun-core {
  position: absolute;
  inset: 28%;
  border-radius: 999px;
  background: #ffd27a;
  box-shadow: 0 0 26px rgba(255, 200, 110, 0.6);
}

body[data-weather="clear"]    .sun { opacity: 1;    transform: scale(1); }
body[data-weather="watch"]    .sun { opacity: 0.55; transform: scale(0.94); }
body[data-weather="flooding"] .sun { opacity: 0.12; transform: scale(0.88); }
body[data-weather="avoid"]    .sun { opacity: 0;    transform: scale(0.85); }

/* ---------- Clouds ---------- */

.clouds { position: absolute; inset: 0; }

.cloud {
  position: absolute;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transition: opacity 1.6s ease, filter 1.6s ease;
  will-change: transform;
}

.cloud span {
  position: absolute;
  bottom: 0;
  border-radius: 999px;
  background: currentColor;
}

/* Color and opacity carry the whole mood — the shapes never
   change, only how dark and how visible they are. */
body[data-weather="clear"]    .cloud { color: #ffffff; opacity: 0.42; }
body[data-weather="watch"]    .cloud { color: #e3eaf1; opacity: 0.78; }
body[data-weather="flooding"] .cloud { color: #9dabb9; opacity: 0.85; }
body[data-weather="avoid"]    .cloud { color: #79879a; opacity: 0.92; }

@keyframes drift {
  from { transform: translateX(-18vw); }
  to   { transform: translateX(118vw); }
}

/* ---------- Rain ---------- */

.rain-layer { position: absolute; inset: 0; overflow: hidden; }

/* .drop and @keyframes fall already live in app.css — this only
   steepens the wind as the weather worsens. */
body[data-weather="avoid"] .drop,
body[data-weather="flooding"] .drop { width: 1.4px; }

/* ---------- Lightning ---------- */

.flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
}

/* Two quick strikes, the second weaker — a single clean fade reads
   as a screen glitch rather than lightning. */
.flash--on { animation: strike 0.9s ease-out; }

@keyframes strike {
  0%   { opacity: 0; }
  4%   { opacity: 0.5; }
  9%   { opacity: 0.05; }
  14%  { opacity: 0.34; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- Water tint ---------- */
/* The river darkens with the sky, or the waves look like they
   belong to a different afternoon. */

.water path { transition: fill 1.6s ease; }

body[data-weather="flooding"] .w1 { fill: #5c95bd; }
body[data-weather="flooding"] .w2 { fill: #7ba6c6; }
body[data-weather="flooding"] .w3 { fill: #9cbcd4; }

body[data-weather="avoid"] .w1 { fill: #4a7c9e; }
body[data-weather="avoid"] .w2 { fill: #688da9; }
body[data-weather="avoid"] .w3 { fill: #85a3b8; }

@media (prefers-reduced-motion: reduce) {
  .cloud { animation: none; }
  .flash { display: none; }
}


/* ============================================
   Night skies
   ============================================
   The same four moods after dark. Clear is a deep calm blue, a storm is
   nearly black — so the glance still works, which matters most at night
   when someone has been woken by rain.
   ============================================ */

:root[data-theme="night"] body[data-weather="clear"]    { background: linear-gradient(180deg, #0d1b2b 0%, #14283c 100%); }
:root[data-theme="night"] body[data-weather="watch"]    { background: linear-gradient(180deg, #0b1622 0%, #12212f 100%); }
:root[data-theme="night"] body[data-weather="flooding"] { background: linear-gradient(180deg, #080f18 0%, #0e1824 100%); }
:root[data-theme="night"] body[data-weather="avoid"]    { background: linear-gradient(180deg, #05090e 0%, #0a1119 100%); }

/* The sun becomes a moon: smaller, colder, and it stays out on a clear
   night instead of fading to nothing. */
:root[data-theme="night"] .sun {
  background: radial-gradient(circle,
    rgba(210, 228, 245, 0.4) 0%,
    rgba(210, 228, 245, 0.12) 45%,
    rgba(210, 228, 245, 0) 70%);
}

:root[data-theme="night"] .sun-core {
  background: #dfeaf5;
  box-shadow: 0 0 22px rgba(200, 220, 240, 0.5);
}

:root[data-theme="night"] body[data-weather="clear"]    .cloud { color: #2a3d52; opacity: 0.5; }
:root[data-theme="night"] body[data-weather="watch"]    .cloud { color: #223447; opacity: 0.8; }
:root[data-theme="night"] body[data-weather="flooding"] .cloud { color: #16232f; opacity: 0.9; }
:root[data-theme="night"] body[data-weather="avoid"]    .cloud { color: #0d151d; opacity: 0.95; }

/* Rain has to be pale at night — dark streaks on a dark sky vanish. */
:root[data-theme="night"] .drop {
  background: linear-gradient(to bottom,
    rgba(190, 215, 240, 0) 0%,
    rgba(190, 215, 240, 0.45) 45%,
    rgba(190, 215, 240, 0) 100%);
}

/* Lightning is the one thing that reads BETTER at night. */
:root[data-theme="night"] .flash--on { animation: strike-night 0.9s ease-out; }

@keyframes strike-night {
  0%   { opacity: 0; }
  4%   { opacity: 0.75; }
  9%   { opacity: 0.08; }
  14%  { opacity: 0.5; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}

:root[data-theme="night"] .w1 { fill: #17384f; }
:root[data-theme="night"] .w2 { fill: #1d4560; }
:root[data-theme="night"] .w3 { fill: #245271; }

:root[data-theme="night"] body[data-weather="avoid"] .w1 { fill: #0f2537; }
:root[data-theme="night"] body[data-weather="avoid"] .w2 { fill: #143046; }
:root[data-theme="night"] body[data-weather="avoid"] .w3 { fill: #193a54; }