<!-- ============================================================
SCROLLYPARALLAX
A dramatic transition section with a background image and text on top.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want the parallax moment.
3. Replace the image URL.
4. Change the label, title, and body text.
5. Optional: adjust overlay darkness in ScrollyCore's .parallax-bg rule.

GOOD FOR:
- threshold moments
- mood shifts
- part breaks
- transitions between ideas
- dramatic pauses

BEGINNER KNOBS:
- --parallax-image controls the background image
- The dark overlay lives inside ScrollyCore's .parallax-bg rule
- data-parallax-section tells ScrollyCore to animate this section on scroll
- The amount of movement lives in ScrollyCore's updateParallax() function
============================================================ -->

<section class="parallax-section fade-in" data-parallax-section>
  <div
    class="parallax-bg"
    style="--parallax-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=2200&q=80')"
    aria-hidden="true"
  ></div>

  <div class="parallax-card">
    <div class="section-label">
      CHANGE ME I'M THE TINY SECTION LABEL
    </div>

    <h2>
      CHANGE ME I'M THE BIG HEADLINE
    </h2>

    <p>
      CHANGE ME I'M THE SUBTITLE
    </p>
  </div>
</section>