/*
 * To use these animations apply the specific animation class to element.
 *
 * The element (or its parent) will also need the .animate-inviewport or
 * .animate-onscreen class together with the corresponding:
 * - animate-inviewport-trigger and animate-inviewport-target classes, or
 * - animate-onscreen-trigger and animate-inviewport-target classes.
 *
 * Refer to animation.js for further information on how this works.
 */

/*
 * .-----------------------------------------------------.
 * |                 ANIMATED FADE-IN                    |
 * '-----------------------------------------------------'
 */

html.js .animated-fadein {
  opacity: 0;
}

html.js .animated-fadein.is-animated {
  transition: opacity 0.3s ease-out;
  transition-delay: 0.5s;
}

html.js .animated-fadein.has-animated {
  opacity: 1;
}

/*
 * .-----------------------------------------------------.
 * |              ANIMATED TEXT HIGHLIGHT                |
 * '-----------------------------------------------------'
 */

/*
 * To use this, apply the .animated-text-highlight class to any inline element.
 */

.animated-text-highlight {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(180, 180, 180, 1) 50%) -100% 0;
  background-size: 200%;
}

html.js .animated-text-highlight {
  background-position: 0 0;
}

html.js .animated-text-highlight.is-animated {
  transition: background-position 1s ease-in-out;
}

html.js .animated-text-highlight.has-animated {
  background-position: -100% 0;
}

html[dir='rtl'].js .animated-text-highlight.has-animated {
  background-position: 100% 0;
}

/*
 * .-----------------------------------------------------.
 * |               ANIMATED TEXT TYPING                  |
 * '-----------------------------------------------------'
 */

/*
 * To use this, apply the .animated-text-typing class to any element
 * that contains text only (no inner html).
 */

/* Each entire word is placd within this span, which prevents single letters */
/* wrapped in their spans own animation spans, to fall into the next line. */
.animated-text-typing-word {
  white-space: nowrap;
}

html.js .animated-text-typing-char {
  display: inline-block;
  transform: scale(2.0) translateY(-14px);
  opacity: 0;
}

html.js .animated-text-typing.is-animated .animated-text-typing-char {
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Ignore inline css transition-delay on chars before they become animated. */
html.js .animated-text-typing:not(.is-animated) .animated-text-typing-char {
  transition-delay: 0s !important;
}

html.js .animated-text-typing.has-animated .animated-text-typing-char {
  opacity: 1;
  transform: scale(1) translateY(0);
}