Модификация Красивый анимированный баннер в честь праздника Хеллоуин

<style>
    .banner {
      position: relative;
      width: 100%;
      height: 300px;
      background: #111;
      border: 8px solid #ff6b00;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 0 30px rgba(255, 107, 0, 0.6);
    }

    .banner::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="5" fill="%23ff6b00" opacity="0.2"/><circle cx="80" cy="70" r="7" fill="%23ff6b00" opacity="0.15"/><circle cx="50" cy="40" r="4" fill="%23ff6b00" opacity="0.1"/></svg>');
      background-size: 200px;
      z-index: 0;
    }

    .title {
      position: relative;
      z-index: 2;
      text-align: center;
      font-size: 4rem;
      color: #ff6b00;
      text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
      animation: flicker 1.5s infinite alternate;
      margin-top: 60px;
    }

    @keyframes flicker {
      0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000;
      }
      20%, 24%, 55% {
        opacity: 0.6;
        text-shadow: none;
      }
    }

    .ghost {
      position: absolute;
      font-size: 2rem;
      z-index: 1;
      opacity: 0.8;
      animation: float 15s infinite ease-in-out;
    }

    @keyframes float {
      0% {
        transform: translateY(0) translateX(0);
      }
      25% {
        transform: translateY(-50px) translateX(30px);
      }
      50% {
        transform: translateY(0) translateX(60px);
      }
      75% {
        transform: translateY(-30px) translateX(30px);
      }
      100% {
        transform: translateY(0) translateX(0);
      }
    }

    .pumpkin {
      position: absolute;
      bottom: 20px;
      font-size: 2.5rem;
      opacity: 0.7;
    }

    .pumpkin:nth-child(1) { left: 30px; }
    .pumpkin:nth-child(2) { right: 30px; }
  </style>

  <div class="banner">
    <h1 class="title">HAPPY HALLOWEEN!</h1>
    <div class="ghost">?</div>
    <div class="ghost" style="left: 20%; animation-delay: -3s;">?</div>
    <div class="ghost" style="left: 70%; animation-delay: -7s;">?</div>
    <div class="pumpkin">?</div>
    <div class="pumpkin">?</div>
  </div>

  <script>
    // Дополнительная анимация: случайное появление новых привидений
    function addRandomGhost() {
      const banner = document.querySelector('.banner');
      const ghost = document.createElement('div');
      ghost.classList.add('ghost');
      ghost.textContent = '?';
      ghost.style.left = Math.random() * 80 + '%';
      ghost.style.top = Math.random() * 60 + '%';
      ghost.style.opacity = Math.random() * 0.5 + 0.3;
      ghost.style.fontSize = (Math.random() * 2 + 1.5) + 'rem';
      ghost.style.animationDuration = (10 + Math.random() * 10) + 's';
      ghost.style.animationDelay = '-' + (Math.random() * 15) + 's';

      banner.appendChild(ghost);

      // Удаляем через 20 секунд
      setTimeout(() => {
        if (ghost.parentNode) ghost.parentNode.removeChild(ghost);
      }, 20000);
    }

    // Добавляем новые привидения каждые 3 секунды
    setInterval(addRandomGhost, 3000);

    // Запускаем первые привидения сразу
    for (let i = 0; i < 2; i++) {
      setTimeout(addRandomGhost, i * 1000);
    }
  </script>