/*
 * Weather theme: every color, and where each shape stands.
 *
 * The mountains are three fixed smooth curves, below. Everything standing
 * on or above them is a Lucide icon (weather-shapes.js, generated from the
 * lucide-react this app uses): pines, sun, moon, stars, and a camp -- a
 * tent, two people and a campfire burning in the logo's flame colors.
 * Clouds are soft gradients. This file holds every curve, place and color;
 * weather-theme.js holds none.
 *
 * The page is flat: one cream ground, text straight on it, no boxes. The
 * previous version (a white reading sheet) is kept in /theme/v1/.
 *
 * weather-theme.js sets two attributes on <html>:
 *   data-time    = day | dusk | night   (from the reader's sun, or the clock)
 *   data-weather = clear | rain | fog | storm
 * Time sets the sky, the mountains and what's in the sky. Weather tints
 * them (a tone mixed in) and adds rain, mist or a storm glow on top.
 * Reading surfaces (--wt-paper, --wt-ink) never change.
 */

:root {
  /* Reading: fixed, whatever the sky does. */
  --wt-paper: #ffffff;
  --wt-cream: #fbf8f2;
  --wt-ink: #2b2925;
  --wt-ink-muted: #6f6a61;
  --wt-line: #ebe6dc;

  /* How far the weather reaches the page. */
  --wt-wash-strength: 3%; /* page background, 2-3% */
  --wt-rim-width: 1px;
  --wt-rim-strength: 30%;

  /* Banner. The scene is a 1200 x 200 stage at 6:1 (at most 300px tall),
     anchored to the banner's foot; the sky fills whatever is above it. */
  --wt-banner-height: clamp(190px, 21vw, 360px);
  --wt-banner-fade: 40px;

  /* ---- The scene, on a 1200 x 200 stage (y = 200 is the ground) ----
     Three smooth ridges, far to near: fixed curves, the same on every load.
     Pines (Lucide tree-pine) stand on them: "x ground-y height" each.
     Stars (Lucide sparkle): "x y size". */
  --wt-ridge-far: "M0 96 C18 92 76 80 110 70 C144 60 175 37 205 38 C235 39 261 71 290 74 C319 77 350 67 380 58 C410 49 440 19 470 20 C500 21 532 57 560 62 C588 67 611 45 640 48 C669 51 703 83 735 82 C767 81 800 55 830 44 C860 33 885 14 915 16 C945 18 978 52 1010 58 C1042 64 1073 49 1105 52 C1137 55 1184 74 1200 78 L1200 200 L0 200 Z";
  --wt-ridge-mid: "M0 124 C22 121 88 105 130 104 C172 103 212 120 250 118 C288 116 322 91 360 92 C398 93 440 120 480 122 C520 124 560 103 600 104 C640 105 678 129 720 128 C762 127 807 100 850 98 C893 96 940 116 980 116 C1020 116 1053 97 1090 96 C1127 95 1182 109 1200 112 L1200 200 L0 200 Z";
  --wt-ridge-near: "M0 158 C25 156 100 145 150 146 C200 147 253 163 300 162 C347 161 387 141 430 140 C473 139 515 154 560 156 C605 158 657 148 700 150 C743 152 777 167 820 166 C863 165 915 143 960 142 C1005 141 1050 157 1090 158 C1130 159 1182 151 1200 150 L1200 200 L0 200 Z";
  --wt-pines-mid: "350 95 16; 362 95 13; 372 96 17; 844 101 14; 856 101 18";
  --wt-pines-near: "58 155 30; 72 153 24; 84 152 34; 414 144 28; 428 143 36; 441 143 26; 454 144 32; 944 146 32; 958 145 26; 971 145 36; 1148 158 30; 1162 157 24";
  /* The camp, mid-stage so every screen sees it: "icon x ground-y size". */
  --wt-camp: "tent 566 157 58; fire 626 155 28";
  --wt-stars: "90 30 7; 210 64 5; 330 22 6; 470 48 5; 560 18 8; 640 70 5; 790 34 6; 880 14 5; 1010 52 7; 1090 24 5; 1160 70 6";

  /* The logo's flame (app/icon.tsx, components/nav/AppHeader.tsx). */
  --wt-brand: #f97316;
  --wt-brand-1: #fde047;
  --wt-brand-2: #fb923c;
  --wt-brand-3: #dc2626;

  /* ---- Time of day: day (the default) ---- */
  --wt-sky-top: #cfe6f3;
  --wt-sky-bottom: #f7f2e7;
  --wt-far: #c6dbe5;
  --wt-mid: #a6c6d5;
  --wt-near: #85acbf;
  --wt-time-tint: #5f9fc4;
  --wt-sky-ink: #2b2925; /* text that sits on the sky */
  --wt-sun-color: #fff3c9;
  --wt-sun-glow: rgba(255, 236, 178, 0.85);
  --wt-sun-x: 1060px; /* clear of the far peaks */
  --wt-sun-y: 30px;
  --wt-moon-x: 1050px;
  --wt-moon-y: 30px;
  --wt-sun-time: 1;
  --wt-moon-time: 0;
  --wt-stars-time: 0;
  --wt-cloud: rgba(255, 255, 255, 0.9);
  --wt-streak: rgba(70, 105, 118, 0.42); /* rain drops */
  --wt-camp-ink: color-mix(in srgb, var(--wt-near) 40%, #2b2925);
  --wt-fire-time: 0.35; /* how much the campfire glows */

  /* ---- Weather: clear (the default) ---- */
  --wt-tone: #ffffff;
  --wt-tone-mix: 0%; /* how much of the tone tints sky and mountains */
  --wt-weather-tint: #5f9fc4;
  --wt-tint-mix: 0%; /* how much the weather moves the accent */
  --wt-orb-weather: 1; /* sun and moon */
  --wt-stars-weather: 1;
  --wt-clouds-weather: 1;
  --wt-rain: 0;
  --wt-mist: 0;
  --wt-glow: transparent;
  --wt-fire-weather: 1;

  /* Derived: one accent, mixed from the time and the weather. */
  --wt-tint: color-mix(in srgb, var(--wt-weather-tint) var(--wt-tint-mix), var(--wt-time-tint));

  --wt-transition: 1.2s ease;
}

/* ---- Time of day ---------------------------------------------------- */

:root[data-time="dusk"] {
  /* Campfire: low warm sun, peach sky, rose mountains. Dawn uses it too. */
  --wt-sky-top: #f7cbb4;
  --wt-sky-bottom: #fdefdf;
  --wt-far: #edc4b3;
  --wt-mid: #dba699;
  --wt-near: #bb877c;
  --wt-time-tint: #dc8459;
  --wt-sun-color: #ffe2b8;
  --wt-sun-glow: rgba(255, 186, 125, 0.8);
  --wt-sun-x: 735px; /* low, settling into a valley */
  --wt-sun-y: 68px;
  --wt-cloud: rgba(255, 232, 216, 0.85);
  --wt-streak: rgba(140, 95, 88, 0.36);
  --wt-fire-time: 0.8;
}

:root[data-time="night"] {
  /* Night sky over a light page: indigo, the moon, a few stars. */
  --wt-sky-top: #33406c;
  --wt-sky-bottom: #9a9bbd;
  --wt-far: #7a82aa;
  --wt-mid: #5f6893;
  --wt-near: #4a537f;
  --wt-time-tint: #6870ad;
  --wt-sky-ink: #f4f1ea;
  --wt-sun-time: 0;
  --wt-moon-time: 1;
  --wt-stars-time: 1;
  --wt-cloud: rgba(205, 210, 235, 0.22);
  --wt-streak: rgba(225, 230, 250, 0.42);
  --wt-camp-ink: #2c3256;
  --wt-fire-time: 1;
}

/* ---- Weather -------------------------------------------------------- */

:root[data-weather="rain"] {
  /* Wet canopy: sage-grey over everything, soft streaks. */
  --wt-tone: #7f9c93;
  --wt-tone-mix: 32%;
  --wt-weather-tint: #4f9580;
  --wt-tint-mix: 70%;
  --wt-orb-weather: 0;
  --wt-stars-weather: 0;
  --wt-clouds-weather: 0;
  --wt-rain: 1;
  --wt-fire-weather: 0.45;
}

:root[data-weather="fog"] {
  /* Mountain mist: washed pale, the far peaks half gone. */
  --wt-tone: #ecebf0;
  --wt-tone-mix: 55%;
  --wt-weather-tint: #858ca3;
  --wt-tint-mix: 60%;
  --wt-orb-weather: 0.5;
  --wt-stars-weather: 0.25;
  --wt-clouds-weather: 0;
  --wt-mist: 1;
  --wt-fire-weather: 0.8;
}

:root[data-weather="storm"] {
  /* Ozone and amber: a grey front lit from the horizon, never dark. */
  --wt-tone: #8d9298;
  --wt-tone-mix: 38%;
  --wt-weather-tint: #bf8a2f;
  --wt-tint-mix: 75%;
  --wt-orb-weather: 0;
  --wt-stars-weather: 0;
  --wt-clouds-weather: 0;
  --wt-rain: 1;
  --wt-glow: rgba(248, 186, 84, 0.65);
  --wt-fire-weather: 0.35;
}

/* ---- Surfaces the weather reaches ----------------------------------- */

html {
  color-scheme: light;
}

body.wt-page {
  margin: 0;
  color: var(--wt-ink);
  background: color-mix(in srgb, var(--wt-tint) var(--wt-wash-strength), var(--wt-cream));
  transition: background-color var(--wt-transition);
}

/* A flat strip on the page (a toolbar): the page's own color, a hairline. */
.wt-bar {
  background: color-mix(in srgb, var(--wt-tint) var(--wt-wash-strength), var(--wt-cream));
  border: var(--wt-rim-width) solid color-mix(in srgb, var(--wt-tint) var(--wt-rim-strength), var(--wt-line));
  transition: border-color var(--wt-transition), background-color var(--wt-transition);
}

/* A label or an update's type: an icon and a word in the accent, no box. */
.wt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  color: color-mix(in srgb, var(--wt-tint) 60%, var(--wt-ink));
  transition: color var(--wt-transition);
}

