/* -------------------------------- 

File#: _1_reveal-effects
Title: Reveal Effects
Descr: A collection of reveal effects targeting specific elements as they enter the viewport
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --reveal-fx-duration: 0.6s;
  --reveal-fx-timing-function: var(--ease-out);
}

.reveal-fx {
  opacity: 0;
  transition: opacity, -webkit-transform var(--reveal-fx-timing-function);
  transition: opacity, transform var(--reveal-fx-timing-function);
  transition: opacity, transform var(--reveal-fx-timing-function), -webkit-transform var(--reveal-fx-timing-function);
  transition-duration: var(--reveal-fx-duration);
}
.reveal-fx::before {
  display: none;
  content: 'reveal-fx';
}

.reveal-fx--translate,
.reveal-fx--translate-up {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
}

.reveal-fx--translate-right {
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
}

.reveal-fx--translate-left {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.reveal-fx--translate-down {
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
}

.reveal-fx--scale {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.reveal-fx--scale-up {
  -webkit-transform: translateY(50px) scale(0.8);
  transform: translateY(50px) scale(0.8);
}

.reveal-fx--scale-right {
  -webkit-transform: translateX(-50px) scale(0.8);
  transform: translateX(-50px) scale(0.8);
}

.reveal-fx--scale-left {
  -webkit-transform: translateX(50px) scale(0.8);
  transform: translateX(50px) scale(0.8);
}

.reveal-fx--scale-down {
  -webkit-transform: translateY(-50px) scale(0.8);
  transform: translateY(-50px) scale(0.8);
}

.reveal-fx--rotate,
.reveal-fx--rotate-down,
.reveal-fx--rotate-right,
.reveal-fx--rotate-left,
.reveal-fx--rotate-up {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.reveal-fx--rotate > *,
.reveal-fx--rotate-down > *,
.reveal-fx--rotate-right > *,
.reveal-fx--rotate-left > *,
.reveal-fx--rotate-up > * {
  transition: -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function),
    -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.reveal-fx--rotate > *,
.reveal-fx--rotate-down > * {
  -webkit-transform-origin: top;
  transform-origin: top;
  -webkit-transform: rotateX(-45deg);
  transform: rotateX(-45deg);
}

.reveal-fx--rotate-right > * {
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.reveal-fx--rotate-left > * {
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);
}

.reveal-fx--rotate-up > * {
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

.reveal-fx--text-mask {
  overflow: hidden;
}
.reveal-fx--text-mask > * {
  display: inline-block;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function),
    -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  will-change: transform;
}

[class*='reveal-fx--translate'],
[class*='reveal-fx--scale'] {
  will-change: opacity, transform;
}

.reveal-fx--text-mask > *,
[class*='reveal-fx--rotate'] > * {
  will-change: transform;
}

.reveal-fx--clip-x > *,
.reveal-fx--clip-y > * {
  transition: opacity, -webkit-clip-path var(--ease-out);
  transition: opacity, clip-path var(--ease-out);
  transition: opacity, clip-path var(--ease-out), -webkit-clip-path var(--ease-out);
  transition-duration: var(--reveal-fx-duration);
}

.reveal-fx--clip-x > * {
  -webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
  clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
}

.reveal-fx--clip-y > * {
  -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.reveal-fx--is-visible {
  opacity: 1;
}
.reveal-fx--is-visible[class*='reveal-fx--translate'],
.reveal-fx--is-visible[class*='reveal-fx--scale'],
.reveal-fx--is-visible[class*='reveal-fx--rotate'] > *,
.reveal-fx--is-visible.reveal-fx--text-mask > * {
  -webkit-transform: translate(0);
  transform: translate(0);
}
.reveal-fx--is-visible.reveal-fx--clip-x > *,
.reveal-fx--is-visible.reveal-fx--clip-y > * {
  opacity: 1;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}