/* Shared by calculator and admin. Keep all particles below interactive content. */
.leaf-field {
  --rain: #69849a;
  --snow: #fffefa;
  --snow-edge: #aab9c5;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.leaf {
  position: absolute;
  top: -3rem;
  width: 1.1rem;
  height: 1.65rem;
  border-radius: 100% 0 100% 0;
  background: var(--leaf, var(--accent));
  box-shadow: inset .18rem -.12rem 0 #8e431d;
  opacity: .68;
  animation: leaf-fall var(--duration, 15s) linear infinite;
}
.leaf:nth-child(2n) { background: var(--gold); width: .82rem; height: 1.3rem; --duration: 19s; }
.leaf:nth-child(3n) { background: #a84e22; width: 1.35rem; height: 1.85rem; --duration: 22s; }
.leaf:nth-child(1) { left: 7%; animation-delay: -4s; }
.leaf:nth-child(2) { left: 18%; animation-delay: -12s; }
.leaf:nth-child(3) { left: 32%; animation-delay: -7s; }
.leaf:nth-child(4) { left: 49%; animation-delay: -16s; }
.leaf:nth-child(5) { left: 64%; animation-delay: -2s; }
.leaf:nth-child(6) { left: 78%; animation-delay: -10s; }
.leaf:nth-child(7) { left: 91%; animation-delay: -18s; }
.leaf[data-kind="snow"] {
  width: calc(.45rem * var(--size));
  height: calc(.45rem * var(--size));
  border-radius: 50%;
  background: var(--snow);
  box-shadow: 0 0 2px var(--snow-edge);
  opacity: .85;
  animation-name: snow-fall;
}
.leaf[data-kind="rain"] {
  width: 1.5px;
  height: calc(1.6rem * var(--size));
  border-radius: 2px;
  background: var(--rain);
  box-shadow: none;
  opacity: .4;
  animation-name: rain-fall;
}
.weather-paused .leaf { animation-play-state: paused; }
@keyframes leaf-fall {
  0% { transform: translate3d(0, -4rem, 0) rotate(20deg); }
  45% { transform: translate3d(calc(3.5rem + var(--drift, 0vw) * .45), 48vh, 0) rotate(170deg); }
  100% { transform: translate3d(calc(-4rem + var(--drift, 0vw)), 112vh, 0) rotate(330deg); }
}
@keyframes snow-fall {
  0% { transform: translate3d(0, -4rem, 0); }
  50% { transform: translate3d(calc(2rem + var(--drift, 0vw) * .5), 50vh, 0); }
  100% { transform: translate3d(var(--drift, 0vw), 112vh, 0); }
}
@keyframes rain-fall {
  from { transform: translate3d(0, -4rem, 0) rotate(calc(-1 * var(--rain-angle, 0deg))); }
  to { transform: translate3d(var(--drift, 0vw), 112vh, 0) rotate(calc(-1 * var(--rain-angle, 0deg))); }
}
@media (prefers-reduced-motion: reduce) {
  .leaf-field .leaf { animation: none; top: 8vh; opacity: .16; }
  .leaf:nth-child(n+8) { display: none; }
}