.fade-up {
  animation: fadeUp 0.9s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__ambient--one {
  animation: floatAmbientOne 10s ease-in-out infinite;
}

.hero__ambient--two {
  animation: floatAmbientTwo 12s ease-in-out infinite;
}

.hero-float--one,
.hero-float--two {
  animation: floatBadge 5s ease-in-out infinite;
}

.hero-float--two {
  animation-delay: 0.6s;
}

@keyframes floatAmbientOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-14px, 10px, 0);
  }
}

@keyframes floatAmbientTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(16px, -12px, 0);
  }
}

@keyframes floatBadge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}