/* Motion is progressive enhancement: visible content, immediate controls,
   brief feedback. No perpetual motion, page entrances, or scroll hijacking. */
:root {
  --motion-feedback: 140ms;
  --motion-state: 200ms;
  --motion-arrive: cubic-bezier(.16, 1, .3, 1);
}

.site-header .nav-disclosure > .icon,
.site-mobile-nav summary > .icon {
  transition: transform var(--motion-state) var(--motion-arrive);
}
.site-header .nav-disclosure[aria-expanded="true"] > .icon {
  transform: rotate(-90deg);
}
.site-mobile-nav details[open] > summary > .icon {
  transform: rotate(45deg);
}

/* Copied is a persistent state, not a transient animation-only message. */
.command-line [data-copy][data-copied="true"] {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

@media (prefers-reduced-motion: no-preference) {
  .site-header .nav-submenu:not([hidden]),
  .site-mobile-nav:not([hidden]) {
    animation: cybee-menu-open var(--motion-state) var(--motion-arrive);
  }
  .site-mobile-nav details[open] > .mobile-product-content,
  .faq-list details[open] > .faq-answer,
  .docs-faq details[open] > .faq-answer,
  .training-topic[open] > .training-topic-content,
  .workspace-topic[open] > .workspace-topic-content,
  .brand-coverage[open] > .scope-explorer {
    animation: cybee-answer-open 180ms var(--motion-arrive);
  }
  .btn, .text-link, .route-links > a,
  .command-line [data-copy] {
    transition-duration: var(--motion-feedback);
    transition-timing-function: var(--motion-arrive);
  }
  .btn > .icon, .text-link > .icon, .route-links > a > .icon {
    transition: transform var(--motion-state) var(--motion-arrive);
  }
  .route-links > a:is(:hover, :focus-visible) > .icon {
    transform: translateX(3px);
  }
  .btn:active:not(:disabled) {
    transform: translateY(1px);
  }
  .dialog[open] > .dialog-inner {
    animation: cybee-answer-open 180ms var(--motion-arrive);
  }
}

@keyframes cybee-menu-open {
  from { opacity: .78; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cybee-answer-open {
  from { opacity: .72; }
  to { opacity: 1; }
}

/* Cancel even in-flight CSS feedback when the tab is no longer visible. */
html[data-motion-hidden] :is(.nav-submenu, .site-mobile-nav,
  .mobile-product-content, .faq-answer, .training-topic-content,
  .workspace-topic-content, .scope-explorer, .dialog-inner) {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-disclosure > .icon,
  .site-mobile-nav summary > .icon,
  .btn, .text-link, .route-links > a,
  .btn > .icon, .text-link > .icon, .route-links > a > .icon {
    transition: none;
  }
}