/* hubApps product previews · arrival motion.
   hubapps-motion.js sets data-motion="play" on a preview panel each time it becomes visible
   (panel scrolled into view, tab changed, rail slide activated) and numbers the parts inside
   it as --mi. The keyframes use the individual translate and scale properties, which compose with
   any transform the product styles already set (a transform keyframe replaced them).
   Nothing loops; reduced motion gets none of it. */
@media (prefers-reduced-motion: no-preference) {
  html.hubapps-motion [data-motion="play"] :is(
    .whd-heading, .whd-metric, .whd-project, .whd-footer, .wh-calendar-toolbar, .wh-calendar-day small, .wh-calendar-legend,
    .product-panel-content > .product-ui-kicker, .product-panel-content > h4,
    .product-connection-node, .product-connection-summary > *, .product-flow-node, .product-flow-arrow,
    .ps-panel-intro, .ps-shares-toolbar, .ps-share-filters, .ps-share-row, .ps-link-line, .ps-version-row, .ps-ui-heading,
    .ps-activity-legend, .ps-activity-row, .ps-connect-hub, .ps-connect-nodes > div, .ps-access-window > *,
    .ps-agent-invite, .ps-agent-space-heading, .ps-agent-members > span, .ps-agent-mailbox > *,
    .gmb-hubai-panel-heading, .gmb-hubai-tags > span, .gmb-hubai-source, .gmb-hubai-improve-item, .gmb-hubai-steps > li,
    .gmb-hubai-transfer-node, .gmb-hubai-result
  ) {
    animation: hm-rise .56s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--mi, 0) * var(--hm-step, 70ms) + var(--hm-lead, 60ms));
  }

  /* A conversation arrives one message at a time, the assistant a beat later than the customer. */
  html.hubapps-motion [data-motion="play"] .gmb-hubai-message {
    --hm-step: 520ms;
    animation: hm-message .6s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(var(--mi, 0) * var(--hm-step) + 180ms);
    transform-origin: 0 100%;
  }
  html.hubapps-motion [data-motion="play"] .gmb-hubai-assistant { transform-origin: 100% 100%; }

  /* Bars and lines grow from their own start, so the numbers they show read as filling up. */
  html.hubapps-motion [data-motion="play"] .whd-progress i {
    transform-origin: 0 50%;
    animation: hm-grow-x .9s cubic-bezier(.3, .7, .1, 1) both;
    animation-delay: calc(var(--mi, 0) * 90ms + 260ms);
  }
  html.hubapps-motion [data-motion="play"] .ps-activity-chart i {
    transform-origin: 50% 100%;
    animation: hm-grow-y .7s cubic-bezier(.3, .7, .1, 1) both;
    animation-delay: calc(var(--mi, 0) * 45ms + 200ms);
  }
  html.hubapps-motion [data-motion="play"] :is(.product-connection-line, .gmb-hubai-transfer-line, .ps-connect-lines) {
    transform-origin: 0 50%;
    animation: hm-grow-x .8s cubic-bezier(.3, .7, .1, 1) both;
    animation-delay: 320ms;
  }

  /* Status marks land last with a small settle. */
  html.hubapps-motion [data-motion="play"] :is(.ps-active-badge, .ps-revoked-badge, .ps-access-badge, .ps-version-tag, .product-ui-done, .whd-avatars i, .ps-ui-badge) {
    animation: hm-pop .42s cubic-bezier(.2, 1.4, .4, 1) both;
    animation-delay: calc(var(--mi, 0) * 60ms + 420ms);
  }
  html.hubapps-motion [data-motion="play"] .gmb-hubai-result i { animation: hm-pulse 1.4s ease-out .9s 2 both; }
}

@keyframes hm-rise {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes hm-message {
  0% { opacity: 0; translate: 0 12px; scale: .96; }
  60% { opacity: 1; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes hm-grow-x {
  from { scale: 0 1; }
  to { scale: 1 1; }
}
@keyframes hm-grow-y {
  from { scale: 1 .08; opacity: .4; }
  to { scale: 1 1; opacity: 1; }
}
@keyframes hm-pop {
  from { opacity: 0; scale: .82; }
  to { opacity: 1; scale: 1; }
}
@keyframes hm-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  100% { box-shadow: 0 0 0 10px transparent; }
}