/* Chengxi motion and interaction polish — v39.8.11 */
:root {
  --cx-motion-ease-out: cubic-bezier(.23, 1, .32, 1);
  --cx-motion-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --cx-motion-popover: 180ms;
  --cx-motion-press: 140ms;
  --cx-motion-reveal: 520ms;
  --cx-motion-stagger: 50ms;
}

/* Scroll progress is composited by the page script instead of growing in layout. */
.progress,
.cx-snap-progress > i,
.cx-snap-progress i {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* Keep permanent layer promotion off the large consultant canvas. */
.network-canvas {
  will-change: auto !important;
}

.network-viewport:is(.dragging, .settling) .network-canvas {
  will-change: transform !important;
}

.network-viewport:is(.dragging, .settling) .network-node {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.network-viewport:is(.dragging, .settling) .network-node:not(.core) {
  background: rgba(20, 27, 40, .92) !important;
}

/* Replace legacy transition-all shorthands on the components that move. */
:where(
  .card,
  .logic-card,
  .asset-card,
  .product,
  .step,
  .price-card,
  .mini-card,
  .mentor-card,
  .show-card,
  .flow-card,
  .journey-step,
  .advisor-role-card,
  .architect-route-card,
  .method-step,
  .cx-detail-btn
) {
  transition:
    transform var(--cx-motion-popover) var(--cx-motion-ease-out),
    color var(--cx-motion-popover) var(--cx-motion-ease-out),
    background-color var(--cx-motion-popover) var(--cx-motion-ease-out),
    border-color var(--cx-motion-popover) var(--cx-motion-ease-out),
    box-shadow var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
}

.consultant-row {
  transition:
    color var(--cx-motion-popover) var(--cx-motion-ease-out),
    background-color var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
}

.consultant-row:hover {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.network-node {
  transition:
    transform var(--cx-motion-popover) var(--cx-motion-ease-out),
    opacity var(--cx-motion-popover) var(--cx-motion-ease-out),
    background-color var(--cx-motion-popover) var(--cx-motion-ease-out),
    border-color var(--cx-motion-popover) var(--cx-motion-ease-out),
    box-shadow var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
}

.network-line {
  transition:
    opacity var(--cx-motion-popover) var(--cx-motion-ease-out),
    stroke var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
}

.top-btn {
  transition:
    opacity var(--cx-motion-popover) var(--cx-motion-ease-out),
    transform var(--cx-motion-popover) var(--cx-motion-ease-out),
    background-color var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
}

/* Explicit controls only: never apply press transforms to positioned network nodes. */
:where(
  .btn,
  .nav-cta,
  .nav-toggle,
  .nav-drop-btn,
  .tab,
  .cx-tab,
  .persona-tab,
  .chip,
  .price-tab,
  .pricing-tab,
  .layer-tab,
  .workshop-filter,
  .acc-btn,
  .mentor-link-btn,
  .network-toolbar button,
  .network-actions button,
  .network-actions a,
  .cx-mobile-dock button,
  .cx-mobile-dock a,
  .cx-overview-toggle-v395,
  .cx-price-toggle-v395,
  .cx-persona-detail-toggle-v396,
  .top-btn,
  .cx-detail-btn
) {
  transition:
    transform var(--cx-motion-press) var(--cx-motion-ease-out),
    color var(--cx-motion-popover) var(--cx-motion-ease-out),
    background-color var(--cx-motion-popover) var(--cx-motion-ease-out),
    border-color var(--cx-motion-popover) var(--cx-motion-ease-out),
    box-shadow var(--cx-motion-popover) var(--cx-motion-ease-out),
    opacity var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  :where(
    .btn,
    .nav-cta,
    .nav-toggle,
    .nav-drop-btn,
    .tab,
    .cx-tab,
    .persona-tab,
    .chip,
    .price-tab,
    .pricing-tab,
    .layer-tab,
    .workshop-filter,
    .acc-btn,
    .mentor-link-btn,
    .network-toolbar button,
    .network-actions button,
    .network-actions a,
    .cx-mobile-dock button,
    .cx-mobile-dock a,
    .cx-overview-toggle-v395,
    .cx-price-toggle-v395,
    .cx-persona-detail-toggle-v396,
    .top-btn,
    .cx-detail-btn
  ):active {
    transform: scale(.97) !important;
  }
}

:where(
  .btn,
  .nav-cta,
  .nav-toggle,
  .nav-drop-btn,
  .tab,
  .cx-tab,
  .persona-tab,
  .chip,
  .price-tab,
  .pricing-tab,
  .layer-tab,
  .workshop-filter,
  .acc-btn,
  .mentor-link-btn,
  .network-toolbar button,
  .network-actions button,
  .network-actions a,
  .cx-overview-toggle-v395,
  .cx-price-toggle-v395,
  .cx-persona-detail-toggle-v396,
  .top-btn,
  .cx-detail-btn
):focus-visible {
  outline: 2px solid var(--blue, #06f) !important;
  outline-offset: 3px !important;
}

/* Service tabs enter with an interruptible transition, replacing fadeUp keyframes. */
.tab-panel {
  animation: none !important;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--cx-motion-popover) var(--cx-motion-ease-out),
    transform var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
}

.tab-panel.active {
  opacity: 1;
  transform: none;
}

@starting-style {
  .tab-panel.active {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* The open height remains measured by the existing page script. */
.acc-body {
  opacity: 0;
  transition:
    max-height 200ms var(--cx-motion-ease-out),
    opacity 200ms var(--cx-motion-ease-out) !important;
}

.acc.active .acc-body {
  opacity: 1;
}

details.module,
details.module .summary-arrow {
  transition:
    transform 200ms var(--cx-motion-ease-out),
    color 200ms var(--cx-motion-ease-out),
    background-color 200ms var(--cx-motion-ease-out),
    border-color 200ms var(--cx-motion-ease-out),
    box-shadow 200ms var(--cx-motion-ease-out) !important;
}

@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  details.module::details-content {
    block-size: 0;
    opacity: 0;
    overflow: clip;
    transition:
      block-size 200ms var(--cx-motion-ease-out),
      opacity 160ms linear;
  }

  details.module[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

/* Reveal timing is deliberate on larger canvases; mobile keeps the existing calm layout. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .reveal {
    transition:
      opacity var(--cx-motion-reveal) var(--cx-motion-ease-out),
      transform var(--cx-motion-reveal) var(--cx-motion-ease-out) !important;
    transition-delay: var(--cx-reveal-delay, 0ms) !important;
  }
}

/* Let the mobile menu animate out instead of disappearing before its exit completes. */
@media (max-width: 1020px) {
  .nav-links {
    display: flex !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate3d(10px, -8px, 0) scale(.985) !important;
    transform-origin: right top !important;
    transition:
      opacity var(--cx-motion-popover) var(--cx-motion-ease-out),
      transform var(--cx-motion-popover) var(--cx-motion-ease-out),
      visibility 0s linear var(--cx-motion-popover) !important;
  }

  body.cx-mobile-nav-open .nav-links,
  .nav-links.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition-delay: 0s, 0s, 0s !important;
  }

  .cx-mobile-nav-backdrop {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity var(--cx-motion-popover) var(--cx-motion-ease-out),
      visibility 0s linear var(--cx-motion-popover) !important;
  }

  body.cx-mobile-nav-open .cx-mobile-nav-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition-delay: 0s, 0s !important;
  }

  .nav-toggle span {
    transition:
      transform var(--cx-motion-popover) var(--cx-motion-ease-out),
      opacity var(--cx-motion-popover) var(--cx-motion-ease-out) !important;
  }
}

/* Touch screens should not retain desktop lift or sweep states after a tap. */
@media (hover: none), (pointer: coarse) {
  :where(
    .card,
    .cx-card,
    .asset-card,
    .pathway-v39-item,
    .journey-step,
    .expert-card,
    .mentor-card,
    .show-card,
    .cx-show-card,
    .showroom-card,
    .advisor-role-card,
    .price-card,
    .mini-card,
    .quote-card,
    .side-card,
    .architect-route-card,
    .flow-card,
    .cx-flow-item,
    .method-step,
    .logic-card,
    .product,
    .step,
    .nav-cta,
    .btn,
    .tab,
    .chip,
    .persona-tab,
    .cx-detail-btn
  ):hover {
    transform: none !important;
  }

  .consultant-row:hover {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .network-node:hover {
    transform: translate(-50%, -50%) !important;
  }

  .card:hover::after {
    opacity: 0 !important;
    transform: translateX(-110%) !important;
  }

  .expert-card:hover::before {
    opacity: .6 !important;
    transform: none !important;
  }

  .architect-route-card:hover::after {
    opacity: 0 !important;
  }

  .mentor-card:hover::after {
    opacity: 0 !important;
    transform: translateY(4px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.show {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .tab-panel,
  .tab-panel.active {
    transform: none !important;
    transition: opacity 150ms linear !important;
  }

  .acc-body,
  details.module,
  details.module .summary-arrow,
  details.module::details-content {
    transition: none !important;
  }

  :where(
    .btn,
    .nav-cta,
    .nav-toggle,
    .nav-drop-btn,
    .tab,
    .cx-tab,
    .persona-tab,
    .chip,
    .price-tab,
    .pricing-tab,
    .layer-tab,
    .workshop-filter,
    .acc-btn,
    .mentor-link-btn,
    .network-toolbar button,
    .network-actions button,
    .network-actions a,
    .cx-mobile-dock button,
    .cx-mobile-dock a,
    .cx-overview-toggle-v395,
    .cx-price-toggle-v395,
    .cx-persona-detail-toggle-v396,
    .top-btn,
    .cx-detail-btn
  ):active {
    opacity: .78 !important;
    transform: none !important;
  }

}

@media (max-width: 1020px) and (prefers-reduced-motion: reduce) {
  .nav-links,
  body.cx-mobile-nav-open .nav-links,
  .nav-links.open {
    transform: none !important;
    transition:
      opacity 150ms linear,
      visibility 0s linear 150ms !important;
  }

  body.cx-mobile-nav-open .nav-links,
  .nav-links.open {
    transition-delay: 0s, 0s !important;
  }

  .cx-mobile-nav-backdrop {
    transition:
      opacity 150ms linear,
      visibility 0s linear 150ms !important;
  }

  body.cx-mobile-nav-open .cx-mobile-nav-backdrop {
    transition-delay: 0s, 0s !important;
  }

  .nav-toggle span {
    transition: opacity 120ms linear !important;
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :where(
    .nav,
    .nav-links,
    .nav-drop-menu,
    .section-card,
    .cx-section-card,
    .network-detail,
    .mentor-card,
    .showroom-card,
    .modal-box,
    .mentor-detail-modal,
    .cx-mobile-dock,
    .network-toolbar,
    .network-node
  ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .nav,
  .nav-links,
  .nav-drop-menu,
  .cx-mobile-dock {
    background: rgba(255, 255, 255, .99) !important;
    border-color: rgba(15, 23, 42, .28) !important;
  }

  .page-instructors .nav,
  .page-instructors .nav-links,
  .page-instructors .nav-drop-menu {
    background: #090d14 !important;
    border-color: rgba(255, 255, 255, .34) !important;
  }

  .network-node:not(.core),
  .network-toolbar {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, .42) !important;
  }
}

@media (forced-colors: active) {
  :where(
    .nav,
    .nav-links,
    .nav-drop-menu,
    .section-card,
    .cx-section-card,
    .card,
    .cx-card,
    .network-node,
    .network-detail,
    .mentor-card,
    .showroom-card,
    .modal-box,
    .mentor-detail-modal,
    .cx-mobile-dock
  ) {
    background: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  :where(a, button, [role="tab"]):focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 3px !important;
  }
}