/* ─────────────────────────────────────────────────────────────────────
   WeatherBackground — ambient weather animations for any container.

   Six conditions: sun · clouds · wind · rain · snow · hail.

   How to use the CSS alone (no React required):
     <div class="weather-bg weather-rain" aria-hidden="true">
       <span class="rain-drop" style="left:10%; animation-delay:.1s"></span>
       ...
     </div>

   The parent of `.weather-bg` should be position: relative and you'll
   usually want overflow: hidden on it so particles clip to the box.

   Particles paint with `currentColor` — set `color:` on `.weather-bg`
   (or any ancestor) to tint them. The component picks up your theme's
   text-muted token automatically when used inside a themed container.

   Animations honor prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────────── */

.weather-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* Default tint; override by setting `color` on .weather-bg or any
     ancestor. */
  color: currentColor;
}

/* ── SUN ─────────────────────────────────────────────────────────────
   Slow radial breathe + a wheel of long rays rotating very slowly. */
.weather-sun .sun-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%,
    currentColor 0%, transparent 45%);
  opacity: 0.18;
  animation: wb-sun-breathe 6s ease-in-out infinite;
}
.weather-sun .sun-rays {
  position: absolute;
  left: 50%; top: 50%;
  width: 220%; height: 220%;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  animation: wb-sun-spin 60s linear infinite;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      currentColor 0deg 1deg, transparent 1deg 18deg);
  mask: radial-gradient(circle at 50% 50%,
    transparent 18%, #000 22%, #000 60%, transparent 80%);
  -webkit-mask: radial-gradient(circle at 50% 50%,
    transparent 18%, #000 22%, #000 60%, transparent 80%);
}
@keyframes wb-sun-breathe {
  0%, 100% { opacity: 0.14; transform: scale(0.96); }
  50%      { opacity: 0.22; transform: scale(1.04); }
}
@keyframes wb-sun-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── CLOUDS ──────────────────────────────────────────────────────────
   Large soft blurred blobs drifting horizontally, very slow. */
.weather-clouds .cloud-puff,
.weather-cloudynight .cloud-puff {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.14;
  filter: blur(18px);
  animation: wb-cloud-drift linear infinite;
}
.weather-cloudynight .cloud-puff {
  /* Cloudy night clouds are slightly heavier than day clouds — they
     read as overcast rather than scattered. */
  opacity: 0.28;
  filter: blur(22px);
}
@keyframes wb-cloud-drift {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(130%); }
}

/* ── WIND ────────────────────────────────────────────────────────────
   Thin horizontal streaks drifting left → right, staggered. */
.weather-wind .wind-streak {
  position: absolute;
  left: -40%;
  height: 1px;
  width: 55%;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  opacity: 0.35;
  animation: wb-wind-drift 7s linear infinite;
}
@keyframes wb-wind-drift {
  0%   { transform: translateX(0);     opacity: 0; }
  15%  { opacity: 0.35; }
  85%  { opacity: 0.35; }
  100% { transform: translateX(260%);  opacity: 0; }
}

/* ── RAIN ────────────────────────────────────────────────────────────
   Thin diagonal lines falling fast. */
.weather-rain .rain-drop,
.weather-thunderstorm .rain-drop {
  position: absolute;
  top: -10%;
  width: 1px;
  height: 18px;
  background: linear-gradient(180deg, transparent, currentColor);
  opacity: 0;
  transform: rotate(14deg);
  animation: wb-rain-fall linear infinite;
}
@keyframes wb-rain-fall {
  0%   { top: -10%; opacity: 0; }
  10%  { opacity: 0.4; }
  90%  { opacity: 0.4; }
  100% { top: 110%; opacity: 0; }
}

/* ── SNOW ────────────────────────────────────────────────────────────
   Soft round flakes drifting down with a gentle horizontal sway. */
.weather-snow .snow-flake {
  position: absolute;
  top: -5%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation:
    wb-snow-fall linear infinite,
    wb-snow-sway ease-in-out infinite alternate;
}
@keyframes wb-snow-fall {
  0%   { top: -5%; }
  100% { top: 105%; }
}
@keyframes wb-snow-sway {
  0%   { margin-left: -10px; }
  100% { margin-left:  10px; }
}

/* ── HAIL ────────────────────────────────────────────────────────────
   Small hard pellets, faster than snow, no sway, slight squash at the
   end to suggest a bounce. */
