/* WEATHER FX — the pond mirrors the real sky. weather.js toggles
   wx-* classes on <body>; everything here hangs off them. The SVG
   groups (.wx-rain-g, .wx-snow-g, .wx-fog-g, .wx-ice-g) live at the
   end of the pond SVG and are hidden unless their class is on. */

.pond .wx-rain-g,
.pond .wx-snow-g,
.pond .wx-fog-g,
.pond .wx-ice-g { display: none; }
body.wx-rain  .pond .wx-rain-g  { display: inline; }
body.wx-snow  .pond .wx-snow-g  { display: inline; }
body.wx-fog   .pond .wx-fog-g   { display: inline; }
body.wx-frost .pond .wx-ice-g   { display: inline; }

/* ───── rain — pencil strokes falling to the waterline ──── */
.pond .wx-drop {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0;
}
body.wx-rain .pond .ripple ellipse { animation-duration: 3.5s; }
body.wx-rain .pond .dragonfly,
body.wx-snow .pond .dragonfly,
body.wx-frost .pond .dragonfly { display: none; }

/* ───── snow — chalk flakes drifting down ────────────────── */
.pond .wx-flake {
  fill: #fffdf7;
  stroke: rgb(var(--ink-rgb) / 0.4);
  stroke-width: 1.4;
  opacity: 0;
}

/* ───── fog — soft graphite smudges over the water ───────── */
.pond .wx-fog-band {
  fill: rgb(var(--ink-rgb) / 0.07);
  filter: blur(7px);
}
body.wx-fog .pond .ray { opacity: 0.03; }

/* ───── frost — ice sheets creeping from the banks ───────── */
.pond .wx-ice {
  fill: #eef5f8;
  fill-opacity: 0.85;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0.8;
}
body.wx-frost .pond-svg { filter: saturate(0.82) hue-rotate(-6deg); }
body.wx-frost .pond .water-fill { opacity: 0.42; }

/* ───── heat — the rays lean in, the water glows ─────────── */
body.wx-heat .pond-svg { filter: saturate(1.12); }
body.wx-heat .pond .ray { opacity: 0.17; }
body.wx-heat .pond .ray:nth-of-type(2) { opacity: 0.12; }

/* ───── wind — hurried clouds, bent reeds, choppy water ──── */
body.wx-wind .pond .cloud    { animation-duration: 34s; }
body.wx-wind .pond .cloud.c2 { animation-duration: 46s; }
body.wx-wind .pond .cloud.c3 { animation-duration: 40s; }
body.wx-wind .pond .wave { opacity: 0.45; }

/* ───── storm — the clouds turn to graphite ──────────────── */
body.wx-storm .pond .cloud path {
  fill: rgb(var(--ink-rgb) / 0.14);
  stroke: rgb(var(--ink-rgb) / 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .pond .wx-drop { animation: rain-fall 1.15s linear infinite; }
  .pond .wx-drop:nth-of-type(2n)  { animation-duration: 1s;    animation-delay: 0.35s; }
  .pond .wx-drop:nth-of-type(3n)  { animation-delay: 0.6s; }
  .pond .wx-drop:nth-of-type(4n)  { animation-duration: 1.3s;  animation-delay: 0.15s; }
  .pond .wx-drop:nth-of-type(5n)  { animation-delay: 0.85s; }
  .pond .wx-drop:nth-of-type(7n)  { animation-delay: 0.5s; }

  .pond .wx-flake { animation: snow-fall 6.5s linear infinite; }
  .pond .wx-flake:nth-of-type(2n) { animation-duration: 8s;   animation-delay: 2.2s; }
  .pond .wx-flake:nth-of-type(3n) { animation-delay: 4s; }
  .pond .wx-flake:nth-of-type(4n) { animation-duration: 7s;   animation-delay: 1.1s; }
  .pond .wx-flake:nth-of-type(5n) { animation-delay: 5.3s; }
  .pond .wx-flake:nth-of-type(7n) { animation-delay: 3.1s; }

  .pond .wx-fog-band { animation: fog-breathe 14s ease-in-out infinite alternate; }
  .pond .wx-fog-band.f2 { animation-delay: -7s; }

  body.wx-wind .pond .reed-sway {
    animation: reed-gale 2.6s ease-in-out infinite alternate;
  }
  body.wx-wind .pond .reed-sway.r2 { animation-delay: 0.6s; }
  body.wx-wind .pond .reed-sway.r3 { animation-delay: 1.1s; }
}

@keyframes rain-fall {
  0%   { transform: translateY(0);     opacity: 0; }
  10%  { opacity: 0.5; }
  82%  { opacity: 0.5; }
  100% { transform: translateY(560px); opacity: 0; }
}
@keyframes snow-fall {
  0%   { transform: translate(0, 0);        opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate(16px, 270px); }
  88%  { opacity: 0.85; }
  100% { transform: translate(-10px, 545px); opacity: 0; }
}
@keyframes fog-breathe {
  from { opacity: 0.55; transform: translateX(-18px); }
  to   { opacity: 1;    transform: translateX(22px); }
}
@keyframes reed-gale {
  from { transform: rotate(-4.5deg); }
  to   { transform: rotate(7deg); }
}