* {
  user-select: none;
}

body {
  overflow-x: hidden;
}

.hero-content h1 {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-content .description {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease-out, transform 1s ease-out 0.3s;
}

.hero-image {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease-out, transform 1s ease-out 0.6s;
}

.hero-content h1.show,
.hero-content .description.show,
.hero-image.show {
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.hero-text {
  opacity: 0;
  transform: translateX(-10%);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-image {
  opacity: 0;
  transform: translateX(10%);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.hero-text.show,
.hero-image.show {
  opacity: 1;
  transform: translateX(0);
}