/* ==========================================================================
   case-anim.css — the text of a case page arrives, then stays put.

   One entrance at load. The article's blocks slide in alternating sides — one
   from the left, the next from the right — line after line, block after block,
   in document order, each a beat behind the one above it.

   The order and the side are stamped into the markup by tools/build-cases.py,
   which walks the article once and numbers what it finds. CSS only says what
   `cin--l`, `cin--r` and `cin--d0…d24` mean. Nothing animates after the run
   is over — no scroll triggers, no counters. A page being read should be still.

   Scoped to `html.is-ready`, which main.js sets as soon as it runs, so with
   JavaScript off nothing is ever hidden. Under prefers-reduced-motion the file
   stands down and the page is simply there.
   ========================================================================== */

/* The entrance comes in from both sides; clipping the article keeps those
   24px from ever reaching the document's scroll width. */
.cpage { overflow: hidden; }

.is-ready .cpage .cin {
  animation-duration: .52s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
}
.is-ready .cpage .cin--l { animation-name: cp-left; }
.is-ready .cpage .cin--r { animation-name: cp-right; }

@keyframes cp-left  { from { opacity: 0; transform: translateX(-26px); } }
@keyframes cp-right { from { opacity: 0; transform: translateX(26px); } }

/* One beat per block. The last step repeats for anything past it, so a long
   case tails off together instead of trickling in for three seconds. */
.is-ready .cpage .cin--d0  { animation-delay: 0.02s; }
.is-ready .cpage .cin--d1  { animation-delay: 0.07s; }
.is-ready .cpage .cin--d2  { animation-delay: 0.11s; }
.is-ready .cpage .cin--d3  { animation-delay: 0.15s; }
.is-ready .cpage .cin--d4  { animation-delay: 0.20s; }
.is-ready .cpage .cin--d5  { animation-delay: 0.24s; }
.is-ready .cpage .cin--d6  { animation-delay: 0.29s; }
.is-ready .cpage .cin--d7  { animation-delay: 0.34s; }
.is-ready .cpage .cin--d8  { animation-delay: 0.38s; }
.is-ready .cpage .cin--d9  { animation-delay: 0.42s; }
.is-ready .cpage .cin--d10 { animation-delay: 0.47s; }
.is-ready .cpage .cin--d11 { animation-delay: 0.52s; }
.is-ready .cpage .cin--d12 { animation-delay: 0.56s; }
.is-ready .cpage .cin--d13 { animation-delay: 0.60s; }
.is-ready .cpage .cin--d14 { animation-delay: 0.65s; }
.is-ready .cpage .cin--d15 { animation-delay: 0.69s; }
.is-ready .cpage .cin--d16 { animation-delay: 0.74s; }
.is-ready .cpage .cin--d17 { animation-delay: 0.79s; }
.is-ready .cpage .cin--d18 { animation-delay: 0.83s; }
.is-ready .cpage .cin--d19 { animation-delay: 0.88s; }
.is-ready .cpage .cin--d20 { animation-delay: 0.92s; }
.is-ready .cpage .cin--d21 { animation-delay: 0.96s; }
.is-ready .cpage .cin--d22 { animation-delay: 1.01s; }
.is-ready .cpage .cin--d23 { animation-delay: 1.05s; }
.is-ready .cpage .cin--d24 { animation-delay: 1.10s; }

@media (prefers-reduced-motion: reduce) {
  .is-ready .cpage .cin {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* --- the headline, letter by letter --------------------------------------- */
/* js/case-title.js wraps each word in .w and each letter in .l, and sets --i
   on the letter. The word wrapper is what keeps line breaks between words. */
.cpage h1 .w { display: inline-block; }
.cpage h1 .l { display: inline-block; }

/* Once the letters carry the entrance, the heading no longer needs the block
   one it was stamped with. */
.is-ready .cpage h1.is-split {
  animation: none; opacity: 1; transform: none;
}
.is-ready .cpage h1.is-split .l {
  animation-duration: .5s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-delay: calc(.10s + var(--i, 0) * 26ms);
}
.is-ready .cpage h1.is-split .l--up { animation-name: cp-up; }
.is-ready .cpage h1.is-split .l--dn { animation-name: cp-dn; }

@keyframes cp-up { from { opacity: 0; transform: translateY(.38em) scale(.9); } }
@keyframes cp-dn { from { opacity: 0; transform: translateY(-.38em) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .is-ready .cpage h1.is-split .l { animation: none !important; opacity: 1 !important; }
}