/* Entry and hand-off motion.
   This file and motion.js are a removable layer: nothing here fires until
   motion.js promotes the hooks below onto elements, so deleting the two tags
   in index.html returns the page to a static render.

   House rules: opacity and transform only, 8-9px of travel, one easing curve,
   and nothing longer than 700ms. */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- the section rail travels with its section ---------- */
  @media (min-width: 768px) {
    .l42-rail[data-motion] { position:sticky; align-self:start; }
  }

  /* The ink of the numbered mark is drawn by a square that steps from the
     previous section's cell to this one's, so it reads as one travelling
     square rather than eight marks lighting up in place. */
  .l42-rail[data-motion] .l42-ink { background:#E4E7EB !important; }
  .l42-rail[data-motion] > div:first-child { position:relative; }
  .l42-rail[data-motion] .l42-tick {
    position:absolute; top:0; left:0; width:7px; height:7px; background:#0F1419;
    transform:translate(var(--px), var(--py));
    transition:transform 760ms cubic-bezier(.22,.7,.2,1), opacity 400ms ease-out;
  }
  .l42-rail[data-motion].is-in .l42-tick { transform:translate(var(--tx), var(--ty)); }
  .l42-rail[data-motion] .l42-tick.is-first { opacity:0; }
  .l42-rail[data-motion].is-in .l42-tick.is-first { opacity:1; }

  /* the accent rule draws out beneath it */
  .l42-rail[data-motion] .l42-rule {
    transform:scaleX(0); transform-origin:left center;
    transition:transform 620ms cubic-bezier(.22,.7,.2,1) 90ms;
  }
  .l42-rail[data-motion].is-in .l42-rule { transform:none; }

  /* and the label rises into place */
  .l42-rail[data-motion] .l42-raillab {
    opacity:0; transform:translateY(7px);
    transition:opacity 600ms ease-out 170ms, transform 600ms cubic-bezier(.22,.7,.2,1) 170ms;
  }
  .l42-rail[data-motion].is-in .l42-raillab { opacity:1; transform:none; }

  /* ---------- headings, figures and cards ---------- */
  [data-reveal] {
    opacity:0; transform:translateY(9px);
    transition:opacity 600ms ease-out var(--l42-d,0ms),
               transform 600ms cubic-bezier(.22,.7,.2,1) var(--l42-d,0ms);
  }
  [data-reveal].is-in { opacity:1; transform:none; }

  /* Hairline grids are handled in motion.js: the grey that draws their internal
     rules has to be removed before any transition exists, then restored on
     arrival, and CSS cannot order those two steps reliably. */

  /* ---------- bars measure themselves out ---------- */
  [data-bar] { transition:transform 700ms cubic-bezier(.22,.7,.2,1) var(--l42-d,0ms); }
  [data-bar="xl"] { transform:scaleX(0); transform-origin:left center; }
  [data-bar="xr"] { transform:scaleX(0); transform-origin:right center; }
  [data-bar="yu"] { transform:scaleY(0); transform-origin:center bottom; }
  [data-bar="yd"] { transform:scaleY(0); transform-origin:center top; }
  [data-bar].is-in { transform:none; }

  /* ---------- charts hold at their first frame until scrolled to ---------- */
  [data-anim]:not(.is-in) * { animation-play-state:paused !important; }
}