/* animations */
@keyframes pop {
  to {opacity: 1;}
}
@keyframes fade {
  to {opacity: 0;}
}
@keyframes draw {
  to {
    stroke-dashoffset: 400;
  }
}
@keyframes logo-animation {
  to {
    top: 5rem;
    left: 2rem;
    transform: unset;
    max-height: 5rem;
    max-width: 5rem;
    background-color: var(--color-secondary);
    box-shadow: 0 1px 4px var(--color-secondary-shade);
  }
}
@keyframes logo-animation-mobile {
  to {
    bottom: 2rem;
    right: 2rem;
    transform: unset;
    max-height: 4rem;
    max-width: 4rem;
    background-color: var(--color-secondary);
    box-shadow: 0 1px 4px var(--color-secondary-shade);
  }
}
@keyframes logo-animation-color {
  to {
    fill: var(--color-secondary-contrast-text);
    stroke: var(--color-secondary-contrast-text);
  }
}
@keyframes logo-placeholder-animation {
  to {
    max-height: 9999px;
  }
}
@keyframes landing-animation {
  to {
    width: max-content;
    max-width: 9999px;
  }
}
@keyframes landing-animation-color {
  to {
    background-color: transparent;
  }
}

/* elements */
#landing {
  background-color: var(--color-secondary);
  animation: landing-animation .5s ease-in 2s 1 normal forwards, landing-animation-color .3s ease-in 2s 1 normal forwards;
}
#nav-btn {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 200px;
  max-width: 200px;
  background-color: var(--color-secondary);
  box-shadow: 0 1px 5px transparent;
  animation: logo-animation .3s ease-in 2s 1 normal forwards;
}
#nav-btn #clipped {
  stroke-dasharray: 200 200;
  stroke-dashoffset: 200;
  stroke: var(--color-secondary-contrast);
  fill: none !important;
  animation: draw 1.2s ease-in-out forwards, logo-animation-color .3s ease-in 2s 1 normal forwards;
}
#nav-btn #text, #nav-btn #line {
  opacity: 0;
  animation: pop .5s ease-in-out .2s forwards, logo-animation-color .3s ease-in 2s 1 normal forwards;
}

#nav-btn path, #nav-btn g {
  fill: var(--color-secondary-contrast);
  stroke: var(--color-secondary-contrast);
  animation: logo-animation-color .3s ease-in 2s 1 normal forwards;
}

#nav {
  opacity: 0;
  animation: pop .3s ease-in 2.3s 1 normal forwards;
}

#parallax {
  opacity: 0;
  animation: pop .3s ease-in 2.2s 1 normal forwards;
}

.logo-placeholder {
  max-height: 0;
  animation: logo-placeholder-animation .3s ease-in 2s 1 normal forwards;
}

@media screen and (max-width: 700px) {
  #nav {
    animation: unset;
  }

  #landing {
    animation: landing-animation-color .3s ease-in 2s 1 normal forwards;
  }
  #nav-btn {
    top: unset;
    left: unset;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    background-color: var(--color-secondary);
    box-shadow: 0 1px 5px transparent;
    animation: logo-animation-mobile .3s ease-in 2s 1 normal forwards;
  }
}