.animated-title-hero {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    top 0.8s ease,
    left 0.8s ease,
    transform 0.8s ease,
    padding 0.8s ease,
    justify-content 0.8s ease,
    align-items 0.8s ease;
  padding-left: 0;
}





.animated-title {
  font-size: 3em;
  z-index: 1100;
  margin: 0;
  opacity: 0;
  filter: blur(18px);
  font-family: "Inter", sans-serif;
  transition:
    font-size 0.8s ease,
    opacity 0.5s ease,
    filter 0.5s ease,
    transform 0.8s ease;
}
.animated-title-hero.visible .animated-title {
  opacity: 1;
  filter: blur(0);
}
/* Diagonal slide to top-left */
.animated-title-hero.to-corner {
  /* Move to top left, animating from center (diagonal) */
  top: 36px;
  left: 7vw;
  transform: translate(0, 0);
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 0;
}



.animated-title-hero.to-corner .animated-title {
  font-size: 2.2em;
    transform: translate(0, 0);
}

.animated-title-content {
  opacity: 0;
  filter: blur(16px);
  transform: translateY(60px);
  transition:
    opacity 1.2s cubic-bezier(.4,2,.6,1),
    filter 1.2s cubic-bezier(.4,2,.6,1),
    transform 1.2s cubic-bezier(.4,2,.6,1);
  max-width: 700px;
  margin: 0;
  margin-top: 120px;
  z-index: 1;
  position: relative;
  /* Remove background and box-shadow */
  background: none;
  border-radius: 0;
  padding: 0 7vw;
  color: #fff;
  font-size: 1.15em;
  line-height: 1.7;
  text-align: left;
}
.animated-title-content.show {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Navbar blur/fade in */
.nav {
  opacity: 0;
  filter: blur(18px);
  transition:
    opacity 0.7s ease 0.2s,
    filter 0.7s ease 0.2s;
}
.nav.nav-visible {
  opacity: 1;
  filter: blur(0);
}