/* Signals move through the organisation; source cards stay attached to their connections. */
:root {
  --motion-quick: 160ms;
  --motion-settle: 280ms;
  --motion-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

.org-stage.is-changing .wire,
.org-stage.is-changing .decision-panel h2,
.org-stage.is-changing .ocula-hub img {
  animation: none;
}

/* Node movement would separate the cards from their source connections. */
.org-stage[data-priority] .evidence-node,
.org-stage[data-priority] .memory-node {
  transform: none;
  transition:
    border-color var(--motion-quick) ease,
    box-shadow var(--motion-settle) var(--motion-ease),
    background-color var(--motion-settle) ease;
}
.org-stage .evidence-node:focus-visible,
.org-stage .memory-node:focus-visible {
  box-shadow: 0 7px 20px -7px #31413c38;
  border-color: #8c9b96;
}
.node-open {
  transition: transform var(--motion-quick) var(--motion-ease);
}
.evidence-node:focus-visible .node-open,
.memory-node:focus-visible .node-open {
  transform: translate(2px, -2px);
}
.wire {
  transition:
    stroke var(--motion-settle) ease,
    stroke-width var(--motion-quick) ease,
    opacity var(--motion-quick) ease;
}
.org-stage[data-inspect='security'] .wire-security,
.org-stage[data-inspect='capacity'] .wire-platform,
.org-stage[data-inspect='customer'] .wire-customer,
.org-stage[data-inspect='memory'] .wire-memory {
  stroke-width: 3;
}
.motion-trace {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* One continuous selection, rather than two buttons flashing on and off. */
.motion-tracked {
  position: relative;
  isolation: isolate;
}
.motion-tracked::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: var(--selection-width);
  height: var(--selection-height);
  transform: translate(var(--selection-x), var(--selection-y));
  border-radius: var(--selection-radius, 5px);
  background: var(--paper);
  box-shadow: 0 1px 4px #20302c19;
  pointer-events: none;
  transition:
    transform var(--motion-settle) var(--motion-ease),
    width var(--motion-settle) var(--motion-ease),
    height var(--motion-settle) var(--motion-ease);
}
.priority-switch.motion-tracked button[aria-pressed='true'] {
  background: transparent;
  box-shadow: none;
}
.priority-switch button {
  transition: color var(--motion-quick) ease;
}

.button,
.text-link,
.challenge-button,
.stage-footer button,
.dialog-close,
.nav-links a,
.faq-list summary,
.optional-context summary {
  transition:
    color var(--motion-quick) ease,
    background-color var(--motion-quick) ease,
    transform var(--motion-quick) var(--motion-ease),
    box-shadow var(--motion-quick) ease;
}
.button > span[aria-hidden],
.text-link > span[aria-hidden],
.challenge-button > span[aria-hidden] {
  display: inline-block;
  transition: transform var(--motion-quick) var(--motion-ease);
}
.button:not(:disabled):active {
  transform: translateY(1px);
}
.button-orange:not(:disabled):active {
  box-shadow: 0 1px 0 #9e321e;
}
.button:disabled {
  transform: none;
}
.button:focus-visible > span[aria-hidden],
.text-link:focus-visible > span[aria-hidden] {
  transform: translateX(3px);
}
.challenge-button[aria-expanded='true'] > span[aria-hidden] {
  transform: rotate(45deg);
}
.menu-button span {
  transition: transform var(--motion-quick) var(--motion-ease);
}
.menu-button[aria-expanded='true'] span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.menu-button[aria-expanded='true'] span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}
.optional-context summary > span > span {
  display: inline-block;
  transition: transform var(--motion-quick) var(--motion-ease);
}
.optional-context[open] summary > span > span {
  transform: rotate(45deg);
}
.intake-card input,
.intake-card textarea {
  transition:
    border-color var(--motion-quick) ease,
    box-shadow var(--motion-quick) ease,
    background-color var(--motion-quick) ease;
}
.intake-card input:not([type='radio']):focus-visible,
.intake-card textarea:focus-visible {
  border-color: var(--coral-dark);
  box-shadow: 0 0 0 4px #f3614312;
}

.learning-section.learning-in-view::after {
  animation: learning-spark-arrive 1600ms var(--motion-ease) both;
}
@keyframes learning-spark-arrive {
  from {
    transform: rotate(-35deg) scale(0.92);
    opacity: 0.08;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 0.2;
  }
}

@media (hover: hover) and (pointer: fine) {
  .evidence-node:hover .node-open,
  .memory-node:hover .node-open {
    transform: translate(2px, -2px);
  }
  .button:not(:disabled):hover > span[aria-hidden],
  .text-link:hover > span[aria-hidden] {
    transform: translateX(3px);
  }
  .dialog-close:hover {
    color: var(--ink);
    background: #e6e9e0;
  }
  .faq-list summary:hover,
  .optional-context summary:hover {
    color: var(--coral-dark);
  }
}
@media (hover: none), (pointer: coarse) {
  .button:not(:active):hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .motion-trace {
    display: none;
  }
  [data-motion-opt-in] .motion-trace[data-motion-group='ambient'] {
    display: block;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}