/* ── the arrival ─────────────────────────────────────────────────────────
   Zutari's pages assemble themselves as they are read: a heading is not there
   until its band is, a photograph uncovers from its own frame a beat after the
   copy beside it, and a row of cards arrives one after another rather than all
   at once. Nothing is on screen "from the beginning" below the fold.

   This file is that motion, and it is the only place it is written: the
   homepage loads it beside palette.css, the six built pages beside
   design.css, and both get the same two shapes.

     .arr        copy: rises ~46px and fades up over a second
     .arr--img   a picture: its frame is wiped open from the top while the
                 image inside starts 12% large and settles, so the crop moves
                 and the photograph is never simply switched on

   --a is the element's place in its row, written by arrive.js (0, 1, 2 ...
   under one parent), so a row of three cards arrives 0 / 90 / 180ms apart.
   The easing is the same expo-out curve the rest of the site settles on: it
   leaves quickly and lands slowly, which reads as the page coming to rest
   rather than as an animation being played.

   arrive.js only adds these classes to blocks that are below the fold when it
   runs, so the first screen never flashes: with scripting off nothing carries
   the class at all and every word and picture is simply there. */

.arr {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity .85s cubic-bezier(.16, 1, .3, 1),
              transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--a, 0) * 90ms);
}
.arr.is-in { opacity: 1; transform: none; }

.arr--img {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 101% 0);
  transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--a, 0) * 90ms);
  overflow: hidden;
}
.arr--img.is-in { clip-path: inset(0 0 0 0); }

.arr--img img,
.arr--img video {
  transform: scale(1.12);
  transition: transform 1.5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--a, 0) * 90ms);
}
.arr--img.is-in img,
.arr--img.is-in video { transform: none; }

/* A reader who has asked for less motion gets the page, not the performance:
   nothing is hidden, so nothing has to animate to become readable. arrive.js
   makes the same decision before it writes a class. */
@media (prefers-reduced-motion: reduce) {
  .arr, .arr--img,
  .arr img, .arr video,
  .arr--img img, .arr--img video {
    opacity: 1; transform: none; clip-path: none;
    transition: none; transition-delay: 0s;
  }
}