/* Motion kit styles: only what the effects in motion.js need to work. Every look (colors, type,
   layout) belongs in the site's own style.css. */

/* Split text */
.kit-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.kit-piece { display: inline-block; will-change: transform; }
.kit-word { display: inline-block; }

[data-image-reveal] { overflow: hidden; }
[data-image-reveal] img { will-change: transform; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}