/* Motion stays separate from content, breathing controls, and deployment. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

.motion-scene {
  --scene-play-state: paused;
}

.motion-scene.is-motion-visible {
  --scene-play-state: running;
}

html.motion-paused .motion-scene,
html.motion-backgrounded .motion-scene {
  --scene-play-state: paused;
}

.motion-preference {
  margin-top: 18px;
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  min-height: 34px;
  background: transparent;
  color: #786759;
  font-size: 11px;
  line-height: 1.5;
}

.motion-toggle-state {
  padding-left: 9px;
  border-left: 1px solid var(--line);
  color: #89634e;
}

.motion-toggle:disabled {
  cursor: default;
}

.motion-toggle:not(:disabled):hover {
  color: var(--accent);
}

.motion-toggle-icon {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 14px;
}

.motion-toggle-icon i {
  width: 2px;
  height: 11px;
  background: currentColor;
  transform-origin: center;
}

.motion-toggle-icon i:nth-child(2) {
  height: 14px;
}

.motion-enabled .experience-card {
  --orbit-radius: 141px;
}

.motion-enabled .orbit-point {
  top: calc(50% - 2.5px);
  left: calc(50% - 2.5px);
  transform: rotate(-45deg) translateX(var(--orbit-radius));
  animation: orbit-travel 28s linear infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .orbit-ring-outer::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid transparent;
  border-top-color: #bea082;
  border-radius: 50%;
  opacity: .55;
  animation: orbit-turn 24s linear infinite reverse;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .orbit[data-phase="idle"] .breath-core::after {
  content: "";
  position: absolute;
  inset: -12px;
  border: 1px solid #b88c69;
  border-radius: 50%;
  animation: idle-breath 6s ease-in-out infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .sensor-drawing > i {
  animation: module-connect 7s var(--motion-ease) infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .sensor-drawing > i:nth-child(2) { animation-delay: .22s; }
.motion-enabled .sensor-drawing > i:nth-child(3) { animation-delay: .44s; }
.motion-enabled .sensor-drawing > i:nth-child(4) { animation-delay: .66s; }

.motion-enabled .studio-drawing > span {
  animation: studio-trace 5s ease-in-out infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .studio-drawing::after {
  transform-origin: left center;
  animation: studio-cursor 5s var(--motion-ease) infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .agent-drawing > span {
  animation: agent-response 6s ease-in-out infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .agent-drawing > i:first-of-type {
  animation: orbit-turn 22s linear infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .waveform {
  overflow: hidden;
}

.motion-enabled .signal-stream {
  animation: signal-flow 12s linear infinite;
  animation-play-state: var(--scene-play-state);
}

.signal-sweep {
  opacity: 0;
  color: #9b765b;
  pointer-events: none;
}

.motion-enabled .signal-sweep {
  animation: signal-scan 6s linear infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .loop-steps article::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d3b6a4;
  transform: scaleX(0);
  transform-origin: left center;
  animation: loop-transfer 9s var(--motion-ease) infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .loop-steps article:nth-child(2)::before { animation-delay: 3s; }
.motion-enabled .loop-steps article:nth-child(3)::before { animation-delay: 6s; }

.motion-enabled .feedback-orb i {
  animation: idle-breath 6s ease-in-out infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .cooperation-art .circle-one {
  animation: shared-orbit 10s ease-in-out infinite;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .cooperation-art .circle-two {
  animation: shared-orbit 10s ease-in-out infinite reverse;
  animation-play-state: var(--scene-play-state);
}

.motion-enabled .button > span[aria-hidden="true"],
.motion-enabled .nav-cta > span,
.motion-enabled .text-button > span {
  display: inline-block;
  transition: transform .4s var(--motion-ease);
}

.motion-enabled .button:hover > span[aria-hidden="true"]:not(.play-symbol),
.motion-enabled .nav-cta:hover > span,
.motion-enabled .text-button:hover > span {
  transform: translate(3px, -3px);
}

.motion-enabled:not(.motion-paused) .main-nav.is-open {
  animation: panel-enter .35s var(--motion-ease) both;
}

html.motion-paused {
  scroll-behavior: auto;
}

html.motion-paused *,
html.motion-paused *::before,
html.motion-paused *::after,
html.motion-backgrounded *,
html.motion-backgrounded *::before,
html.motion-backgrounded *::after {
  animation-play-state: paused !important;
}

html.motion-paused .button,
html.motion-paused .reset-button,
html.motion-paused .button > span,
html.motion-paused .nav-cta > span,
html.motion-paused .text-button > span {
  transition: none;
}

@keyframes orbit-travel {
  from { transform: rotate(-45deg) translateX(var(--orbit-radius)); }
  to { transform: rotate(315deg) translateX(var(--orbit-radius)); }
}

@keyframes orbit-turn {
  to { transform: rotate(360deg); }
}

@keyframes idle-breath {
  0%, 100% { transform: scale(.94); opacity: .28; }
  50% { transform: scale(1.08); opacity: .72; }
}

@keyframes module-connect {
  0%, 62%, 100% { transform: skewY(-11deg) translateY(0); }
  22%, 40% { transform: skewY(-11deg) translateY(-8px); }
}

@keyframes studio-trace {
  0%, 100% { transform: translateX(-3px); opacity: .7; }
  50% { transform: translateX(5px); opacity: 1; }
}

@keyframes studio-cursor {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(60px); }
}

@keyframes agent-response {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(1.05); }
}

@keyframes signal-flow {
  to { transform: translateX(-760px); }
}

@keyframes signal-scan {
  0% { transform: translateX(0); opacity: 0; }
  10%, 85% { opacity: .32; }
  100% { transform: translateX(760px); opacity: 0; }
}

@keyframes loop-transfer {
  0% { transform: scaleX(0); opacity: .25; }
  24%, 33% { transform: scaleX(1); opacity: 1; }
  44%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes shared-orbit {
  0%, 100% { transform: translateX(-7px); }
  50% { transform: translateX(7px); }
}

@keyframes panel-enter {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 1100px) {
  .motion-enabled .experience-card { --orbit-radius: 127.5px; }
}

@media (max-width: 760px) {
  .motion-preference { margin-top: 12px; }
  .motion-toggle { min-height: 38px; }
  .motion-enabled .experience-card { --orbit-radius: 125px; }
}

@media (max-width: 370px) {
  .motion-enabled .experience-card { --orbit-radius: 113px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-enabled .motion-scene *,
  .motion-enabled .motion-scene *::before,
  .motion-enabled .motion-scene *::after {
    animation: none !important;
  }
  .motion-enabled .signal-stream { transform: none; }
  .motion-enabled .signal-sweep { display: none; }
}