/* --- Queue Diagram Animation --- */
.queue-diagram {
  display: flex;
  justify-content: center;
  margin-top: 2em;
  margin-bottom: 2em;
}
.queue-diagram svg {
  background-color: transparent;
  width: 100%;
  max-width: 720px;
}

body, svg {
  background-color: #0b0d12;
}


.packet, .done {
  animation: move 6s linear infinite;
}

.packet.delay1 { animation-delay: 2s; }
.packet.delay2 { animation-delay: 4s; }

.done {
  opacity: 0;
  animation: appear 6s linear infinite;
}

.done.delay1 { animation-delay: 2s; }
.done.delay2 { animation-delay: 4s; }

@keyframes move {
  0% { transform: translateX(0); opacity: 1; }
  50% { transform: translateX(280px); opacity: 1; }
  60% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes appear {
  0%, 50% { opacity: 0; transform: translateX(0); }
  60% { opacity: 0.3; transform: translateX(0); }
  70% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(60px); }
}
.packet, .done {
  animation: move 6s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}