/* ============================================================
   Initial landing animation for nameAndTitle
   ============================================================ */

#nameAndTitle {
  position: relative;
}

/* Starting position: centered vertically on the screen */

body.landing-animation #nameAndTitle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  width: max-content;
  max-width: 90%;
  opacity: 1;
  transition: top 2.5s ease-in-out, transform 2.5s ease-in-out, opacity 1.2s ease-in 1.3s;
}

/* Final position: migrate toward top and fade */

body.landing-animation.name-moving #nameAndTitle {
  top: 20px;
  transform: translate(-50%, 0);
  opacity: 0;
}