/* Motion, in two voices.
   The home page (html data-motion="landing") moves more: headlines form letter by letter (the way the name forms in
   the intro), text rises into place, a framed picture fades in lightly while the picture in it settles from a touch
   closer and then drifts a little against the scroll, and the sigil above the contact call draws itself the way it
   does on the title card (the drawing is in index.html and sigil-draw.js; here only its light).
   Every other page (data-motion="quiet") moves very little: each part simply fades in, lifting a few pixels.
   Everything here waits for html.motion, which a line in the page's head sets; site.js then marks what moves and
   brings it in each time it comes up into the screen while scrolling down (scrolling back up, everything simply stays
   where it is). With html.calm (the visitor asked for less motion) the same moments are plain fades and nothing drifts.
   When something has played, site.js takes its classes off again, so it goes back to its own styles; once it has gone
   below the screen, it gets them back and waits to come in again. */

/* ---------- the home page ---------- */

/* text and blocks: rise into place */
html.motion .m-rise { opacity: 0; }
html.motion .m-rise.m-in { animation: m-rise 1.3s cubic-bezier(.2, .7, .1, 1) var(--md, 0s) both; }
@keyframes m-rise {
  from { opacity: 0; transform: translate3d(0, 44px, 0); }
  to   { opacity: 1; transform: none; }
}

/* a framed picture comes in lightly: it fades in, lifting a little... */
html.motion .m-photo { opacity: 0; }
html.motion .m-photo.m-in { animation: m-photo 1.4s cubic-bezier(.2, .7, .1, 1) var(--md, 0s) both; }
@keyframes m-photo {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}
/* what follows a picture (its caption) comes just after it */
html.motion:not(.calm) .m-photo ~ .m-rise.m-in { animation-delay: calc(var(--md, 0s) + .25s); }
/* ...while the picture in it settles gently from a touch closer */
html.motion .m-settle.m-in { animation: m-settle 2s cubic-bezier(.2, .7, .1, 1) var(--md, 0s) both; }
@keyframes m-settle {
  from { transform: scale(1.05); }
  to   { transform: none; }
}
/* and drifts a little against the scroll, as if it were further away (site.js moves it; the extra size keeps its edges hidden) */
html.motion:not(.calm) .m-drift { scale: 1.1; }

/* the sigil above the contact call: it draws itself (index.html) while its light comes up and flares as the last
   line is drawn; this lasts as long as the drawing, so site.js does not take its classes off before it is done */
html.motion .m-sigil { opacity: 0; }
html.motion .m-sigil.m-in { animation: m-sigil 2.4s ease var(--md, 0s) both; }
@keyframes m-sigil {
  0%   { opacity: 0; filter: drop-shadow(0 0 0 rgba(200, 194, 245, 0)); }
  6%   { opacity: 1; }
  72%  { opacity: 1; filter: drop-shadow(0 0 30px rgba(220, 214, 255, 0.8)); }
  100% { opacity: 1; filter: drop-shadow(0 0 16px rgba(200, 194, 245, 0.32)); }
}

/* headlines: each letter forms out of a soft blur, one after another; words never break apart */
.m-w { display: inline-block; white-space: nowrap; }
.m-l { display: inline-block; }
html.motion .m-letters .m-l { opacity: 0; }
html.motion .m-letters.m-in .m-l {
  animation: m-form 1.6s cubic-bezier(.2, .7, .1, 1) calc(var(--md, 0s) + var(--i) * var(--st, 40ms)) both;
}
@keyframes m-form {
  from { opacity: 0; filter: blur(12px); transform: translate3d(0, 0.2em, 0) scale(1.06); }
  60%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* ---------- every other page: quietly ---------- */
html.motion .m-quiet { opacity: 0; }
html.motion .m-quiet.m-in { animation: m-quiet 1s cubic-bezier(.25, .6, .3, 1) var(--md, 0s) both; }
@keyframes m-quiet {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
/* what sits at the top of such a page (and the footer of a short one) is hidden from the very first paint until
   site.js has picked it up, so it doesn't show for a moment before fading in */
html.motion[data-motion="quiet"]:not(.m-ready) :where(.back, .list-head > *, .portrait, .about-text > *, .foot-call > *, .foot-grid > *) { opacity: 0; }

/* ---------- less motion: the same moments, as plain fades ---------- */
html.motion.calm .m-rise.m-in, html.motion.calm .m-sigil.m-in, html.motion.calm .m-photo.m-in, html.motion.calm .m-quiet.m-in {
  animation: m-fade 1.1s ease var(--md, 0s) both;
}
html.motion.calm .m-settle.m-in { animation: none; }
html.motion.calm .m-letters.m-in .m-l { animation: m-fade 0.9s ease calc(var(--md, 0s) + var(--i) * var(--st, 40ms)) both; }
@keyframes m-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* a copy shown large (a project's lightbox copies a tile) is simply there; on paper too */
html.motion dialog :is(.m-rise, .m-sigil, .m-photo, .m-quiet) { opacity: 1; animation: none; }
@media print {
  html.motion .m-rise, html.motion .m-sigil, html.motion .m-photo, html.motion .m-quiet, html.motion .m-letters .m-l,
  html.motion:not(.m-ready) :where(.back, .list-head > *, .portrait, .about-text > *, .foot-call > *, .foot-grid > *) { opacity: 1 !important; animation: none !important; }
}