/* Lucide icons on the page (renderIcons). */
.wt-icon {
  flex: none;
  vertical-align: -0.125em;
}

.wt-logo {
  color: var(--wt-brand);
}

/* Text placed on the banner itself (a header over the sky). */
.wt-on-sky {
  color: var(--wt-sky-ink);
  transition: color var(--wt-transition);
}

/* ---- The sky banner -------------------------------------------------- */

.wt-sky {
  position: relative;
  height: var(--wt-banner-height);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wt-tone) var(--wt-tone-mix), var(--wt-sky-top)),
    color-mix(in srgb, var(--wt-tone) var(--wt-tone-mix), var(--wt-sky-bottom))
  );
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--wt-banner-fade)), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - var(--wt-banner-fade)), transparent);
}

.wt-sky > * {
  position: absolute;
  pointer-events: none;
}

/* The stage: never narrower than this, so small screens crop the range
   rather than squash it. */
.wt-scene {
  left: 50%;
  bottom: 0;
  width: max(100%, 980px);
  aspect-ratio: 6 / 1;
  max-height: 300px; /* very wide screens crop the sky above the peaks */
  translate: -50% 0;
  overflow: visible;
}

.wt-scene * {
  transition: fill var(--wt-transition), stroke var(--wt-transition), opacity var(--wt-transition), transform var(--wt-transition);
}

