/* Motion. Every rule here has a reason in docs/05-Animation-Motion-Spec.md.
   Content is fully visible without JS: dimming only applies under .js. */

/* M1: hero signal travelling along the active path */
@keyframes signal-travel {
  0%   { stroke-dashoffset: var(--sig-start); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: var(--sig-end); opacity: 0; }
}
.exchange__signal.is-running {
  animation: signal-travel 1.9s var(--ease-out) forwards;
}

/* M2: "the gap" statements brighten as they reach the reading line */
.js .statements li {
  color: var(--c-text-faint);
  transition: color var(--dur-3) var(--ease-out);
}
.js .statements li.is-lit { color: var(--c-text); }
.js .statements li:nth-child(3).is-lit { color: var(--c-text-muted); }

/* M6: menu panel */
.menu-panel:not([hidden]) { animation: panel-in var(--dur-2) var(--ease-out); }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .exchange__signal { display: none; }
  .js .statements li { color: var(--c-text); }
  .js .statements li:nth-child(3) { color: var(--c-text-muted); }
  .btn:active { transform: none; }
  .btn:hover .arrow, .link-arrow:hover .arrow, .index-row:hover .arrow { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}