.hero-anim-object {
  --hero-distance: 30px;
  animation-fill-mode: both;
  will-change: opacity, transform;
}

.hero-anim-paused {
  animation-play-state: paused;
}

@keyframes hero-fade-up {
  from { opacity: 0; transform: translate3d(0, var(--hero-distance), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade-down {
  from { opacity: 0; transform: translate3d(0, calc(var(--hero-distance) * -1), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade-left {
  from { opacity: 0; transform: translate3d(var(--hero-distance), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade-right {
  from { opacity: 0; transform: translate3d(calc(var(--hero-distance) * -1), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-slide-up {
  from { transform: translate3d(0, var(--hero-distance), 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes hero-slide-down {
  from { transform: translate3d(0, calc(var(--hero-distance) * -1), 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes hero-slide-left {
  from { transform: translate3d(var(--hero-distance), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes hero-slide-right {
  from { transform: translate3d(calc(var(--hero-distance) * -1), 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes hero-blur-up {
  from { opacity: 0; filter: blur(10px); transform: translate3d(0, var(--hero-distance), 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes hero-blur-in {
  from { opacity: 0; filter: blur(12px); transform: scale(1.03); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes hero-zoom-in {
  from { opacity: 0; transform: scale(.88); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-zoom-out {
  from { opacity: 0; transform: scale(1.12); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-pop-in {
  0% { opacity: 0; transform: scale(.72); }
  68% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hero-bounce-in {
  0% { opacity: 0; transform: translate3d(0, var(--hero-distance), 0) scale(.96); }
  60% { opacity: 1; transform: translate3d(0, calc(var(--hero-distance) * -.24), 0) scale(1.02); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes hero-rotate-in {
  from { opacity: 0; transform: rotate(-8deg) scale(.94); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes hero-flip-x {
  from { opacity: 0; transform: perspective(800px) rotateX(70deg); }
  to { opacity: 1; transform: perspective(800px) rotateX(0); }
}

@keyframes hero-flip-y {
  from { opacity: 0; transform: perspective(800px) rotateY(-70deg); }
  to { opacity: 1; transform: perspective(800px) rotateY(0); }
}

@keyframes hero-swing-in {
  0% { opacity: 0; transform: rotate(-10deg) translate3d(0, calc(var(--hero-distance) * -1), 0); transform-origin: top center; }
  55% { opacity: 1; transform: rotate(3deg) translate3d(0, 0, 0); transform-origin: top center; }
  100% { opacity: 1; transform: rotate(0) translate3d(0, 0, 0); transform-origin: top center; }
}

@keyframes hero-stretch-in {
  from { opacity: 0; transform: scaleX(.82) scaleY(1.08); }
  to { opacity: 1; transform: scaleX(1) scaleY(1); }
}