/* ASTRAL 3.3.4 · restrained motion across the automatic and professional consoles.
   View entrances run only when app.js changes the workspace view; background refreshes stay still. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes astral-page-enter {
    from { opacity: .55; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes astral-dialog-enter {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes astral-toast-enter {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
  }
  @keyframes astral-backdrop-enter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes astral-constellation-breathe {
    0%, 100% { opacity: .86; }
    50% { opacity: 1; }
  }

  body[data-workspace] .nx-content.is-view-arriving > :not([hidden]):not(dialog) {
    animation: astral-page-enter .42s cubic-bezier(.22,1,.36,1) both;
  }
  body[data-workspace] .nx-content.is-view-arriving > :nth-child(2) { animation-delay: 35ms; }
  body[data-workspace] .nx-content.is-view-arriving > :nth-child(3) { animation-delay: 65ms; }
  body[data-workspace] .nx-content.is-view-arriving > :nth-child(4) { animation-delay: 90ms; }

  body[data-workspace] dialog[open]:not(.login-overlay) {
    animation: astral-dialog-enter .28s cubic-bezier(.22,1,.36,1) both;
  }
  body[data-workspace] dialog[open]:not(.login-overlay)::backdrop {
    animation: astral-backdrop-enter .24s ease-out both;
  }
  body[data-workspace] .toast { animation: astral-toast-enter .3s cubic-bezier(.22,1,.36,1) both; }
  body[data-workspace] .astral-constellation { animation: astral-constellation-breathe 12s ease-in-out infinite; }
  body[data-workspace] .auth-story-copy { animation: astral-page-enter .6s cubic-bezier(.22,1,.36,1) both; }
  body[data-workspace] .auth-entry .login-card { animation: astral-page-enter .55s .08s cubic-bezier(.22,1,.36,1) both; }
}

/* Navigation, tabs and controls use the same short easing curve in every view. */
body[data-workspace] #nav .nav-item {
  transition: color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
body[data-workspace] #nav .nav-item .nav-icon {
  transition: transform .24s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
body[data-workspace] #nav .nav-item.active .nav-icon { opacity: 1; }
body[data-workspace] #nav .nav-item.active::after {
  transform: scale(1);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
body[data-workspace] .console-section-tab {
  position: relative;
  transition: color .2s ease, background-color .2s ease;
}
body[data-workspace] .console-section-tab.is-active { border-bottom-color: transparent; }
body[data-workspace] .console-section-tab::after {
  content: "";
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: -2px;
  background: var(--c-primary);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.22,1,.36,1);
}
body[data-workspace] .console-section-tab.is-active::after { transform: scaleX(1); }
body[data-workspace] :is(.project-tabs,.sig26-tabs,.sig-tabs,.ops-tabs) > button {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body[data-workspace] :is(.nx-icon,.icon-button,.nx-tool,.ui-search-trigger) {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body[data-workspace] :is(.button,.mini-button,.nx-table-action,.nx-inline,.horizon-inline,.console-row-action) {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22,1,.36,1), filter .2s ease;
}
body[data-workspace] :is(.console-metric,.console-card,.project-card,.studio-card,.ops-flow,.network-flow-card,.sig26-card) {
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.22,1,.36,1);
}
body[data-workspace] :is(.console-metric,.console-card,.project-card,.studio-card,.ops-flow,.network-flow-card,.sig26-card):focus-within {
  border-color: var(--c-border-strong) !important;
  box-shadow: inset 0 1px 0 var(--r-edge), var(--r-hover);
}
body[data-workspace] :is(button,a,summary,[role=button]):focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}
body[data-workspace] :is(.console-section-tab,.nav-item):focus-visible {
  outline-offset: -3px;
}
body[data-workspace] :is(.console-start-grid > button,.ui-search-results button,.project-node-choice) {
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body[data-workspace] #nav .nav-item:hover .nav-icon { transform: translateX(2px); }
  body[data-workspace] :is(.console-metric,.console-card,.project-card,.studio-card,.ops-flow,.network-flow-card,.sig26-card):hover {
    border-color: var(--c-border-strong) !important;
    box-shadow: inset 0 1px 0 var(--r-edge), var(--r-hover);
    transform: translateY(-2px);
  }
  body[data-workspace] :is(.nx-icon,.icon-button,.nx-tool):hover:not(:disabled) {
    box-shadow: 0 3px 12px var(--a-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-workspace] .nx-content.is-view-arriving > *,
  body[data-workspace] :is(.console-metric,.console-card,.project-card,.studio-card,.ops-flow,.network-flow-card,.sig26-card),
  body[data-workspace] #nav .nav-item .nav-icon {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}
@media (forced-colors: active) {
  body[data-workspace] .console-section-tab.is-active::after { background: Highlight; }
  body[data-workspace] :is(button,a,summary,[role=button]):focus-visible { outline-color: Highlight; }
}