<!-- ============================================================
SCROLLYVIDEOHERO
A full-screen video background with text on top.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want the video moment.
3. Replace the video URL.
4. Replace the poster image URL.
5. Change the label, title, and body text.
6. Adjust the overlay darkness if the text is hard to read.

GOOD FOR:
- openings
- endings
- threshold moments
- atmospheric pauses
- moving water, smoke, clouds, forests, streets, or people gathering

IMPORTANT:
Background video should usually be muted, slow, atmospheric,
and not essential for understanding the story.

BEGINNER KNOBS:
- video source controls the video file
- poster controls the fallback image while the video loads
- --video-overlay controls the dark readability layer
- autoplay muted loop playsinline are important for background video behavior
============================================================ -->

<section
  class="video-hero fade-in"
  style="--video-overlay: rgba(0, 0, 0, 0.46)"
>
  <video
    autoplay
    muted
    loop
    playsinline
    poster="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1800&q=80"
    aria-hidden="true"
  >
    <source
      src="https://videos.pexels.com/video-files/3130284/3130284-uhd_2560_1440_30fps.mp4"
      type="video/mp4"
    />
  </video>

  <div class="video-hero-card">
    <div class="section-label">Video background</div>

    <h2>Use videoHero when motion should create atmosphere.</h2>

    <p>
      This section places muted background video behind text. It works best for openings,
      endings, or threshold moments.
    </p>
  </div>
</section>