/* Inside the shapes: bodies take their layer's fill; a pine's trunk and
   the sun's rays are strokes in the same color, set on the layer. */
.wt-stroke {
  fill: none;
  stroke: var(--wt-layer-fill);
  stroke-width: 2;
  stroke-linecap: round;
}

.wt-far {
  --wt-layer-fill: color-mix(in srgb, var(--wt-tone) calc(var(--wt-tone-mix) * 1.2), var(--wt-far));
  fill: var(--wt-layer-fill);
}

.wt-mid {
  --wt-layer-fill: color-mix(in srgb, var(--wt-tone) var(--wt-tone-mix), var(--wt-mid));
  fill: var(--wt-layer-fill);
}

.wt-near {
  --wt-layer-fill: color-mix(in srgb, var(--wt-tone) calc(var(--wt-tone-mix) * 0.8), var(--wt-near));
  fill: var(--wt-layer-fill);
}

.wt-sun {
  --wt-layer-fill: var(--wt-sun-color);
  transform: translate(var(--wt-sun-x), var(--wt-sun-y));
  opacity: calc(var(--wt-sun-time) * var(--wt-orb-weather));
  fill: var(--wt-sun-color);
}

.wt-sun-glow {
  stop-color: var(--wt-sun-glow);
}

.wt-moon {
  transform: translate(var(--wt-moon-x), var(--wt-moon-y));
  opacity: calc(var(--wt-moon-time) * var(--wt-orb-weather));
  fill: #f6f0dc;
}

.wt-cloud {
  height: 26px;
  width: 170px;
  opacity: var(--wt-clouds-weather);
  background:
    radial-gradient(closest-side at 30% 60%, var(--wt-cloud), transparent),
    radial-gradient(closest-side at 55% 40%, var(--wt-cloud), transparent),
    radial-gradient(closest-side at 75% 65%, var(--wt-cloud), transparent);
  animation: wt-drift 60s linear infinite alternate;
  transition: opacity var(--wt-transition);
}

