.headline-container {
  overflow: hidden;
  position: relative;
  padding-bottom: 5px;
}

.headline-container h1 {
  font-size: 1.8em;
  color: #333;
  margin: 0;
  padding: 0;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.headline-container.animate h1 {
  transform: translateY(0%);
}

.headline-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: orange;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s;
}

.headline-container.animate::after {
  transform: scaleX(1);
}