#transition-1 {
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

#transition-1 .wrapper {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#transition-2 {
  height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(43, 43, 43, 0.75) 17%,
    rgba(92, 92, 92, 0.25) 66%,
    rgba(255, 255, 255, 0) 100%
  );
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#transition-2 video {
  position: absolute;
  z-index: -1;
  height: 100vh;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: 75%;
}

#transition-2 .video-wrapper {
  position: absolute;
  z-index: -1;
  height: 100vh;
  width: 100%;
}

#transition-2 .wrapper {
  position: absolute;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 128px;
  text-align: center;
}

#transition-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background: radial-gradient(
      circle at bottom left,
      transparent 25%,
      #f1feff 25.5%,
      #f1feff 36%,
      transparent 37%,
      transparent 100%
    ),
    radial-gradient(
      circle at top right,
      transparent 34%,
      #f1feff 34.5%,
      #f1feff 45.5%,
      transparent 46%,
      transparent 100%
    );
  background-size: 6em 6em;
  background-color: #ffffff;
  /* Created from https://superdesigner.co/tools/css-backgrounds */
}

#transition-3 .wrapper {
  text-align: center;
}

#transition-3 video {
  width: 80%;
  max-width: 200px;
}