/* Measured drawing, enabled only after motion.js has installed its controls. */
.motion-control {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #a9886e;
  border-radius: 2px;
  background: #f4f0e8e8;
  color: #644b39;
  font: inherit;
  font-size: 11px;
  line-height: 1.4;
  cursor: pointer;
}

html.data-motion-ready .motion-control:not([hidden]) { display: inline-flex; }
.motion-control:focus-visible { outline: 2px solid #755038; outline-offset: 4px; }
.motion-control:disabled { cursor: default; opacity: .75; }

/* Photographic studies and legacy signals remain still. */
.motion-scene .art-media img,
.motion-scene :is(.signal-path, .signal-node) { animation: none; }

.motion-scene .signal-path {
  fill: none;
  stroke: var(--motion-copper, #aa7956);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3 14;
  vector-effect: non-scaling-stroke;
  opacity: .7;
}

.motion-scene .drafting-drawing .draft-line {
  fill: none;
  stroke: var(--motion-copper, #a16d45);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.motion-scene .drafting-drawing :is(.draft-guide, .draft-structure) {
  animation: none;
}

html.data-motion-ready .motion-scene.motion-draft-started:not(.motion-draft-complete) .drafting-drawing .draft-line:not(.motion-draft-done) {
  animation: rahvs-draft-line 12s linear var(--draft-delay, 0s) 1 both;
  animation-play-state: paused;
}

html.data-motion-ready .motion-scene.motion-draft-started[data-motion-visible="true"]:not(.motion-draft-complete) .drafting-drawing .draft-line:not(.motion-draft-done) {
  animation-play-state: running;
}

html.data-motion-ready .reveal.motion-reveal-pending { opacity: 0; }
html.data-motion-ready .reveal.motion-reveal-entering {
  animation: rahvs-reveal-in 240ms linear both;
}

html.data-motion-ready:is(.motion-paused, .motion-suspended) .motion-scene.motion-draft-started:not(.motion-draft-complete) .drafting-drawing .draft-line:not(.motion-draft-done),
html.data-motion-ready:is(.motion-paused, .motion-suspended) .reveal.motion-reveal-entering {
  animation-play-state: paused;
}

html.motion-reduced .motion-scene .drafting-drawing .draft-line,
html.motion-reduced .reveal.motion-reveal-entering {
  animation: none !important;
}
html.motion-reduced .motion-scene .drafting-drawing .draft-line { stroke-dashoffset: 0; }
html.motion-reduced .reveal.motion-reveal-pending { opacity: 1; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-control:not(:disabled):hover { background: #e9dfd1; }
  html.data-motion-ready .motion-link .icon-arrow { transition: transform 180ms ease; }
  html.data-motion-ready:not(.motion-paused):not(.motion-suspended):not(.motion-reduced) .motion-link:hover .icon-arrow {
    transform: translateX(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-scene .drafting-drawing .draft-line,
  .reveal.motion-reveal-entering { animation: none !important; }
  .motion-scene .drafting-drawing .draft-line { stroke-dashoffset: 0; }
  .reveal.motion-reveal-pending { opacity: 1 !important; }
  .motion-link .icon-arrow { transition: none !important; transform: none !important; }
}

@keyframes rahvs-draft-line {
  0% { stroke-dashoffset: 1; }
  35%, 100% { stroke-dashoffset: 0; }
}
@keyframes rahvs-reveal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}