/* Audax Motion System — source: Motion Design Guide, pp. 5–26. */
:root {
  --motion-micro: 220ms;
  --motion-state: 400ms;
  --motion-editorial: 700ms;
  --motion-narrative: 1100ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.hero h1 .headline-line {
  display: block;
  color: inherit;
}
.audax-signal {
  display: block;
  width: 240px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  pointer-events: none;
}
.hero-signal {
  margin: 18px 0 -8px;
}
.signal-track {
  stroke: #738491;
  opacity: 0.35;
}
.signal-flow {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero-signal circle {
  fill: var(--cyan);
  stroke: none;
}
.closing-signal {
  grid-column: 1 / -1;
  margin-bottom: -20px;
}
.button {
  position: relative;
}
.button::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--cyan);
  opacity: 0;
  transform: scaleX(0.92);
  transition:
    opacity var(--motion-micro),
    transform var(--motion-micro) var(--motion-ease);
  pointer-events: none;
  border-radius: 12px;
}
.button:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: scaleX(1);
}
.service-list article:hover {
  background: none;
}
.service-title {
  position: relative;
}
.service-list article:is(:hover, :focus-within) .flow-trace {
  stroke: var(--cyan);
}
.service-list .flow-trace {
  stroke: #8297a8;
  transition: stroke var(--motion-micro);
}
.method-tabs {
  position: relative;
  border: 0;
  padding-bottom: 0;
  column-gap: 16px;
}
.method-tabs::before,
.method-tabs::after {
  content: none;
}
.method-tabs::after {
  background: var(--cyan);
  transform: scaleX(var(--method-progress, 0));
  transform-origin: left;
  transition: transform 450ms var(--motion-ease);
}
.method .method-tabs button {
  position: relative;
  padding: 16px 10px;
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 2px solid rgba(246, 247, 249, 0.18);
  background: none;
  border-radius: 6px 6px 0 0;
  transition: color var(--motion-micro), background-color var(--motion-micro), box-shadow var(--motion-micro);
}
.method .method-tabs button:is(:hover, :focus-visible) {
  background: rgba(246, 247, 249, 0.045);
  box-shadow: none;
}
.method .method-tabs button[aria-selected="true"] {
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.045);
  border-bottom-color: var(--cyan);
  box-shadow: none;
}
.method-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  margin-right: 0;
  flex-shrink: 0;
}
.method .method-tabs button > span {
  margin: 0 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.method-tabs button::after {
  content: none;
  position: absolute;
  bottom: -16px;
  left: 0;
  width: 13px;
  height: 13px;
  background: #15212e;
  border: 1px solid #738491;
  z-index: 1;
  transition:
    border-color var(--motion-micro),
    background var(--motion-micro);
}
.method-tabs button[aria-selected="true"]::after {
  border-color: var(--cyan);
  background: var(--cyan);
}
.method-tabs button[data-complete="true"]::after {
  border-color: var(--cyan);
}
.method-system {
  padding-top: 24px;
}
.method-visual {
  max-width: 660px;
  margin: auto;
}
.system-diagram {
  width: 100%;
  display: block;
  overflow: visible;
  color: #657889;
}
.diagram-grid {
  opacity: 0.1;
}
.diagram-route,
.diagram-return,
.diagram-redundant,
.diagram-signal {
  fill: none;
  stroke: #8297a8;
  stroke-width: 1.5;
  transition: opacity 600ms var(--motion-ease);
}
.diagram-return {
  opacity: 0;
}
.diagram-redundant {
  opacity: 0.2;
}
.diagram-signal {
  stroke: var(--cyan);
  stroke-dasharray: 1;
}
.system-node {
  transition: transform 600ms var(--motion-ease);
}
.system-node rect {
  fill: var(--graphite);
  stroke: #94a7b7;
  stroke-width: 1.5;
  transition:
    stroke var(--motion-micro),
    fill var(--motion-micro);
}
.system-node circle {
  fill: #94a7b7;
}
.node-0 {
  transform: translate(90px, 110px);
}
.node-1 {
  transform: translate(225px, 110px);
}
.node-2 {
  transform: translate(360px, 65px);
}
.node-3 {
  transform: translate(510px, 65px);
}
[data-stage="0"] .node-2 rect {
  stroke: var(--cyan);
}
[data-stage="1"] .diagram-signal {
  stroke: #94a7b7;
}
.method-system:is([data-stage="2"], [data-stage="3"]) .system-node rect {
  stroke: var(--cyan);
  fill: rgba(0, 229, 255, 0.16);
}
.method-system:is([data-stage="2"], [data-stage="3"]) .system-node circle {
  fill: var(--cyan);
}
.method-system:not([data-stage="0"]) .node-0 {
  transform: translate(90px, 95px);
}
.method-system:not([data-stage="0"]) .node-1 {
  transform: translate(225px, 95px);
}
.method-system:not([data-stage="0"]) .node-2 {
  transform: translate(360px, 95px);
}
.method-system:not([data-stage="0"]) .node-3 {
  transform: translate(510px, 95px);
}
.method-system:not([data-stage="0"]) .diagram-redundant {
  opacity: 0;
}
[data-stage="3"] .diagram-return {
  opacity: 0.65;
}
.diagram-labels {
  display: grid;
  grid-template-columns: 15fr 22.5fr 22.5fr 25fr 15fr;
  text-align: center;
  color: #b7c4d0;
  font-size: 12px;
}
.diagram-labels span {
  grid-row: 1;
  transform: translateX(-50%);
  justify-self: start;
}
.diagram-labels span:nth-child(1) { grid-column: 2; }
.diagram-labels span:nth-child(2) { grid-column: 3; }
.diagram-labels span:nth-child(3) { grid-column: 4; }
.diagram-labels span:nth-child(4) { grid-column: 5; }
.method-status {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  color: #b7c4d0;
  font-size: 13px;
}
.method-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.method-panels [role="tabpanel"] {
  min-height: 230px;
  padding-top: 32px;
  gap: 64px;
}
.method .method-output {
  padding-left: 28px;
  border-left-color: rgba(246, 247, 249, 0.18);
}
.principles span {
  opacity: 1;
  transition: transform var(--motion-micro) var(--motion-ease);
}
.service-list article:is(:hover, :focus-within) .service-title h3 a {
  color: var(--cyan);
  text-decoration-color: var(--cyan);
}
.service-list article:is(:hover, :focus-within) > a {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(0, 229, 255, 0.08);
}
.service-list article:is(:hover, :focus-within) > a .arrow {
  transform: translateX(2px);
}
.flow-glyph {
  display: block;
  width: 110px;
  height: 30px;
  margin: 0 0 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  color: #647482;
}
.flow-glyph circle {
  fill: var(--paper);
}
.challenge-list .flow-glyph circle {
  fill: var(--cyan);
}
.flow-glyph .flow-trace {
  stroke-dasharray: 1;
  stroke: currentColor;
}
.service-list .flow-glyph {
  margin-top: 16px;
  margin-bottom: 0;
}
.service-list article:is(:hover, :focus-within) .flow-glyph {
  color: var(--cyan);
}
.about .audax-signal {
  margin-top: 35px;
}
@keyframes signal-pass {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes editorial-mask {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(10px);
  }
  to {
    clip-path: inset(0);
    transform: none;
  }
}
@media (max-width: 760px) {
  .hero-signal {
    width: 180px;
  }
  .about-statement {
    flex-wrap: wrap;
    min-width: 0;
  }
  .about .audax-signal {
    flex-basis: 100%;
    width: 180px;
    max-width: 100%;
    margin-top: 0;
  }
  .method-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    padding-bottom: 0;
    gap: 8px 12px;
  }
  .method-tabs::before,
  .method-tabs::after {
    left: 6px;
    top: 27px;
    bottom: 27px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .method-tabs::after {
    transform: scaleY(var(--method-progress, 0));
    transform-origin: top;
  }
  .method .method-tabs button {
    padding: 12px 4px;
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    min-height: 50px;
  }
  .method-tabs button > span {
    margin: 0;
  }
  .method-tabs button::after {
    left: -28px;
    bottom: auto;
    top: calc(50% - 7px);
  }
  .method-panels [role="tabpanel"] {
    min-height: 370px;
    padding-top: 26px;
    gap: 24px;
  }
  .method .method-output {
    padding-left: 16px;
    border-left-color: rgba(246, 247, 249, 0.18);
  }
  .method-system { padding-top: 16px; }
  .method-icon { width: 16px; height: 16px; }
  .method .section-heading { margin-bottom: 28px; }
  .diagram-labels {
    font-size: 10px;
  }
  .flow-glyph {
    margin: 0 0 12px;
  }
  .closing-signal {
    margin-bottom: -20px;
    width: 180px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation: none;
    transition: none;
  }
  .principles.editorial-active span {
    opacity: 1;
    transform: none;
  }
}