.wt-cloud-1 {
  left: 12%;
  top: 20%;
}

.wt-cloud-2 {
  left: 54%;
  top: 34%;
  width: 120px;
  height: 18px;
  animation-duration: 80s;
  animation-direction: alternate-reverse;
}

.wt-stars {
  opacity: calc(var(--wt-stars-time) * var(--wt-stars-weather));
  fill: #fdfbf2;
}

/* ---- The camp -------------------------------------------------------- */

.wt-line {
  fill: none;
  stroke: var(--wt-camp-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wt-brand-1 { stop-color: var(--wt-brand-1); }
.wt-brand-2 { stop-color: var(--wt-brand-2); }
.wt-brand-3 { stop-color: var(--wt-brand-3); }

.wt-fire-glow-stop {
  stop-color: var(--wt-brand-2);
  stop-opacity: 0.5;
}

.wt-sun-glow.wt-fade,
.wt-fire-glow-stop.wt-fade {
  stop-opacity: 0;
}

.wt-fire-glow {
  opacity: calc(var(--wt-fire-time) * var(--wt-fire-weather));
  animation: wt-flicker 2.4s ease-in-out infinite alternate;
}

/* ---- Weather on top: glow, mist, rain -------------------------------- */

.wt-glow {
  inset: 0;
  background: radial-gradient(90% 60% at 62% 82%, var(--wt-glow), transparent 72%);
  mix-blend-mode: screen;
}

.wt-mist {
  inset: 25% -20% 0;
  opacity: var(--wt-mist);
  background:
    radial-gradient(42% 26% at 28% 62%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(46% 24% at 74% 78%, rgba(255, 255, 255, 0.8), transparent 70%),
    linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.5));
  animation: wt-drift 24s ease-in-out infinite alternate;
}

/* Rain: short drops with gaps between them, in two layers -- small, slow
   drops far off and longer, faster ones near -- falling on a slant. Each
   layer is a tile of a few drops used as a mask over the drop color; the
   tile slides down one full tile per cycle, so the fall never jumps. */
.wt-rain {
  inset: -30% -15% 0;
  opacity: var(--wt-rain);
  background: var(--wt-streak);
  --wt-drops-far: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='120'%3E%3Cg stroke='%23fff' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M10 8v12M46 50v10M28 92v12M62 106v9'/%3E%3C/g%3E%3C/svg%3E");
  --wt-drops-near: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='210'%3E%3Cg stroke='%23fff' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M18 20v22M88 96v26M54 160v20M118 186v16'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: var(--wt-drops-far), var(--wt-drops-near);
  mask-image: var(--wt-drops-far), var(--wt-drops-near);
  -webkit-mask-size: 70px 120px, 130px 210px;
  mask-size: 70px 120px, 130px 210px;
  transform: skewX(-14deg);
  animation: wt-rainfall 0.8s linear infinite;
}

:root[data-weather="storm"] .wt-rain {
  transform: skewX(-22deg);
  animation-duration: 0.5s;
}

.wt-glow,
.wt-mist,
.wt-rain {
  transition: opacity var(--wt-transition);
}

:root[data-weather="storm"] .wt-glow {
  animation: wt-flash 9s ease-in-out infinite;
}

/* Small screens see the middle of the stage: keep the sun and moon in it. */
@media (max-width: 640px) {
  .wt-sun {
    transform: translate(clamp(440px, var(--wt-sun-x), 760px), var(--wt-sun-y));
  }
  .wt-moon {
    transform: translate(clamp(440px, var(--wt-moon-x), 760px), var(--wt-moon-y));
  }
}

@keyframes wt-rainfall {
  from {
    -webkit-mask-position: 0 0, 0 0;
    mask-position: 0 0, 0 0;
  }
  to {
    -webkit-mask-position: 0 120px, 0 210px;
    mask-position: 0 120px, 0 210px;
  }
}

@keyframes wt-drift {
  to {
    transform: translateX(6%);
  }
}

@keyframes wt-flicker {
  to {
    opacity: calc(var(--wt-fire-time) * var(--wt-fire-weather) * 0.75);
  }
}

@keyframes wt-flash {
  0%, 90%, 100% {
    opacity: 1;
  }
  92% {
    opacity: 0.4;
  }
  94% {
    opacity: 1;
    filter: brightness(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wt-sky *,
  .wt-sky > * {
    animation: none !important;
  }
}