/* Selection motion supplements the fully visible static SVG. These rules never
   hide a diagram or its copy while waiting for JavaScript or an observer. */
.atelier .at-stage.at-motion-ready .at-svg {
  transform-origin: center;
}
.atelier .at-stage.at-motion-ready [data-layer] {
  transition: opacity 260ms cubic-bezier(.22,.68,.2,1);
}
.atelier .at-stage:not(.frtb-instrument) [data-motion-dot] {
  opacity: 0;
  pointer-events: none;
}
.atelier .at-stage.at-motion-ready .at-controls button {
  transition: color 160ms ease, background-color 160ms ease;
}
.atelier .at-stage.at-motion-ready .at-controls button:focus-visible {
  outline: 2px solid #3045b5;
  outline-offset: 3px;
}
.atelier .at-stage.at-motion-ready .at-readout {
  overflow-wrap: anywhere;
}
.atelier .at-stage.at-motion-ready[data-motion-paused=true] [data-layer],
.atelier .at-stage.at-motion-ready[data-motion-paused=true] .at-controls button {
  transition: none !important;
}
/* Labels outside the focused layer remain visible in the full desktop view;
   on small screens the established focus frames preserve readable detail. */
@media (max-width:760px) {
  .atelier .at-stage.at-motion-ready.is-focused .at-svg {
    contain: paint;
  }
}
@media (prefers-reduced-motion:reduce) {
  .atelier .at-stage.at-motion-ready [data-layer],
  .atelier .at-stage.at-motion-ready .at-controls button {
    transition: none !important;
  }
}