/* Base */
.lr-anim { opacity: 0; will-change: transform, opacity; }
.lr-anim.is-in {
  opacity: 1;
  animation-duration: var(--lr-anim-duration, 700ms);
  animation-delay: var(--lr-anim-delay, 0ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.6,.2,1);
}

/* Fade In Up/Down/Left/Right now use --lr-anim-distance */
@keyframes lr-fadeInUp {
  from { opacity:0; transform: translate3d(0, var(--lr-anim-distance, 12px), 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--fadeInUp.is-in { animation-name: lr-fadeInUp; }

@keyframes lr-fadeInDown {
  from { opacity:0; transform: translate3d(0, calc(var(--lr-anim-distance, 12px) * -1), 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--fadeInDown.is-in { animation-name: lr-fadeInDown; }

@keyframes lr-fadeInLeft {
  from { opacity:0; transform: translate3d(calc(var(--lr-anim-distance, 12px) * -1), 0, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--fadeInLeft.is-in { animation-name: lr-fadeInLeft; }

@keyframes lr-fadeInRight {
  from { opacity:0; transform: translate3d(var(--lr-anim-distance, 12px), 0, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--fadeInRight.is-in { animation-name: lr-fadeInRight; }

/* Zoom In uses --lr-anim-zoom-from */
@keyframes lr-zoomIn {
  from { opacity:0; transform: scale(var(--lr-anim-zoom-from, .96)); }
  to   { opacity:1; transform: scale(1); }
}
.lr-anim--zoomIn.is-in { animation-name: lr-zoomIn; }

/* Slide In variants use a larger default distance */
@keyframes lr-slideInUp {
  from { opacity:0; transform: translate3d(0, var(--lr-anim-distance, 24px), 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--slideInUp.is-in { animation-name: lr-slideInUp; }

@keyframes lr-slideInDown {
  from { opacity:0; transform: translate3d(0, calc(var(--lr-anim-distance, 24px) * -1), 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--slideInDown.is-in { animation-name: lr-slideInDown; }

@keyframes lr-slideInLeft {
  from { opacity:0; transform: translate3d(calc(var(--lr-anim-distance, 24px) * -1), 0, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--slideInLeft.is-in { animation-name: lr-slideInLeft; }

@keyframes lr-slideInRight {
  from { opacity:0; transform: translate3d(var(--lr-anim-distance, 24px), 0, 0); }
  to   { opacity:1; transform: translate3d(0, 0, 0); }
}
.lr-anim--slideInRight.is-in { animation-name: lr-slideInRight; }