/* === Weather overrides to satisfy requirements ===
   1) Clouds always visible unless sunny
   2) Clouds just above the buildings
*/
#bg-stack .ws-skyline{ position:absolute; left:0; right:0; bottom:0; height:40vh; pointer-events:none }
#bg-stack .bg-buildings + .ws-skyline{ z-index: 2; }        /* above buildings */
#bg-stack .bg-weather{ z-index: 1; }                        /* keep original band effects under ws-skyline */
/* #bg-stack .ws-skyline .ws-clouds{ opacity:1; } 
#bg-stack .ws-skyline.is-sunny .ws-clouds{ opacity:0; }     /* only hide on sunny */



/* === FIX: keep skyline visible; put clouds just above buildings, not over foreground city === */
#bg-stack .ws-skyline{ position:absolute; left:0; right:0; bottom:0; height:40vh; pointer-events:none; z-index:2; }
/* Ensure any city foreground (likely higher z-index in theme) stays on top; we do NOT try to outrank it */
#bg-stack .ws-skyline .ws-sky{ background: transparent !important; }
#bg-stack .ws-skyline .ws-orb{ display:none !important; } /* sun/moon handled by site background; prevents washout */
#bg-stack .ws-skyline .ws-clouds{ opacity:1; }
#bg-stack .ws-skyline.is-sunny .ws-clouds{ opacity:0; }


/* Keep theme buildings; kill skyline's buildings */
#bg-stack .ws-skyline .ws-buildings { display: none !important; }
/* Optional: also drop the skyline’s horizon tint + sun/moon */
#bg-stack .ws-skyline .ws-horizon,
#bg-stack .ws-skyline .ws-orb { display: none !important; }
/* Layering so weather renders over theme buildings */
#bg-stack .bg-buildings { position: relative; z-index: 1; }
#bg-stack .ws-skyline    { position: absolute; left:0; right:0; bottom:0; height:40vh; pointer-events:none; z-index: 2; }
#bg-stack .ws-skyline .ws-clouds,
#bg-stack .ws-skyline .ws-precip,
#bg-stack .ws-skyline .ws-fog { position: relative; z-index: 3; }


/* === Improved cloud visuals === */
.ws-cloud{
  border-radius:50%;
  filter:blur(1px) drop-shadow(0 6px 8px rgba(0,0,0,.08));
  opacity:.96 !important;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.92), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse at 80% 55%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
    linear-gradient(to right, rgba(255,255,255,0.9), rgba(255,255,255,0.88));
}
.ws-sky.night .ws-cloud{
  background:
    radial-gradient(ellipse at 30% 60%, rgba(220,230,240,0.96), rgba(220,230,240,0) 70%),
    radial-gradient(ellipse at 60% 40%, rgba(220,230,240,0.94), rgba(220,230,240,0) 70%),
    radial-gradient(ellipse at 80% 55%, rgba(220,230,240,0.92), rgba(220,230,240,0) 70%),
    linear-gradient(to right, rgba(220,230,240,0.9), rgba(220,230,240,0.88));
}


/* === Background stack layering fix === */
#bg-stack{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.site-header, main, footer{ position:relative; z-index:1; }


/* === Site layering guardrails === */
#bg-stack{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.site-header, main, footer{ position:relative; z-index:1; }
.ws-skyline{ z-index: 2; } /* above buildings */


/* Make rain & snow more visible */
.ws-drop{
  width: 3px !important;
  height: 22px !important;
  background: var(--ws-rain) !important;
  opacity: .95 !important;
  border-radius: 2px !important;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.12));
}
.ws-flake{
  width: 9px !important;
  height: 9px !important;
  opacity: .98 !important;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 45%, rgba(255,255,255,0) 46% 100%),
    radial-gradient(circle at 40% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%);
  box-shadow: 0 0 6px rgba(255,255,255,.8);
}
/* Slight ground fade to emphasize precip near horizon */
.ws-horizon{ background: linear-gradient(to top, rgba(233,238,245,.9), rgba(233,238,245,0)); }


/* Ensure precip visibly falls across skyline area */
#bg-stack .ws-skyline{
  height: 56vh;              /* taller field so drops/flakes traverse */
  overflow: hidden;          /* keep it tidy within skyline band */
  z-index: 3;                /* above buildings, below content */
}
#bg-stack .ws-skyline .ws-precip{
  inset: 0;
  overflow: visible;
}
/* Make sure buildings remain visible under precip */
#bg-stack .bg-buildings{ z-index: 2; position: relative; }


