/* ==========================================================================
   PHOTOGRAPHS THAT DRIFT.

   A picture that is nailed to its section arrives and leaves with it, and
   the page reads as a stack of cards. Let it travel a little slower than
   the scroll and the section gains depth: the type moves at the speed of
   the page, the photograph behind it lags.

   Markup: a layer inside the section, the photograph inside the layer.

       <section class="…">
         <div class="px" data-parallax aria-hidden="true">
           <img src="…" alt="" loading="lazy" decoding="async">
         </div>
         <div class="…-in"> the type </div>
       </section>

   The section needs position:relative and the type needs to sit above the
   layer (z-index). parallax.js moves the picture; without the script, or
   for a visitor who asked for less motion, it simply sits still and fills
   the section as a background would.
   ========================================================================== */

.px { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

.px > img {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* The picture is a little larger than the frame, and that extra is the
     whole travel: half of it above, half below, so a photograph at rest is
     centred exactly where a background-image would have been. */
  transform: translate3d(0, var(--px-y, 0px), 0) scale(var(--px-scale, 1));
  will-change: transform;
}

/* Only once the script has measured the section: before that a scaled
   picture would be a crop nobody asked for. */
.px.is-live > img { --px-scale: calc(1 + var(--px-slack, .16)); }

@media (prefers-reduced-motion: reduce) {
  .px > img { --px-scale: 1 !important; transform: none !important; }
}