.weather-hail .hail-stone {
  position: absolute;
  top: -5%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: inset -1px -1px 0 rgba(0,0,0,0.15);
  opacity: 0;
  animation: wb-hail-fall cubic-bezier(.55,.05,.7,.4) infinite;
}
@keyframes wb-hail-fall {
  0%   { top: -5%;  transform: scale(1);    opacity: 0; }
  8%   { opacity: 0.55; }
  86%  { top: 95%;  transform: scale(1);    opacity: 0.55; }
  92%  { top: 100%; transform: scaleY(0.7); opacity: 0.55; }
  100% { top: 100%; transform: scale(1);    opacity: 0; }
}

/* ── LIGHTNING ───────────────────────────────────────────────────────
   Occasional full-stage white flash. Layer on top of rain for a real
   thunderstorm, or use alone. Two flashes per ~14s cycle. */
.weather-lightning .lightning-flash,
.weather-thunderstorm .lightning-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: wb-lightning 14s infinite;
}
.weather-lightning .lightning-flash:nth-child(2),
.weather-thunderstorm .lightning-flash:nth-of-type(2) {
  animation-delay: -7s;
  animation-duration: 17s;
}
@keyframes wb-lightning {
  0%, 100%   { opacity: 0; }
  1.5%       { opacity: 0.28; }
  2.2%       { opacity: 0;    }
  3.5%       { opacity: 0.15; }
  4.2%       { opacity: 0;    }
}

/* ── FOG / MIST ──────────────────────────────────────────────────────
   Wide soft horizontal bands drifting very slowly. Heavier blur than
   clouds; reads as low-lying haze rather than discrete shapes. */
.weather-fog .fog-band {
  position: absolute;
  height: 45%;
  width: 220%;
  left: -60%;
  background: linear-gradient(90deg,
    transparent 0%,
    currentColor 25%, currentColor 75%,
    transparent 100%);
  filter: blur(22px);
  opacity: 0.14;
  animation: wb-fog-drift linear infinite;
}
@keyframes wb-fog-drift {
  0%   { transform: translateX(-10%); }
  100% { transform: translateX(20%); }
}

/* ── NIGHT / STARS ───────────────────────────────────────────────────
   Stars come in three brightness tiers — base, mid, and hero — so the
   sky reads layered rather than a uniform sprinkle. Optional <Moon>
   sits in the same layer; its phase is geometrically correct via an
   SVG mask. */
.weather-stars .star,
.weather-cloudynight .star {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
  opacity: 0.6;
  animation: wb-star-twinkle ease-in-out infinite alternate;
}
.weather-stars .star.bright,
.weather-cloudynight .star.bright {
  width: 3px; height: 3px;
  box-shadow:
    0 0 6px currentColor,
    0 0 12px currentColor;
  opacity: 0.9;
}
.weather-stars .star.hero {
  width: 4px; height: 4px;
  box-shadow:
    0 0 8px currentColor,
    0 0 18px currentColor,
    0 0 28px currentColor;
  opacity: 1;
}
@keyframes wb-star-twinkle {
  0%   { opacity: 0.15; transform: scale(0.7); }
  100% { opacity: 0.85; transform: scale(1.3); }
}

/* Moon sits above the stars layer with a soft halo. The phase mask is
   defined inline in the SVG itself (see <Moon> in the component) so
   each moon is self-contained. */
.weather-stars .moon,
.weather-cloudynight .moon {
  position: absolute;
  top: 12%;
  right: 10%;
  color: currentColor;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 20px currentColor);
  opacity: 0.85;
}
.weather-cloudynight .moon { opacity: 0.5; }

/* ── HEATWAVE / SHIMMER ──────────────────────────────────────────────
   Vertical bands rising and warping at the bottom of the stage. Read
   as heat shimmer over hot pavement. Pair with 'sun' + high temp. */
.weather-heatwave .heat-band {
  position: absolute;
  bottom: -10%;
  height: 80%;
  width: 14px;
  background: linear-gradient(180deg, transparent 0%, currentColor 100%);
  filter: blur(7px);
  opacity: 0;
  transform-origin: bottom center;
  animation: wb-heat-rise ease-in-out infinite;
}
@keyframes wb-heat-rise {
  0%, 100% { transform: translateY(0)    scaleY(1)   skewX(0);    opacity: 0.0; }
  20%      { opacity: 0.18; }
  50%      { transform: translateY(-12%) scaleY(0.9) skewX(4deg); opacity: 0.22; }
  80%      { opacity: 0.18; }
}

/* ── SANDSTORM ───────────────────────────────────────────────────────
   Amber wash + diagonal streaks + flying motes. Overrides currentColor
   internally so the sand stays sand-coloured even on themed parents;
   pass `color` prop to override. */
