/**
 * Contains animations that applies to more than one page.
 */

/**
 * Parallax
 */

/* Special cases when the container is the item affected by effect */
img[data-parallax],
[data-parallax] img {
  display: block;
  height: auto;
  max-inline-size: 100%;
  width: 100%;
}

video[data-parallax] {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/**
 * Animate by line
 */
[data-animate-by-line] span {
  display: block;
}

/**
 * Data letter jump
 */

[data-letter-jump] span {
  display: inline-block;
}

[data-letter-jump].animate span {
  animation: letter-jump 0.6s ease-in-out;
}

@keyframes letter-jump {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20%);
  }

  100% {
    transform: translateY(0);
  }
}

/**
 * Move away
 */
[data-move-away] span {
  display: block;
}

[data-move-away] span span {
  pointer-events: none;
  transition: transform 0.15s linear;
}