body {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: 0;
        padding: 0;
        overflow: hidden;
        font-family: 'Arial', sans-serif;
        background-color: black;
        color: #00ff00;
        height: 100vh;
    }

    .title {
        position: relative;
        z-index: 100;
        font-size: 3rem;
        color: #fff;
        text-align: center;
        animation: textGlow 1.5s ease-in-out infinite alternate, textSlide 1s ease-out 1s forwards;
        font-weight: bold;
        letter-spacing: 2px;
    }

    .title span {
      display: inline-block;
      opacity: 0;
      transform: translateY(30px);
      animation: fadeInUp 0.5s ease-in-out forwards;
    }

    .title span:nth-child(odd) {
      animation-delay: 0.2s;
    }

    .mask {
      margin-top: 20px;
      width: 150px;
      animation: swing 3s ease-in-out infinite, fadeIn 2s ease-in-out forwards;
      z-index: 10;
    }

    .crowd {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      transform: translate(-50%, -50%);
      z-index: 1;
      animation: fadeInCrowd 2s ease-in-out forwards 3s;
    }

    .crowd img {
      position: absolute;
      width: 80px;
      opacity: 0;
      animation: crowdAppear 1.5s ease-in-out forwards;
    }

    @keyframes textGlow {
      0% {
        text-shadow: 0 0 5px #f1fea5, 0 0 10px #f1fea5, 0 0 15px #f1fea5, 0 0 20px #f1fea5;
      }
      100% {
        text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00, 0 0 15px #00ff00, 0 0 20px #00ff00;
      }
    }

    @keyframes textSlide {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

    @keyframes fadeInUp {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: scale(0.8);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes swing {
      0%, 100% {
        transform: rotate(0deg) scale(1);
      }
      25% {
        transform: rotate(5deg) scale(1.05);
      }
      50% {
        transform: rotate(-5deg) scale(1.05);
      }
      75% {
        transform: rotate(3deg) scale(1);
      }
    }

    @keyframes fadeInCrowd {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
        display: block;
      }
    }

    @keyframes crowdAppear {
      0% {
        opacity: 0;
        transform: scale(0.5) rotate(10deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
      }
    }

    canvas {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }