/* family-motion.css: the states family-motion.js drives. Shared by the three Hyper sites; keep it identical in each. */
:root {
  --hf-ease: cubic-bezier(.16, 1, .3, 1);       /* out: quick start, long soft landing (Apple's, Glance's) */
  --hf-ease-io: cubic-bezier(.65, 0, .35, 1);   /* in-out, for things that travel and stop */
  --hf-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%,
                 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%,
                 .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);   /* a soft spring, for pops (≤ 600 ms) */
  --hf-reveal-y: 28px;
}
.hf-js [data-reveal] {
  opacity: 0; transform: translate3d(0, var(--hf-reveal-y), 0) scale(.985);
  transition: opacity .7s var(--hf-ease), transform 1s var(--hf-ease);
  transition-delay: calc(var(--hf-i, 0) * 70ms);
}
.hf-js [data-reveal="fade"] { transform: none; }
.hf-js [data-reveal="scale"] { transform: scale(.94); }
.hf-js [data-reveal].is-in { opacity: 1; transform: none; }
.hf-init [data-reveal] { transition: none !important; }
.hf-fallback [data-reveal] { opacity: 1 !important; transform: none !important; }   /* the kit never loaded */
.hf-w { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .hf-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-parallax] { transform: none !important; }
  .hf-w { opacity: 1 !important; }
}
