/**
 * World weather — CSS particle layer (js/effects/weather.js).
 * Sits inside .grid-viewport under the depth veil (z-index 35), so the air
 * darkens with the floor. All motion is transform-only.
 */

.weather {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  overflow: hidden;
}

.weather__p {
  position: absolute;
  display: block;
  scale: var(--w-scale, 1);
  animation-name: weather-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 78vh overshoots any viewport height; overflow clips the excess. */
@keyframes weather-fall {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--sway, 0px), 78vh, 0); }
}

@keyframes weather-rise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--sway, 0px), -78vh, 0); }
}

/* Fantasy — glowing spores drift up from the dark. */
.weather--fantasy .weather__p {
  top: 102%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--c-accent-2);
  box-shadow: 0 0 6px var(--c-glow);
  opacity: 0.45;
  filter: blur(0.5px);
  animation-name: weather-rise;
}

/* Sci-Fi — rare falling sparks. */
.weather--scifi .weather__p {
  top: -3%;
  width: 1px;
  height: 8px;
  background: var(--c-accent);
  box-shadow: 0 0 4px var(--c-glow);
  opacity: 0.6;
}

/* Cyberpunk — neon rain streaks, slightly slanted. */
.weather--cyberpunk .weather__p {
  top: -6%;
  width: 1px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, var(--c-accent));
  rotate: 8deg;
  opacity: 0.35;
}

/* History — dust motes hanging in a shaft of light. */
.weather--history .weather__p {
  top: -2%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgb(var(--c-torch));
  opacity: 0.3;
  filter: blur(0.5px);
}

.weather--history::before {
  content: '';
  position: absolute;
  inset: -10% 20% -10% 45%;
  background: linear-gradient(105deg, transparent, rgba(var(--c-torch), 0.06) 40%, transparent 75%);
  transform: skewX(-12deg);
}

/* Post-Apoc — ash sinking through dead air. */
.weather--postapoc .weather__p {
  top: -3%;
  width: 3px;
  height: 3px;
  border-radius: 40%;
  background: #9a958c;
  opacity: 0.35;
}

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