body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

body[data-weather="clear"]::before {
  background: url('/animations/sun-rays.svg');
  opacity: 0.3;
}

body[data-weather="rain"]::before {
  background: url('/animations/neon-rain.gif');
  opacity: 0.4;
}

body[data-weather="storm"]::before {
  background: url('/animations/neon-lightning.gif');
  opacity: 0.5;
}

body[data-weather="fog"]::before {
  background: url('/animations/neon-fog.png');
  opacity: 0.35;
}