/* Pipeline reveal. The table is fully visible until JavaScript starts the motion. */
#pipeline.pipeline-motion-play .pipe tbody tr {
  animation: pipeline-row-rise 620ms cubic-bezier(.22, .68, .22, 1) both;
  animation-delay: var(--pipeline-row-delay, 0ms);
}

#pipeline.pipeline-motion-play .pipe .track .fill {
  transform-origin: left center;
  animation: pipeline-stage-fill 780ms cubic-bezier(.22, .68, .22, 1) both;
  animation-delay: calc(var(--pipeline-row-delay, 0ms) + 180ms);
}

@keyframes pipeline-row-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pipeline-stage-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  #pipeline.pipeline-motion-play .pipe tbody tr,
  #pipeline.pipeline-motion-play .pipe .track .fill {
    animation: none;
  }
}