<!-- ============================================================
SCROLLYSWAP
A sticky image that changes as the reader scrolls through steps.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want the image-swapping sequence.
3. Replace the image URLs.
4. Update alt text and captions.
5. Edit the labels, titles, and body text.
6. Add or remove swap-step articles as needed.

GOOD FOR:
- timelines
- changing states
- layered explanations
- before/after
- systems transformations
- metaphor evolution
- showing progression through a process

BEGINNER KNOBS:
- The sticky image lives in .scroll-swap-media
- The scrolling cards live in .scroll-swap-steps
- Each .swap-step controls the image shown beside it
- data-image controls which image appears
- data-alt controls the image alt text
- data-caption controls the image caption
- The first image src should match STEP 1's data-image
============================================================ -->

<section class="section">

  <div class="section-inner">

    <!-- ============================================================
    INTRO CARD
    ============================================================ -->

    <div class="text-card fade-in scroll-swap-intro">

      <div class="section-label">
        CHANGE ME I'M THE LITTLE HEADLINE ON THE INTRO TEXT BLOCK
      </div>

      <h2>
        CHANGE ME I'M THE MAIN CONTENT ON THE INTRO TEXT BLOCK
      </h2>

      <p>
        CHANGE ME I'M THE SUBTITLE ON THE INTRO TEXT BLOCK
      </p>

    </div>

    <!-- ============================================================
    SCROLLSWAP LAYOUT
    ============================================================ -->

    <div
      class="scroll-swap"
      data-scroll-swap
    >

      <!-- ============================================================
      LEFT SIDE: STICKY IMAGE
      ============================================================ -->

      <figure class="scroll-swap-media fade-in">

        <img
          src="CHANGE ME LINK TO FIRST PHOTO https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80"
          alt="CHANGE ME Describe first image"
          data-scroll-swap-image
        />

        <figcaption
          class="caption"
          data-scroll-swap-caption
        >
          CHANGE ME CAPTION ON FIRST PHOTO
        </figcaption>

      </figure>

      <!-- ============================================================
      RIGHT SIDE: SCROLLING STEPS
      ============================================================ -->

      <div class="scroll-swap-steps">

        <!-- STEP 1: first image should match the default image above -->

        <article
          class="swap-step active"
          data-image="CHANGE ME https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1600&q=80"
          data-alt="CHANGE ME Describe first image"
          data-caption="CHANGE ME Optional first caption"
        >

          <div class="section-label">
            CHANGE ME TINY HEADING ON FIRST TEXT BOX Swap step one
          </div>

          <h3>
            CHANGE ME BIG TEXT ON FIRST TEXT BOX The first image appears by default.
          </h3>

          <p>
            CHANGE ME SMALL TEXT ON FIRST TEXT BOX As the reader scrolls, each step updates the image beside it.
          </p>

        </article>

        <!-- STEP 2 -->

        <article
          class="swap-step"
          data-image="CHANGE ME https://images.unsplash.com/photo-1493246507139-91e8fad9978e?auto=format&fit=crop&w=1600&q=80"
          data-alt="CHANGE ME Describe second image"
          data-caption="CHANGE ME Optional second caption"
        >

          <div class="section-label">
            CHANGE ME Swap step two
          </div>

          <h3>
            CHANGE ME The image changes automatically.
          </h3>

          <p>
            CHANGE ME This creates a strong sense of progression and pacing without requiring clicks.
          </p>

        </article>

        <!-- STEP 3 -->

        <article
          class="swap-step"
          data-image="CHANGE ME https://images.unsplash.com/photo-1511884642898-4c92249e20b6?auto=format&fit=crop&w=1600&q=80"
          data-alt="CHANGE ME Describe third image"
          data-caption="CHANGE ME Optional third caption"
        >

          <div class="section-label">
            CHANGE ME Swap step three
          </div>

          <h3>
            CHANGE ME The sequence unfolds visually.
          </h3>

          <p>
            CHANGE ME ScrollSwap works well when a concept changes state or develops over time.
          </p>

        </article>

      </div>

    </div>

  </div>

</section>