/* Scroll motion for marqup.app (added by tools/build_site.py; the canvas pages stay static).
   Everything here is inert unless motion.js put .motion on <html>, which it skips when the
   visitor asked for reduced motion. */

body { position: relative; }

/* contour lines that draw themselves down the page */
.contours { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.contours path { fill: none; vector-effect: non-scaling-stroke; }
.contours .c { stroke: #CFCFCB; stroke-width: 1; }
.contours .c.idx { stroke: #B9B9B4; stroke-width: 1.4; }
.contours .rule { stroke: #0B0B0B; stroke-width: 1; opacity: .55; }
.contours .tick { stroke: #0B0B0B; stroke-width: 1; opacity: .55; }
body > div, body > x-dc > div { position: relative; z-index: 1; }

/* things that ease in as they reach the screen */
.motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1.1s cubic-bezier(.2, .75, .2, 1); }
.motion .rv.in { opacity: 1; transform: none; }

/* headings: letters rise into place */
.motion .split .w { display: inline-block; white-space: nowrap; }
.motion .split .ch { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(3deg); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .75, .2, 1); }
.motion .split.in .ch { opacity: 1; transform: none; }

/* pictures drift inside their frames */
.motion .px { overflow: hidden; border: 1px solid #0B0B0B; background: #fff; }
.motion .px.bare { border: 0; background: transparent; overflow: visible; }
.motion .px img { border: 0 !important; display: block; width: 100%; transform: translate3d(0, var(--py, 0), 0) scale(var(--ps, 1.07)); will-change: transform; }
.motion .px.bare img { --ps: 1; }