/* Start hidden and slightly above */
.title-line {
  opacity: 0;
  transform: translateY(-40px);   /* negative = from TOP */
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* Visible state */
.title-line.visible {
  opacity: 1;
  transform: translateY(0);       /* normal position */
}

.title-line {
  opacity: 0;
  transform: translateY(-40px);   /* from TOP */
  transition: opacity 0.4s ease-out, transform 0.9s ease-out;
}

.title-line.visible {
  opacity: 1;
  transform: translateY(0);
}