/* BuzOps V3 motion and global accessibility refinements. */

:root {
  /* Product exports use lighter neutrals for dense app chrome. Marketing text
     needs stronger contrast on white and the pale canvas. */
  --bz-ink-400: #687386;
  --bz-ink-500: #647083;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

html {
  scroll-padding-top: calc(var(--bz-header-height) + 4rem);
}

.bz-skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  border-radius: var(--bz-radius-md);
  background: var(--bz-ink-950);
  color: var(--bz-white);
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition: transform var(--bz-transition);
}

.bz-skip-link:focus {
  transform: translateY(0);
}

#content:focus {
  outline: none;
}

html.js .is-reveal-ready {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 520ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.js .is-reveal-ready.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Product cyan stays the data and illustration color. Text-bearing controls
   use the next darker step so white labels meet normal-text AA. */
.bz-btn--primary {
  background: var(--bz-cyan-600);
  color: var(--bz-white);
}

.bz-btn--primary:hover {
  background: var(--bz-cyan-700);
}

/* Brand orange carries dark ink rather than low-contrast white. */
.bz-btn--orange {
  background: var(--bz-orange-500);
  color: var(--bz-ink-950);
}

.bz-btn--orange:hover {
  background: var(--bz-orange-400);
}

.bz-product-sidebar span[aria-current="page"],
.bz-callout__icon {
  background: var(--bz-cyan-600);
}

/* Product frames stay light surfaces even when nested inside a dark story
   band. Restore their local text colors after the broad dark-section rules. */
.bz-section--dark .bz-product-frame h1,
.bz-section--dark .bz-product-frame h2,
.bz-section--dark .bz-product-frame h3,
.bz-section--dark .bz-product-frame h4 {
  color: var(--bz-ink-950);
}

.bz-section--dark .bz-product-frame p {
  color: var(--bz-ink-600);
}

/* Swatches are authored with semantic spans inside buttons. Explicit block
   formatting preserves their intended height and clickable surface. */
.bz-swatch,
.bz-swatch__color,
.bz-swatch__meta {
  display: block;
}

/* Compact text links still receive a practical pointer and touch surface. */
.bz-announcement a,
.bz-footer__links a,
.bz-footer__bottom a,
.bz-login-note a {
  min-height: 1.75rem;
  align-items: center;
}

.bz-footer__links a,
.bz-footer__bottom a,
.bz-login-note a {
  display: inline-flex;
}

/* Homepage copy without a component class inherits a darker operational ink
   on light surfaces. Dark operator copy is restored below. */
body main p:not([class]),
body main li:not([class]) {
  color: var(--bz-ink-700);
}

body .home-operator p:not([class]),
body .home-operator li:not([class]),
body .home-operator__checklist span {
  color: #dce8ef;
}

/* Initials are information, not decoration. Dark ink stays legible across the
   light cyan, green, amber, and violet avatar fills used in product previews. */
body .home-member-row__avatar {
  color: var(--bz-ink-950);
}

/* Keep the operator quote on a predictably dark field so its small attribution
   copy is readable even when decorative cyan and orange glows are present. */
body .home-operator__manifesto {
  background: linear-gradient(145deg, #10294a 0%, #07182f 100%);
}

body .home-operator__manifesto p {
  color: #e6eef3;
}

@media (max-width: 60rem) {
  /* The off-canvas drawer is removed from pointer and visual interaction while
     closed. JavaScript also applies inert so keyboard and assistive technology
     state match the visual state. */
  .bz-global-nav {
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 220ms;
  }

  body[data-nav-open="true"] .bz-global-nav {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js .is-reveal-ready {
    opacity: 1;
    transform: none;
  }

  .bz-skip-link,
  .bz-global-nav {
    transition: none;
  }
}