/* The inner pages' words on a touch screen (topic-touch.js; linked with media="(hover: none) and (pointer: coarse)").
   Each word is the real text in a box of its own, and the box carries room for its ink: an italic's tail runs past its
   letters, and a word drawn on a layer of its own while it moves is cut to its box. Until its block is sent a word waits
   where its page's mechanic starts it (--x --y --r --p --s --sx --sy --o --to, set by topic-touch.js); then it comes into
   place in its turn (--d), by a transform and an opacity only, which the phone's compositor plays by itself. Once in
   place it is plain text again, so nothing changes when the movement ends */
/* (a word waits in a flat transform: a 3D one gives every waiting word a layer of its own, and a long page held
   thousands of them while it scrolled. Only the hero's few words tilt back in depth while they wait, .tt-3d) */
.tt .w { clip-path: none; }
.tt .wi { display: inline-block; padding: .2em .26em .28em; margin: -.2em -.26em -.28em; opacity: var(--o, 0); transform: translate(var(--x, 0px), var(--y, 0px)) scale(var(--sx, var(--s, 1)), var(--sy, var(--s, 1))); transform-origin: var(--to, 50% 50%); }
.tt.tt-3d .wi { transform: perspective(var(--p, 600px)) translate3d(var(--x, 0px), var(--y, 0px), 0) rotateX(var(--r, 0deg)) scale(var(--sx, var(--s, 1)), var(--sy, var(--s, 1))); }
.tt.is-up .wi { opacity: 1; transform: none; transition: opacity var(--fo, .7s) cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform var(--ft, 1s) var(--ez, cubic-bezier(.16, 1, .3, 1)) var(--d, 0s); }
/* (redact: a bar draws over the word's place from the left and lifts away to the right, as a transform only; the word is
   set under it at its fullest, by --d) */
.tt .w.rd::after { transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%; }
.tt.is-up .w.rd::after { animation: tt-bar var(--bt, .4s) cubic-bezier(.45, 0, .55, 1) var(--bd, 0s) both; }
@keyframes tt-bar { 0% { transform: translateX(-50%) scaleX(0); } 45% { transform: none; } 100% { transform: translateX(50%) scaleX(0); } }
/* (horizon: the line is drawn out under the block, then fades once the words are up) */
.t-horizon.tt-line { transform: scaleX(0); transition: transform .7s cubic-bezier(.65, 0, .35, 1), opacity .8s linear; }
.t-horizon.tt-line.is-drawn { transform: none; }
.t-horizon.tt-line.is-gone { opacity: 0; }

/* (the legal pages' running text on a phone: a paragraph at a time, whole) */
.ttb { opacity: 0; transform: translateY(.5em); }
.ttb.is-up { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.33, 1, .68, 1) var(--d, 0s), transform .7s cubic-bezier(.33, 1, .68, 1) var(--d, 0s); }

/* The Systems landing's rising type (type-motion.js rise), as on the home page (home-touch.css); its chapter heading's
   words move whole (.tt-open), with nothing to cut them */
.rise .w, .tt-open .w { clip-path: none; }
.rise .wi { display: inline-block; padding: .2em .26em .28em; margin: -.2em -.26em -.28em; opacity: 0; transform: perspective(600px) translate3d(0, .55em, 0) rotateX(-34deg); }
.rise.is-up .wi { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s), transform 1.1s cubic-bezier(.16, 1, .3, 1) var(--d, 0s); }

/* Private AI's verbs come and go by a fade and a short rise (topic-bodies.js), so none waits under a clip */
.bodies-live .b-ai-verb { clip-path: none; }

/* With reduced motion everything stands where it ends (topic-touch.js does not run then; this is the net under it) */
@media (prefers-reduced-motion: reduce) {
  .tt .wi, .rise .wi, .ttb { opacity: 1; transform: none; transition: none; }
  .tt .w.rd::after { animation: none; transform: scaleX(0); }
}