body {
      margin: 0;
      background: #000;
      font-family: Arial, sans-serif;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow-x: hidden;
    }

    header {
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 10;
      width: auto;
      padding: 0;
    }

    header img {
      width: 180px;
      height: auto;
      pointer-events: none;
    }

    .hero {
      position: relative;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .hero img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
    }

    @media (max-width: 600px) {
      header img {
        width: 120px;
      }
    }
  .scroll-text-container {
      position: absolute;
      z-index: 20;
      top: 50vh;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      height: 60px;
      overflow: visible;
      text-align: center;
    }

    .scroll-text {
      position: absolute;
      white-space: nowrap;
      font-weight: bold;
      color: red;
      font-size: 3rem;
      opacity: 0;
      top: 0;
      left: 50%;
      transform: translateX(-200%);
      transition: transform 1.8s cubic-bezier(0.22, 1.5, 0.56, 1), opacity 1.8s ease;
    }

    .scroll-text.enter {
      transform: translateY(-80px);
      opacity: 1;
    }

    .scroll-text.judder {
      animation: judderAnim 0.2s ease-in-out 3;
    }

    .scroll-text.exit {
      transform: translateY(-200px);
      opacity: 0;
    }

    @keyframes judderAnim {
      0% { transform: translateY(-80px) translateX(0); }
      25% { transform: translateY(-80px) translateX(-3px); }
      50% { transform: translateY(-80px) translateX(3px); }
      75% { transform: translateY(-80px) translateX(-2px); }
      100% { transform: translateY(-80px) translateX(0); }
    }

  @keyframes knockBounce {
  0% { transform: translateX(-50%); }
  20% { transform: translateX(-40%); }
  40% { transform: translateX(-60%); }
  60% { transform: translateX(-120%); }
  80% { transform: translateX(-200%); }
  100% { transform: translateX(-400%); }
}
      20% { transform: translateX(-40%); }
      40% { transform: translateX(-60%); }
      60% { transform: translateX(-80%); }
      80% { transform: translateX(-120%); }
      100% { transform: translateX(-300%); }
    }
      30% { transform: translateX(-40%); }
      60% { transform: translateX(-60%); }
      100% { transform: translateX(-200%); }
    }

    .knockout {
      animation: knockBounce 1.5s ease forwards;
    }