Scroll-Triggered Video Hero with Text Overlay

<div class="bg-black">
  <style>:root { --gold: #d4af37; }
    
    .scroll-container-video-hero { height: 400vh; position: relative; }

    .video-section-hero {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }

    .video-section-hero video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .overlay-text-hero {
      position: absolute;
      z-index: 10;
      text-align: center;
      width: 100%;
      opacity: 0;
    }

    .overlay-text-hero h1 {
      color: white;
      font-size: 5rem;
      letter-spacing: 1rem;
      text-transform: uppercase;
      margin: 0;
      font-family: sans-serif;
    }
    
    .overlay-text-hero p {
      color: var(--gold);
      letter-spacing: 5px;
      font-family: sans-serif;
    }

    @media (max-width: 768px) {
      .overlay-text-hero h1 {
        font-size: 2.5rem;
        letter-spacing: 0.5rem;
      }
      .overlay-text-hero p {
        letter-spacing: 3px;
      }
    }</style>
  <div class="scroll-container-video-hero">
    <section class="video-section-hero">
      <video id="v0-hero" tabindex="0" autobuffer="" preload="auto" muted="">
        <source src="Your_New_Flyby_Video.mp4" type="video/mp4"></source>
      </video>
      <div class="overlay-text-hero" id="text-reveal-hero">
        <h1>Project X</h1>
        <p>DEFINING THE FUTURE</p>
      </div>
    </section>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script>(function() {
      gsap.registerPlugin(ScrollTrigger);

      const video = document.querySelector("#v0-hero");

      ScrollTrigger.create({
        trigger: ".scroll-container-video-hero",
        start: "top top",
        end: "bottom bottom",
        scrub: true,
        onUpdate: (self) => {
          if (video.duration) {
            video.currentTime = video.duration * self.progress;
          }
        }
      });

      gsap.to("#text-reveal-hero", {
        scrollTrigger: {
          trigger: ".scroll-container-video-hero",
          start: "50% center",
          end: "70% center",
          scrub: true
        },
        opacity: 1,
        scale: 1.2,
        duration: 1
      });
    })();</script>
</div>