/* Keep the operating-system labels visible after their entrance animation.
   The bundled motion layer can leave these SVG groups at its initial opacity. */
#top svg[aria-label^="Diagram showing"] > g:nth-of-type(n + 6) {
  transform-box: fill-box;
  transform-origin: center;
  animation: versed-hero-node-in 650ms cubic-bezier(.16, 1, .3, 1) both;
}

#top svg[aria-label^="Diagram showing"] > g:nth-of-type(7) { animation-delay: 100ms; }
#top svg[aria-label^="Diagram showing"] > g:nth-of-type(8) { animation-delay: 200ms; }
#top svg[aria-label^="Diagram showing"] > g:nth-of-type(9) { animation-delay: 300ms; }
#top svg[aria-label^="Diagram showing"] > g:nth-of-type(10) { animation-delay: 400ms; }

@keyframes versed-hero-node-in {
  from { opacity: 0; transform: scale(.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #top svg[aria-label^="Diagram showing"] > g:nth-of-type(n + 6) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}