.weather-sandstorm { color: #c9994a; }
.weather-sandstorm .sand-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%,
    currentColor 0%, transparent 70%);
  opacity: 0.12;
  animation: wb-sand-pulse 5s ease-in-out infinite;
}
.weather-sandstorm .sand-streak {
  position: absolute;
  left: -40%;
  height: 1px;
  width: 60%;
  background: linear-gradient(90deg, transparent, currentColor 50%, transparent);
  opacity: 0.45;
  animation: wb-sand-drift linear infinite;
}
.weather-sandstorm .sand-mote {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  animation: wb-sand-fly linear infinite;
}
@keyframes wb-sand-pulse {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.18; }
}
@keyframes wb-sand-drift {
  0%   { transform: translateX(0);    opacity: 0; }
  20%  { opacity: 0.45; }
  80%  { opacity: 0.45; }
  100% { transform: translateX(260%); opacity: 0; }
}
@keyframes wb-sand-fly {
  0%   { transform: translate(0, 0);          opacity: 0; }
  15%  { opacity: 0.55; }
  85%  { opacity: 0.55; }
  100% { transform: translate(280%, -40%);    opacity: 0; }
}

/* ── AURORA ──────────────────────────────────────────────────────────
   Wide blurred vertical bands shifting horizontally. Uses fixed colors
   (green/violet/cyan) rather than currentColor — the whole point is
   the polychrome shimmer. Pass `color` prop is ignored here on purpose. */
.weather-aurora .aurora-band {
  position: absolute;
  top: -50%;
  width: 60%;
  height: 220%;
  filter: blur(36px);
  opacity: 0.0;
  animation:
    wb-aurora-shift 14s ease-in-out infinite alternate,
    wb-aurora-fade  11s ease-in-out infinite alternate;
}
.weather-aurora .aurora-band.a-green {
  left: -5%;
  background: linear-gradient(180deg, transparent 10%, #4ade80 50%, transparent 90%);
}
.weather-aurora .aurora-band.a-violet {
  left: 25%;
  background: linear-gradient(180deg, transparent 10%, #a78bfa 50%, transparent 90%);
  animation-duration: 17s, 9s;
  animation-delay: -4s, -2s;
}
.weather-aurora .aurora-band.a-cyan {
  left: 50%;
  background: linear-gradient(180deg, transparent 10%, #22d3ee 50%, transparent 90%);
  animation-duration: 13s, 13s;
  animation-delay: -8s, -5s;
}
@keyframes wb-aurora-shift {
  0%   { transform: translateX(-15%) skewX(-8deg); }
  100% { transform: translateX(15%)  skewX(8deg); }
}
@keyframes wb-aurora-fade {
  0%   { opacity: 0.18; }
  50%  { opacity: 0.42; }
  100% { opacity: 0.22; }
}

/* ── RAINBOW ─────────────────────────────────────────────────────────
   Single broad arc anchored below the stage, periodically fading in
   and out. Uses fixed spectrum colors. Tuned for visibility — the
   arc is one of the showpiece animations, so it gets to be obvious. */
.weather-rainbow .rainbow-arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: blur(2.5px);
  animation: wb-rainbow-appear 18s ease-in-out infinite;
}
.weather-rainbow .rainbow-band {
  fill: none;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.weather-rainbow .rainbow-band.r1 { stroke: rgba(239, 68, 68,  0.38); }
.weather-rainbow .rainbow-band.r2 { stroke: rgba(249, 115, 22, 0.38); }
.weather-rainbow .rainbow-band.r3 { stroke: rgba(234, 179, 8,  0.38); }
.weather-rainbow .rainbow-band.r4 { stroke: rgba(34,  197, 94, 0.38); }
.weather-rainbow .rainbow-band.r5 { stroke: rgba(59,  130, 246,0.38); }
.weather-rainbow .rainbow-band.r6 { stroke: rgba(168, 85,  247,0.38); }
@keyframes wb-rainbow-appear {
  0%, 100% { opacity: 0; }
  20%      { opacity: 1; }
  80%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-bg * { animation: none !important; }
  /* Some kinds rely on animation to reveal themselves — make them
     statically visible so the user still gets a hint of weather. */
  .weather-lightning .lightning-flash { opacity: 0; }
  .weather-rainbow .rainbow-arc { opacity: 1; }
  .weather-aurora .aurora-band { opacity: 0.3; }
  .weather-heatwave .heat-band { opacity: 0.18; }
}