:root {
  --semantic-focused-input-border-color: #85B7D9;

  --semantic-light-grey: #DCDDDE;
  --semantic-teal: #00B5AD;
  --magenta: #FD1884;
}

:global .photo-backdrop {
  background-image: url(/images/good_hearted_boyman_takes_part_in_remote_retro.jpg);
  background-size: cover;
  box-shadow: inset 0 0 0 100rem rgba(255, 255, 255, 0.25);
}

:global .welcome-wrapper {
  --corner-offset: 5rem;
  position: relative;
  top: var(--corner-offset);
  left: var(--corner-offset);
}

:global .ui.modal {
  top: 30%;
}

:global .popup-appear {
  transform: translateY(100%);
}

:global .popup-appear.popup-appear-active {
  transform: translateY(0%);
  transition: transform 400ms ease-in;
  transition-delay: 300ms;
}

h1 {
  font-size: 4rem;
  font-weight: 200;
  line-height: 4rem;
  color: var(--semantic-teal);
}

sup {
  top: -2rem;
  font-size: 0.9rem;
  color: var(--magenta);
}

:root {
  --semantic-focused-input-border-color: #85B7D9;

  --semantic-light-grey: #DCDDDE;
  --semantic-teal: #00B5AD;
  --magenta: #FD1884;
}

:global .photo-backdrop {
  background-image: url(/images/good_hearted_boyman_takes_part_in_remote_retro.jpg);
  background-size: cover;
  box-shadow: inset 0 0 0 100rem rgba(255, 255, 255, 0.25);
}

:global .welcome-wrapper {
  --corner-offset: 5rem;
  position: relative;
  top: var(--corner-offset);
  left: var(--corner-offset);
}

:global .ui.modal {
  top: 30%;
}

:global .popup-appear {
  transform: translateY(100%);
}

:global .popup-appear.popup-appear-active {
  transform: translateY(0%);
  transition: transform 400ms ease;
  transition-delay: 300ms;
}

h1 {
  font-size: 4rem;
  font-weight: 200;
  line-height: 4rem;
  color: var(--semantic-teal);
}

sup {
  top: -2rem;
  font-size: 0.9rem;
  color: var(--magenta);
}

Use ease transition for form popup
Use ease transition for form popup
