.js [data-anim]        { opacity: 0; }
.js [data-anim="up"]   { transform: translateY(18px); }
.js [data-anim="fade"] { transform: none; }

.js [data-anim="mask"] { opacity: 0; overflow: hidden; }
.js [data-anim="mask"] > .mask-inner { display: block; will-change: transform; }

.js [data-anim-group] > * { opacity: 0; transform: translateY(16px); }
.js [data-anim-rows] > * > * { opacity: 0; }

.js [data-split] .word { display: inline-block; overflow: hidden; vertical-align: top; }
.js [data-split] .word > span { display: inline-block; will-change: transform; }

.js.anim-failed [data-anim],
.js.anim-failed [data-anim-group] > *,
.js.anim-failed [data-anim-rows] > * > *,
.js.anim-failed [data-anim="mask"] > .mask-inner {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js [data-anim-group] > *,
  .js [data-anim-rows] > * > *,
  .js [data-anim="mask"] > .mask-inner {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}

#site-header { transition: box-shadow .3s ease, background-color .3s ease; }
#site-header.is-scrolled { box-shadow: 0 6px 20px rgba(0,0,0,.07); }