.hero {
  opacity: 0;
  transform: translateY(20px);
  animation: heroFade 0.8s ease-out forwards;
  animation-delay: 0.15s;
}

.hero-grid {
  opacity: 0;
  animation: contentFade 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

.cards > .card,
.coming-card {
  opacity: 0;
  transform: translateY(20px);
  animation: cardIn 0.8s ease-out forwards;
}

.cards > .card:nth-child(1),
.coming-card:nth-child(1) {
  animation-delay: 0.25s;
}

.cards > .card:nth-child(2),
.coming-card:nth-child(2) {
  animation-delay: 0.35s;
}

.cards > .card:nth-child(3),
.coming-card:nth-child(3) {
  animation-delay: 0.45s;
}

@keyframes heroFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contentFade {
  to {
    opacity: 1;
  }
}

@keyframes cardIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}