/* Hub v243: door-first office routes, feet anchors, and direction-aware couriers. */

@media (min-width: 1024px) {
  .hub-office-simulation-v235 {
    --hub-office-route-cycle-v243: 48s;
  }

  /* top/left now identifies the character's feet, so every waypoint stays on the floor. */
  .hub-office-simulation-v235 .hub-office-courier-v235 {
    width: clamp(58px, 5.4vw, 76px);
    height: clamp(82px, 7.5vw, 106px);
    transform: translate(-50%, -100%);
    will-change: top, left, opacity;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-tone="teal"] {
    width: clamp(68px, 6.2vw, 88px);
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-tone="violet"] {
    width: clamp(64px, 6vw, 84px);
    height: clamp(88px, 8.2vw, 116px);
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-tone="rose"] {
    width: clamp(50px, 4.5vw, 62px);
    height: clamp(70px, 6.2vw, 86px);
  }

  /* A zero-count worker waits safely beside the correct doorway instead of on a desk. */
  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="revenue-graphic"] {
    top: 58%;
    left: 34%;
    animation: hub-office-route-revenue-graphic-v243 var(--hub-office-route-cycle-v243) linear infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="customer-wait-meeting"] {
    top: 70%;
    left: 50%;
    animation: hub-office-route-customer-meeting-v243 var(--hub-office-route-cycle-v243) linear infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="graphic-production"] {
    top: 25.5%;
    left: 33%;
    animation: hub-office-route-graphic-production-v243 var(--hub-office-route-cycle-v243) linear infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="production-shipping"] {
    top: 25.5%;
    left: 67%;
    animation: hub-office-route-production-shipping-v243 var(--hub-office-route-cycle-v243) linear infinite;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-flow="shipping-delivery"] {
    top: 60.5%;
    left: 67%;
    animation: hub-office-route-shipping-delivery-v243 var(--hub-office-route-cycle-v243) linear infinite;
  }

  /* The shell alone turns. Speech stays a readable, unmirrored sibling. */
  .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 infinite alternate,
      hub-office-face-revenue-graphic-v243 var(--hub-office-route-cycle-v243) steps(1, end) 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 infinite alternate,
      hub-office-face-customer-meeting-v243 var(--hub-office-route-cycle-v243) steps(1, end) 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 infinite alternate,
      hub-office-face-graphic-production-v243 var(--hub-office-route-cycle-v243) steps(1, end) 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 infinite alternate,
      hub-office-face-production-shipping-v243 var(--hub-office-route-cycle-v243) steps(1, end) 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 infinite alternate,
      hub-office-face-shipping-delivery-v243 var(--hub-office-route-cycle-v243) steps(1, end) infinite;
  }

  /* Keep bubbles compact while couriers pass the narrow door lanes. */
  .hub-office-simulation-v235 .hub-office-speech-v235 {
    width: clamp(122px, 10.2vw, 142px);
  }
}

/* 00-14: revenue / partner -> graphic, through the lower-left and graphic doors. */
@keyframes hub-office-route-revenue-graphic-v243 {
  0% { top: 58%; left: 34%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  1% { top: 58%; left: 34%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  3% { top: 58%; left: 39%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  5% { top: 55%; left: 42%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  7.5% { top: 49%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  10% { top: 38%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  12.5% { top: 28%; left: 39%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  13.3% { top: 25.5%; left: 33%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  14%, 100% { top: 25.5%; left: 33%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

/* 15-31: customer follow-up enters reception, circles left of the sofa, then enters meeting. */
@keyframes hub-office-route-customer-meeting-v243 {
  0%, 15% { top: 70%; left: 50%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  16% { top: 70%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  18.5% { top: 66%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  21% { top: 61%; left: 46%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  23.5% { top: 56%; left: 42%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  26% { top: 49%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  28.5% { top: 37%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  30% { top: 29%; left: 40%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  30.5% { top: 23%; left: 41%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  31%, 100% { top: 23%; left: 41%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

/* 32-59: graphic -> production through both doors and around the front of the central sofa. */
@keyframes hub-office-route-graphic-production-v243 {
  0%, 32% { top: 25.5%; left: 33%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  33% { top: 25.5%; left: 33%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  35% { top: 28%; left: 39%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  38% { top: 38%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  41% { top: 49%; left: 39.5%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  44% { top: 56%; left: 42%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  47% { top: 61%; left: 46%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  49% { top: 63%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  51% { top: 61%; left: 54%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  54% { top: 56%; left: 58%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  56% { top: 49%; left: 61%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  57.5% { top: 37%; left: 62%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  58% { top: 28%; left: 62%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  58.5% { top: 25.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  59%, 100% { top: 25.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

/* 60-75: production -> shipping through the production door and right lobby lane. */
@keyframes hub-office-route-production-shipping-v243 {
  0%, 60% { top: 25.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  61% { top: 25.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  63% { top: 28%; left: 62%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  66% { top: 37%; left: 62.3%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  69% { top: 49%; left: 62.1%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  72% { top: 58%; left: 64%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  74% { top: 60.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  75%, 100% { top: 60.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

/* 76-91: shipping -> delivered through the shipping door and the main exit. */
@keyframes hub-office-route-shipping-delivery-v243 {
  0%, 76% { top: 60.5%; left: 67%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
  77% { top: 60.5%; left: 67%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  79% { top: 58%; left: 64%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  82% { top: 59.5%; left: 60%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  85% { top: 64%; left: 56%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  87% { top: 67%; left: 51%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  88% { top: 70%; left: 50%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  89% { top: 79%; left: 50.3%; opacity: 1; transform: translate(-50%, -100%) scale(1); }
  90% { top: 89%; left: 50.8%; opacity: 1; transform: translate(-50%, -100%) scale(.98); }
  91%, 100% { top: 89%; left: 50.8%; opacity: 0; transform: translate(-50%, -100%) scale(.94); }
}

@keyframes hub-office-face-revenue-graphic-v243 {
  0%, 5% { scale: 1 1; }
  5.01%, 100% { scale: -1 1; }
}

@keyframes hub-office-face-customer-meeting-v243 {
  0%, 28.5% { scale: -1 1; }
  28.51%, 100% { scale: 1 1; }
}

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

@keyframes hub-office-face-production-shipping-v243 {
  0%, 63% { scale: -1 1; }
  63.01%, 100% { scale: 1 1; }
}

@keyframes hub-office-face-shipping-delivery-v243 {
  0%, 88% { scale: -1 1; }
  88.01%, 100% { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .hub-office-simulation-v235 .hub-office-courier-v235,
  .hub-office-simulation-v235 .hub-office-courier-v235 .hub-office-courier-shell-v235,
  .hub-office-simulation-v235 .hub-office-courier-v235 .hub-office-speech-v235 {
    animation: none !important;
  }

  .hub-office-simulation-v235 .hub-office-courier-v235[data-work-state="active"] {
    opacity: 1;
    transform: translate(-50%, -100%);
  }

  .hub-office-simulation-v235 .hub-office-courier-shell-v235 {
    scale: 1 1;
  }
}