/* Text Rise. The heading keeps the site's own font, size and color: this file only adds the movement.
   Speed and strength can be set in SETTINGS, or per heading with these variables:
   --fx-rise-duration, --fx-rise-stagger, --fx-rise-distance.
   To color the words as they rise, set --fx-rise-color (it defaults to the heading's own color). */
.fx-rise {
  --_duration: var(--fx-rise-duration, var(--fx-rise-duration-set, 800ms));
  --_stagger: var(--fx-rise-stagger, var(--fx-rise-stagger-set, 70ms));
  --_distance: var(--fx-rise-distance, var(--fx-rise-distance-set, 110%));
  color: var(--fx-rise-color, inherit);
}

/* The mask. The padding and matching negative margin stop tall and hanging letters being clipped. */
.fx-rise-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: -.14em -.06em -.18em;
  padding: .14em .06em .18em;
}
.fx-rise-i {
  display: inline-block;
  transform: translateY(var(--_distance));
  transition: transform var(--_duration) cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--fx-rise-n, 0) * var(--_stagger));
}
.fx-rise.is-in .fx-rise-i { transform: none; }
.fx-rise.is-done .fx-rise-w { overflow: visible; }

/* The script does nothing when reduced motion is on; this is a second safety net */
@media (prefers-reduced-motion: reduce) {
  .fx-rise-i { transform: none !important; transition: none !important; }
}