.halloween-bat, .halloween-ghost {
      position: fixed;
      top: 0;
      width: 50px;
      height: 50px;
      background-size: contain;
      background-repeat: no-repeat;
      pointer-events: none;
      z-index: 999;
      opacity: 0.9;
    }

    @keyframes bat-fly-left {
      0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateX(-100vw) translateY(100vh) rotate(360deg); opacity: 0; }
    }

    @keyframes bat-fly-right {
      0% { transform: translateX(0) translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateX(100vw) translateY(100vh) rotate(360deg); opacity: 0; }
    }

    @keyframes ghost-rise {
      0% { transform: translateY(0); opacity: 0.9; }
      100% { transform: translateY(-120vh); opacity: 0; }
    }

    .spider-web {
      position: fixed;
      top: -40px;
      right: -40px;
      width: 100px;
      height: 100px;
      background-image: url('https://cdn-icons-png.flaticon.com/128/12/12330.png');
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.6;
      z-index: 998;
      pointer-events: none;
    }

    .spider-container {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      width: 100px;
      height: 100px;
      pointer-events: none;
    }

    .spider {
      width: 40px;
      height: 40px;
      background-image: url('https://cdn-icons-png.flaticon.com/128/12/12304.png'); 
      background-size: contain;
      background-repeat: no-repeat;
      animation: spiderDrop 3s ease-in-out forwards;
    }

    @keyframes spiderDrop {
      0%   { transform: translate(0, -100px) scale(0.5); opacity: 0; }
      50%  { transform: translate(50px, 0) scale(1.02); opacity: 1; }
      100% { transform: translate(0, -200px) scale(0.5); opacity: 0; }
    }