.topbar-actions { display: flex; align-items: center; gap: 16px; }
.motion-toggle, .workflow-demo button {
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--muted);
  font: 10px var(--mono);
}
[hidden] { display: none !important; }
.motion-toggle:hover, .workflow-demo button:hover { color: var(--amber-text); border-color: var(--amber-text); }
button:disabled { cursor: default; opacity: .65; }
.workflow-demo { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.workflow-demo button { flex: none; color: var(--amber-text); }
.workflow-demo button span { font-size: 15px; vertical-align: middle; margin-right: 4px; }
.workflow-demo p { margin: 0; font: 9px/1.7 var(--mono); color: var(--muted); }
.card, .contact-card { transition: border-color .25s, box-shadow .25s; }
[data-motion=running] body, [data-motion=running] .sidebar,
[data-motion=running] .card, [data-motion=running] .contact-card,
[data-motion=running] #theme-toggle, [data-motion=running] .chips > span {
  transition: background-color .3s, color .3s, border-color .25s, box-shadow .25s, transform .2s;
}
.card:focus-within { border-color: var(--teal-text); }
.projects { position: relative; isolation: isolate; }
.projects::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), var(--soft-amber), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  z-index: -1;
  pointer-events: none;
}
.workflow > div { transition: border-color .3s, transform .3s, box-shadow .3s; }
.workflow .connector::after {
  left: 0;
  width: 6px;
  height: 6px;
  top: -2.5px;
  box-shadow: 0 0 8px var(--teal);
  animation: packet-travel 3.2s ease-in-out infinite paused;
}
.workflow .connector:nth-of-type(2)::after { animation-delay: 1.6s; }
.workflow .workflow-core { animation: core-breathe 3.2s ease-in-out infinite paused; }
.operator-art > img { animation: operator-float 6s ease-in-out infinite paused; }
.orbit-one { animation: orbit-turn 30s linear infinite paused; border-top-color: var(--teal-text); }
.orbit-two { animation: orbit-turn 45s linear infinite reverse paused; }
.orbit-dot {
  left: calc(50% - 5px);
  top: calc(50% - 5px);
  animation: satellite-orbit 16s linear infinite paused;
}
[data-motion=running] .in-view .workflow .connector::after,
[data-motion=running] .in-view .workflow .workflow-core,
[data-motion=running] .in-view .operator-art > img,
[data-motion=running] .in-view .orbit,
[data-motion=running] .in-view .orbit-dot { animation-play-state: running; }
.workflow[data-step] > div { animation: none; }
.workflow[data-step=order] > div:first-child,
.workflow[data-step=connect] > .workflow-core,
.workflow[data-step=fulfil] > div:last-child,
.workflow[data-step=complete] > div {
  border-color: var(--teal-text);
  box-shadow: 0 0 0 4px var(--soft-teal), 0 8px 20px #0001;
  transform: translateY(-4px);
}
.round-arrow, .text-link > span, .button > span, .section-icon, .expand { transition: transform .25s; }
.featured-project:hover .round-arrow, .featured-project:focus-visible .round-arrow { transform: rotate(45deg); }
.text-link:hover > span, .text-link:focus-visible > span, .button:hover > span { transform: translate(3px, -3px); }
.service-list li, .chips > span, .socials a, nav a { transition: transform .2s, color .2s, background .2s, border-color .2s; }
.service-list li:hover { transform: translateX(5px); }
.chips > span:hover { transform: translateY(-3px); border-color: var(--teal-text); }
.socials a:hover { transform: translateY(-3px); }
.button:active, .motion-toggle:active, .workflow-demo button:active { transform: scale(.97); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-motion=running] .card:hover { border-color: var(--amber-text); box-shadow: 0 10px 35px #0001; }
  [data-motion=running] .projects:hover::before { opacity: 1; }
  [data-motion=running] .card:hover .section-icon { transform: rotate(-8deg) scale(1.08); }
}
@keyframes packet-travel {
  0%, 8% { transform: translateX(0); opacity: 0; }
  18% { opacity: 1; }
  80% { opacity: 1; }
  95%, 100% { transform: translateX(50px); opacity: 0; }
}
@keyframes core-breathe { 50% { box-shadow: 0 0 0 6px var(--soft-amber), 0 0 25px var(--soft-amber); } }
@keyframes operator-float { 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
@keyframes satellite-orbit { from { transform: rotate(0deg) translateX(78px); } to { transform: rotate(360deg) translateX(78px); } }
[data-motion=paused] *, [data-motion=paused] *::before, [data-motion=paused] *::after { transition: none !important; }
[data-motion=paused] .projects::before { opacity: 0; }
@media (max-width: 1200px) {
  @keyframes packet-travel { 0%, 8% { transform: translateX(0); opacity: 0; } 18%, 80% { opacity: 1; } 95%, 100% { transform: translateX(29px); opacity: 0; } }
  .workflow-demo { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (max-width: 640px) {
  .topbar-actions { gap: 8px; }
  .motion-toggle { padding: 6px 8px; font-size: 8px; }
  .topbar .draft-label { display: none; }
  .workflow-demo { flex-direction: row; align-items: center; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card, .contact-card, .intro { opacity: 1 !important; transform: none !important; }
  .service-list li:hover, .chips > span:hover, .socials a:hover,
  .featured-project:hover .round-arrow, .text-link:hover > span, .button:hover > span,
  .workflow > div { transform: none !important; }
}