/* Hub v254: run every active office courier concurrently with a short visual stagger. */

@media (min-width: 1024px) {
  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="revenue-graphic"] {
    --hub-office-route-duration-v254: 8s;
    --hub-office-route-offset-v254: 0s;
    animation: hub-office-concurrent-revenue-graphic-v254 var(--hub-office-route-duration-v254) linear var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="customer-wait-meeting"] {
    --hub-office-route-duration-v254: 8.4s;
    --hub-office-route-offset-v254: -1.2s;
    animation: hub-office-concurrent-customer-meeting-v254 var(--hub-office-route-duration-v254) linear var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-production"] {
    --hub-office-route-duration-v254: 13.2s;
    --hub-office-route-offset-v254: -.6s;
    animation: hub-office-concurrent-graphic-production-v254 var(--hub-office-route-duration-v254) linear var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="production-shipping"] {
    --hub-office-route-duration-v254: 7.2s;
    --hub-office-route-offset-v254: -1.8s;
    animation: hub-office-concurrent-production-shipping-v254 var(--hub-office-route-duration-v254) linear var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="shipping-delivery"] {
    --hub-office-route-duration-v254: 8.2s;
    --hub-office-route-offset-v254: -.9s;
    animation: hub-office-concurrent-shipping-delivery-v254 var(--hub-office-route-duration-v254) linear var(--hub-office-route-offset-v254) infinite;
  }

  /* Keep each sprite's facing direction synchronized with its own route. */
  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="revenue-graphic"] .hub-office-courier-shell-v235 {
    animation:
      hub-office-courier-step-v235 .72s ease-in-out 0s infinite alternate,
      hub-office-concurrent-face-revenue-graphic-v254 var(--hub-office-route-duration-v254) steps(1, end) var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="customer-wait-meeting"] .hub-office-courier-shell-v235 {
    animation:
      hub-office-courier-step-v235 .72s ease-in-out 0s infinite alternate,
      hub-office-concurrent-face-customer-meeting-v254 var(--hub-office-route-duration-v254) steps(1, end) var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-production"] .hub-office-courier-shell-v235 {
    animation:
      hub-office-courier-step-v235 .72s ease-in-out 0s infinite alternate,
      hub-office-concurrent-face-graphic-production-v254 var(--hub-office-route-duration-v254) steps(1, end) var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="production-shipping"] .hub-office-courier-shell-v235 {
    animation:
      hub-office-courier-step-v235 .72s ease-in-out 0s infinite alternate,
      hub-office-concurrent-face-production-shipping-v254 var(--hub-office-route-duration-v254) steps(1, end) var(--hub-office-route-offset-v254) infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="shipping-delivery"] .hub-office-courier-shell-v235 {
    animation:
      hub-office-courier-step-v235 .72s ease-in-out 0s infinite alternate,
      hub-office-concurrent-face-shipping-delivery-v254 var(--hub-office-route-duration-v254) steps(1, end) var(--hub-office-route-offset-v254) infinite;
  }
}

@keyframes hub-office-concurrent-revenue-graphic-v254 {
  0% { top: 58%; left: 34%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  4% { top: 58%; left: 34%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  18% { top: 58%; left: 39%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  34% { top: 55%; left: 42%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  50% { top: 49%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  68% { top: 38%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  86% { top: 28%; left: 39%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  96% { top: 25.5%; left: 33%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  100% { top: 25.5%; left: 33%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

@keyframes hub-office-concurrent-customer-meeting-v254 {
  0% { top: 70%; left: 50%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  4% { top: 70%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  18% { top: 66%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  32% { top: 61%; left: 46%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  46% { top: 56%; left: 42%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  60% { top: 49%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  76% { top: 37%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  90% { top: 29%; left: 40%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  96% { top: 23%; left: 41%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  100% { top: 23%; left: 41%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

@keyframes hub-office-concurrent-graphic-production-v254 {
  0% { top: 25.5%; left: 33%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  3% { top: 25.5%; left: 33%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  10% { top: 28%; left: 39%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  18% { top: 38%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  26% { top: 49%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  34% { top: 56%; left: 42%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  42% { top: 61%; left: 46%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  50% { top: 63%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  58% { top: 61%; left: 54%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  66% { top: 56%; left: 58%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  74% { top: 49%; left: 61%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  82% { top: 37%; left: 62%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  90% { top: 28%; left: 62%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  97% { top: 25.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  100% { top: 25.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

@keyframes hub-office-concurrent-production-shipping-v254 {
  0% { top: 25.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  4% { top: 25.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  20% { top: 28%; left: 62%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  44% { top: 37%; left: 62.3%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  66% { top: 49%; left: 62.1%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  86% { top: 58%; left: 64%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  96% { top: 60.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  100% { top: 60.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

@keyframes hub-office-concurrent-shipping-delivery-v254 {
  0% { top: 60.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  4% { top: 60.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  18% { top: 58%; left: 64%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  34% { top: 59.5%; left: 60%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  50% { top: 64%; left: 56%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  66% { top: 67%; left: 51%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  78% { top: 70%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  88% { top: 79%; left: 50.3%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  97% { top: 89%; left: 50.8%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  100% { top: 89%; left: 50.8%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

@keyframes hub-office-concurrent-face-revenue-graphic-v254 {
  0%, 34% { scale: 1 1; }
  34.01%, 100% { scale: -1 1; }
}

@keyframes hub-office-concurrent-face-customer-meeting-v254 {
  0%, 88% { scale: -1 1; }
  88.01%, 100% { scale: 1 1; }
}

@keyframes hub-office-concurrent-face-graphic-production-v254 {
  0%, 100% { scale: 1 1; }
}

@keyframes hub-office-concurrent-face-production-shipping-v254 {
  0%, 20% { scale: -1 1; }
  20.01%, 100% { scale: 1 1; }
}

@keyframes hub-office-concurrent-face-shipping-delivery-v254 {
  0%, 78% { scale: -1 1; }
  78.01%, 100% { scale: 1 1; }
}