/* ========== АТМОСФЕРНЫЕ ЭФФЕКТЫ (листва/снег) ========== */
/* См. js/weather.js — слой лежит ВНЕ #roomContent, поэтому не двигается вместе с
   камерой при скролле комнаты (#room{overflow:hidden} сам обрезает частицы по
   краям, отдельно ничего обрезать не нужно). z-index между фоном (#citySkyline/
   #floor, без z-index) и персонажами (.player{z-index:10}) — листья падают как
   бы на заднем плане, не перекрывая лица игроков. */
#weatherLayer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.weather-particle {
  position: absolute;
  top: -40px;
  left: var(--x, 50%);
  font-size: var(--size, 20px);
  opacity: 0; /* сама анимация ниже управляет непрозрачностью на всём цикле (проявление/угасание) — это лишь состояние до первого кадра */
  line-height: 1;
  animation: weatherFall var(--duration, 12s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

/* Падение (0-8% — проявление, 8-55% — снос+вращение до земли) + "лежит" на
   дороге без движения (55-85%, калька с реального накопления листвы — дорога
   #floor зафиксирована на bottom:0, height:50px, см. style.css, отсюда и
   "calc(100vh - 56px)": высота #room берётся приближённо как 100vh, та же
   грубая оценка, что уже была в прежней версии анимации) + угасание (85-100%)
   перед тем, как цикл начнётся заново сверху. Значения transform в трёх точках
   подряд (55/70/85%) одинаковые — именно поэтому на этом участке лист визуально
   замирает, браузеру нечего интерполировать. Чистый CSS, ни одного JS-тика. */
@keyframes weatherFall {
  0%   { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
  8%   { opacity: var(--opacity, 0.8); }
  50%  { transform: translate(var(--drift, 30px), 48vh) rotate(170deg); opacity: var(--opacity, 0.8); }
  55%  { transform: translate(calc(var(--drift, 30px) * 0.6), calc(100vh - 56px)) rotate(250deg); opacity: var(--opacity, 0.8); }
  85%  { transform: translate(calc(var(--drift, 30px) * 0.6), calc(100vh - 56px)) rotate(250deg); opacity: var(--opacity, 0.8); }
  100% { transform: translate(calc(var(--drift, 30px) * 0.6), calc(100vh - 56px)) rotate(250deg); opacity: 0; }
}

.weather-toggle-icon {
  display: inline-block;
}

#weatherToggleBtn.weather-off .weather-toggle-icon {
  opacity: 0.6;
}