/* Daytime bluish clouds for visibility on light background */
.ws-sky.day .ws-cloud{
  background:
    radial-gradient(60% 80% at 25% 60%, rgba(215,230,248,0.96), rgba(215,230,248,0) 70%),
    radial-gradient(60% 80% at 55% 40%, rgba(215,230,248,0.94), rgba(215,230,248,0) 70%),
    radial-gradient(60% 80% at 80% 55%, rgba(215,230,248,0.92), rgba(215,230,248,0) 70%),
    linear-gradient(to right, rgba(215,230,248,0.9), rgba(215,230,248,0.88));
  filter: drop-shadow(0 6px 10px rgba(40,70,120,.10));
}
/* Keep night clouds neutral but visible (already set elsewhere) */


/* Rain clarity */
.ws-drop{
  width: 4px !important;
  height: 28px !important;
  border-radius: 2px !important;
  opacity: 1 !important;
  box-shadow: 0 6px 6px rgba(0,0,0,.12);
}
/* Light theme (day) rain = stronger blue */
:root:not([data-theme="dark"]) .ws-drop{ background: #2e7bdc !important; }
/* Dark theme rain = lighter blue for contrast */
:root[data-theme="dark"] .ws-drop{ background: #7fb6ff !important; }


/* Lightning: larger, brighter, sits over clouds/precip */
.ws-lightning{ z-index: 11; }
.ws-lightning.flash{
  animation: ws-flash 220ms ease-out;
  background:
    radial-gradient(200px 140px at var(--lx,65%) var(--ly,35%), rgba(255,255,255,0.95), rgba(255,255,255,0) 60%),
    radial-gradient(320px 220px at var(--lx,65%) var(--ly,38%), rgba(255,255,200,0.28), rgba(255,255,200,0) 70%);
}
@keyframes ws-flash { 0%{opacity:.95} 100%{opacity:0} }


/* === Rain 'stuck at top' fix ===
   Allow precipitation to start slightly within the skyline band and flow past edges. */
#bg-stack .bg-band{ overflow: visible !important; }
#bg-stack .ws-skyline{
  overflow: visible !important;   /* was hidden; caused clipping */
  height: 56vh;                   /* keep expanded field */
}
#bg-stack .ws-skyline .ws-precip{ inset: 0; overflow: visible; }
#bg-stack .ws-skyline .ws-drop{ top: -2% !important; }   /* start a bit below top to avoid edge clipping */
#bg-stack .ws-skyline .ws-flake{ top: -4% !important; }  /* same for snow */


/* === Rain & Snow fall fix === */
@keyframes ws-fall {
  0%   { transform: translateY(0); opacity:1; }
  100% { transform: translateY(100vh); opacity:0.9; }
}
@keyframes ws-fall-z {
  0%   { transform: translateY(0) scale(0.8); opacity:1; }
  100% { transform: translateY(100vh) scale(1.1); opacity:0.9; }
}

/* Slimmer, lighter raindrops */
.ws-drop{
  width: 2px !important;
  height: 22px !important;
  border-radius: 1px !important;
  background: rgba(46,123,220,0.7) !important; /* softer blue */
  box-shadow: none !important;
}

/* Bluer snow for visibility */
.ws-flake{
  background: rgba(200,220,255,0.9) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 4px rgba(150,180,255,0.6);
}

/* Splash logo blur adjustment */
#splash-logo{
  filter: blur(1px) !important;  /* subtle blur, still recognizable */
}


/* Precip reach fix: larger field, firmly bottom-anchored, no clipping */
#bg-stack .ws-skyline{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66vh;              /* taller so drops/flakes pass down to building tops */
  overflow: visible !important;
}
#bg-stack .bg-band{ overflow: visible !important; }
#bg-stack .ws-skyline .ws-precip{ inset: 0; overflow: visible; }


/* Slim, professional rain */
:root:not([data-theme="dark"]) .ws-drop{
  width: 2px !important;
  height: 26px !important;
  background: #4d9af0 !important;   /* lighter blue */
  opacity: .9 !important;
}
:root[data-theme="dark"] .ws-drop{
  width: 2px !important;
  height: 26px !important;
  background: #8ec1ff !important;
  opacity: .92 !important;
}


/* Bluer snow for clarity on light background */
.ws-flake{
  width: 9px !important;
  height: 9px !important;
  background:
    radial-gradient(circle at 50% 50%, #eef5ff 0 46%, rgba(238,245,255,0) 47% 100%),
    radial-gradient(circle at 40% 35%, rgba(220,235,255,.9), rgba(220,235,255,0) 60%);
  box-shadow: 0 0 6px rgba(150,190,255,.7);
}