#bats {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}

.bat {
  position: absolute;
  left: -30%;
  animation-name: fly, flap;
  animation-duration: 2s, 0.2s;
  animation-timing-function: ease-in, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-fill-mode: forwards, none;
  filter: drop-shadow(0 0 6px rgba(220, 20, 60, 0.5));
}

.page.fading-in {
  z-index: 3;
  animation: fade-in 0.8s;
}

@keyframes fly {
  to { left: 125%; }
}

@keyframes flap {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0.35); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}