.cut-scene {
  position: absolute;
  inset: 0;
  z-index: var(--stacking-layer-ui);
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  animation:
    tremor 0.5s,
    cut-scene-whiteout 4s ease-in forwards,
    fade-out 2.5s steps(6) forwards;
  animation-delay: 8s, 8s, 20s;
  animation-iteration-count: 5, 1, 1;
}

.cut-scene {
  .cut-scene-part {
    position: absolute;
    bottom: unset;
    opacity: 0;
    animation:
      cut-scene-bubble-inout 0.5s steps(6) forwards,
      cut-scene-bubble-inout 0.5s steps(6) reverse forwards;
  }

  .cut-scene-part1 {
    top: 3rem;
    left: 3rem;
    animation-delay: 1s, 10s;
  }
  .cut-scene-part2 {
    top: 16rem;
    left: 6rem;
    animation-delay: 4s, 10s;
  }
  .cut-scene-part3 {
    top: 9rem;
    left: 5rem;
    animation-delay: 6s, 10s;
  }
  .cut-scene-part4 {
    top: 12rem;
    left: 8rem;
    animation-delay: 7s, 10s;
  }
  .cut-scene-part5 {
    top: 13rem;
    left: 7rem;
    animation-delay: 8s, 10s;
  }
  .cut-scene-part6 {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    animation-delay: 14s, 17s;
  }
}

@keyframes cut-scene-bubble-inout {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cut-scene-whiteout {
  0% {
    brightness: black;
  }
  100% {
    background-color: white;
  }
}