/* Shared motion for wozy.co, driven by /assets/motion.js.

   Everything here only applies under html.mo, which the small inline script in
   each page's <head> adds when the visitor hasn't asked for reduced motion.
   Without it (reduced motion, no JavaScript, old browser) pages look exactly
   as they are written.

   Markup:
     data-mo            reveal on scroll: fade in and rise. Values: "scale"
                        (grow in), "fade" (no movement).
     data-mo-stagger    reveal each child in turn. Tune the gap with
                        style="--mo-step: 40ms".
     data-mo-words      headline that comes in one word at a time.
     data-scrub         gets --p (0 to 1 as it crosses the screen) and --s
                        (0 to 1 as it scrolls off the top), for scroll-linked
                        movement written in the page's own CSS.
     data-count         number that counts up when it comes into view.

   Reveals use the translate and scale properties, never transform, so they
   stack with whatever transform an element already has. */

:root {
  --mo-ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --mo-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html.mo [data-mo] {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 0.9s var(--mo-ease), translate 1.1s var(--mo-out), scale 1.1s var(--mo-out);
  transition-delay: calc(var(--mo-i, 0) * var(--mo-step, 70ms));
}
html.mo [data-mo="scale"] { translate: 0 24px; scale: 0.94; }
html.mo [data-mo="fade"] { translate: none; }
html.mo [data-mo].in { opacity: 1; translate: none; scale: none; }

/* headline, one word at a time */
html.mo [data-mo-words] { opacity: 0; }
html.mo [data-mo-words].split { opacity: 1; }
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.mo-w > span { display: inline-block; translate: 0 115%; transition: translate 1.1s var(--mo-out); transition-delay: calc(var(--mo-i, 0) * 60ms); }
.in .mo-w > span { translate: none; }

/* simple entrance for things that are on screen when the page loads */
@keyframes mo-rise { from { opacity: 0; translate: 0 28px; } }
@keyframes mo-pop { from { opacity: 0; scale: 0.8; } }

[data-count] { font-variant-numeric: tabular-nums; }