/* Generated from assets/scss/feature-entrance.scss — edit the source, not this file */
/* Entrance animations (assets/js/feature-entrance.js): keyframes played when an element gets .entrance-animate.
 * Duration and delay are set on the element by the script; easing comes from data-entrance-easing. */
/* Initial states - set opacity to 0 before animation triggers. Important: over an inline opacity
 * (Scroll Reveal's), which would show the element until its animation hides it again */
[data-entrance^=fade]:not(.entrance-animate),
[data-entrance^=zoom]:not(.entrance-animate) {
  opacity: 0 !important;
}

/* Keyframes for Fade animations */
@keyframes entrance-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, -100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-right {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-left {
  from {
    opacity: 0;
    transform: translate3d(100px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-up-right {
  from {
    opacity: 0;
    transform: translate3d(-100px, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-up-left {
  from {
    opacity: 0;
    transform: translate3d(100px, 100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-down-right {
  from {
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade-down-left {
  from {
    opacity: 0;
    transform: translate3d(100px, -100px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Keyframes for Zoom animations */
@keyframes entrance-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes entrance-zoom-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-in-down {
  from {
    opacity: 0;
    transform: translate3d(0, -100px, 0) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-in-right {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-in-left {
  from {
    opacity: 0;
    transform: translate3d(100px, 0, 0) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-out {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes entrance-zoom-out-up {
  from {
    opacity: 0;
    transform: translate3d(0, 100px, 0) scale(1.2);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-out-down {
  from {
    opacity: 0;
    transform: translate3d(0, -100px, 0) scale(1.2);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-out-right {
  from {
    opacity: 0;
    transform: translate3d(-100px, 0, 0) scale(1.2);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes entrance-zoom-out-left {
  from {
    opacity: 0;
    transform: translate3d(100px, 0, 0) scale(1.2);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}
/* Keyframes for Slide animations */
@keyframes entrance-slide-up {
  from {
    transform: translate3d(0, 100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-slide-down {
  from {
    transform: translate3d(0, -100%, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-slide-right {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes entrance-slide-left {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
/* Keyframes for Flip animations */
@keyframes entrance-flip-left {
  from {
    transform: perspective(2500px) rotateY(-100deg);
  }
  to {
    transform: perspective(2500px) rotateY(0);
  }
}
@keyframes entrance-flip-right {
  from {
    transform: perspective(2500px) rotateY(100deg);
  }
  to {
    transform: perspective(2500px) rotateY(0);
  }
}
@keyframes entrance-flip-up {
  from {
    transform: perspective(2500px) rotateX(-100deg);
  }
  to {
    transform: perspective(2500px) rotateX(0);
  }
}
@keyframes entrance-flip-down {
  from {
    transform: perspective(2500px) rotateX(100deg);
  }
  to {
    transform: perspective(2500px) rotateX(0);
  }
}
/* Apply animations to elements */
[data-entrance=fade-up].entrance-animate {
  animation-name: entrance-fade-up;
  animation-fill-mode: both;
}

[data-entrance=fade-down].entrance-animate {
  animation-name: entrance-fade-down;
  animation-fill-mode: both;
}

[data-entrance=fade-right].entrance-animate {
  animation-name: entrance-fade-right;
  animation-fill-mode: both;
}

[data-entrance=fade-left].entrance-animate {
  animation-name: entrance-fade-left;
  animation-fill-mode: both;
}

[data-entrance=fade-up-right].entrance-animate {
  animation-name: entrance-fade-up-right;
  animation-fill-mode: both;
}

[data-entrance=fade-up-left].entrance-animate {
  animation-name: entrance-fade-up-left;
  animation-fill-mode: both;
}

[data-entrance=fade-down-right].entrance-animate {
  animation-name: entrance-fade-down-right;
  animation-fill-mode: both;
}

[data-entrance=fade-down-left].entrance-animate {
  animation-name: entrance-fade-down-left;
  animation-fill-mode: both;
}

[data-entrance=fade].entrance-animate {
  animation-name: entrance-fade;
  animation-fill-mode: both;
}

[data-entrance=zoom-in].entrance-animate {
  animation-name: entrance-zoom-in;
  animation-fill-mode: both;
}

[data-entrance=zoom-in-up].entrance-animate {
  animation-name: entrance-zoom-in-up;
  animation-fill-mode: both;
}

[data-entrance=zoom-in-down].entrance-animate {
  animation-name: entrance-zoom-in-down;
  animation-fill-mode: both;
}

[data-entrance=zoom-in-right].entrance-animate {
  animation-name: entrance-zoom-in-right;
  animation-fill-mode: both;
}

[data-entrance=zoom-in-left].entrance-animate {
  animation-name: entrance-zoom-in-left;
  animation-fill-mode: both;
}

[data-entrance=zoom-out].entrance-animate {
  animation-name: entrance-zoom-out;
  animation-fill-mode: both;
}

[data-entrance=zoom-out-up].entrance-animate {
  animation-name: entrance-zoom-out-up;
  animation-fill-mode: both;
}

[data-entrance=zoom-out-down].entrance-animate {
  animation-name: entrance-zoom-out-down;
  animation-fill-mode: both;
}

[data-entrance=zoom-out-right].entrance-animate {
  animation-name: entrance-zoom-out-right;
  animation-fill-mode: both;
}

[data-entrance=zoom-out-left].entrance-animate {
  animation-name: entrance-zoom-out-left;
  animation-fill-mode: both;
}

[data-entrance=slide-up].entrance-animate {
  animation-name: entrance-slide-up;
  animation-fill-mode: both;
}

[data-entrance=slide-down].entrance-animate {
  animation-name: entrance-slide-down;
  animation-fill-mode: both;
}

[data-entrance=slide-right].entrance-animate {
  animation-name: entrance-slide-right;
  animation-fill-mode: both;
}

[data-entrance=slide-left].entrance-animate {
  animation-name: entrance-slide-left;
  animation-fill-mode: both;
}

[data-entrance=flip-left].entrance-animate {
  animation-name: entrance-flip-left;
  animation-fill-mode: both;
}

[data-entrance=flip-right].entrance-animate {
  animation-name: entrance-flip-right;
  animation-fill-mode: both;
}

[data-entrance=flip-up].entrance-animate {
  animation-name: entrance-flip-up;
  animation-fill-mode: both;
}

[data-entrance=flip-down].entrance-animate {
  animation-name: entrance-flip-down;
  animation-fill-mode: both;
}

/* Played: the animation lets go of transform and opacity, so the element's own (Scroll Reveal, Parallax) apply.
 * It stays as the animation ended, shown: a theme's animation may hide its element until played
 * ([data-entrance="leedo"] { opacity: 0 }); Scroll Reveal's inline opacity (its variable) still wins. */
[data-entrance].entrance-animate.entrance-done {
  animation: none;
  opacity: 1;
}

/* Initial state for flip animations */
[data-entrance^=flip] {
  backface-visibility: hidden;
}

/* Easing control */
[data-entrance][data-entrance-easing=linear] {
  animation-timing-function: linear;
}

[data-entrance][data-entrance-easing=ease] {
  animation-timing-function: ease;
}

[data-entrance][data-entrance-easing=ease-in] {
  animation-timing-function: ease-in;
}

[data-entrance][data-entrance-easing=ease-out] {
  animation-timing-function: ease-out;
}

[data-entrance][data-entrance-easing=ease-in-out] {
  animation-timing-function: ease-in-out;
}

[data-entrance][data-entrance-easing=ease-in-back] {
  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[data-entrance][data-entrance-easing=ease-out-back] {
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-entrance][data-entrance-easing=ease-in-out-back] {
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-entrance][data-entrance-easing=ease-in-sine] {
  animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

[data-entrance][data-entrance-easing=ease-out-sine] {
  animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

[data-entrance][data-entrance-easing=ease-in-out-sine] {
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-entrance][data-entrance-easing=ease-in-quad] {
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-entrance][data-entrance-easing=ease-out-quad] {
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-entrance][data-entrance-easing=ease-in-out-quad] {
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-entrance][data-entrance-easing=ease-in-cubic] {
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-entrance][data-entrance-easing=ease-out-cubic] {
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-entrance][data-entrance-easing=ease-in-out-cubic] {
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-entrance][data-entrance-easing=ease-in-quart] {
  animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-entrance][data-entrance-easing=ease-out-quart] {
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-entrance][data-entrance-easing=ease-in-out-quart] {
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}