/* =========================
   HALLOWEEN FLYING BAT
   ========================= */

.halloween-bat-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}

.flying-bat {
  position: absolute;
  width: 70px;
  height: 45px;
  left: -100px;
  top: 15vh;
  animation: batFlyAround 18s linear infinite;
  will-change: transform;
}

.bat-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow( 0 3px 3px rgba(0, 0, 0, 0.4) );
}

/* Bat colour */

.bat-svg path, .bat-svg circle, .bat-svg ellipse {
  fill: #111;
}

/* Keep orange eyes */

.bat-svg circle[fill="#ff8c00"] {
  fill: #ff8c00;
}

/* =========================
   WING FLAPPING
   ========================= */

.bat-wing {
  transform-box: fill-box;
}

.bat-wing-left {
  transform-origin: right center;
  animation: flapLeft 0.28s ease-in-out infinite alternate;
}

.bat-wing-right {
  transform-origin: left center;
  animation: flapRight 0.28s ease-in-out infinite alternate;
}

@keyframes flapLeft {
  0% {
    transform: rotate(12deg) scaleY(1);
  }
  100% {
    transform: rotate(-20deg) scaleY(0.45);
  }
}

@keyframes flapRight {
  0% {
    transform: rotate(-12deg) scaleY(1);
  }
  100% {
    transform: rotate(20deg) scaleY(0.45);
  }
}

/* =========================
   FLIGHT PATH
   ========================= */

@keyframes batFlyAround {
  0% {
    transform: translate(-10vw, 12vh) rotate(5deg) scale(0.8);
  }
  10% {
    transform: translate(15vw, 22vh) rotate(-10deg) scale(1);
  }
  22% {
    transform: translate(38vw, 8vh) rotate(8deg) scale(0.9);
  }
  35% {
    transform: translate(62vw, 30vh) rotate(-8deg) scale(1.05);
  }
  48% {
    transform: translate(85vw, 15vh) rotate(10deg) scale(0.85);
  }
  56% {
    transform: translate(105vw, 35vh) rotate(-4deg) scale(0.95);
  }
  57% {
    transform: translate(105vw, 70vh) rotate(180deg) scale(0.9);
  }
  68% {
    transform: translate(78vw, 60vh) rotate(185deg) scale(1);
  }
  78% {
    transform: translate(50vw, 80vh) rotate(170deg) scale(0.85);
  }
  89% {
    transform: translate(22vw, 55vh) rotate(188deg) scale(1);
  }
  100% {
    transform: translate(-15vw, 72vh) rotate(180deg) scale(0.8);
  }
}

/* =========================
   MOBILE SIZE
   ========================= */

@media (max-width: 768px) {
  .flying-bat {
    width: 52px;
    height: 35px;
    animation-duration: 15s;
  }
}

/* Respect reduced motion setting */

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