.hero__text-content > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.hero.is-visible .hero__text-content > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

/* Cuando entra en viewport */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal--fade {
  transform: none;
}
.reveal--scale {
  transform: scale(0.96);
}
.reveal--left {
  transform: translateX(-40px);
}
.reveal--right {
  transform: translateX(40px);
}