/* Motion remains progressive: no element is hidden while scripts load. */
.motion-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 200;
  pointer-events: none;
  background: var(--color-accent, #0052cc);
  transform: scaleX(0);
  transform-origin: left center;
}

.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--color-border, #dce3ec);
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary, #526176);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle::before {
  display: none;
}
.motion-toggle-mark {
  display: block;
  width: 11px;
  height: 12px;
  flex: 0 0 11px;
  box-sizing: border-box;
  border-inline: 3px solid currentColor;
}
.motion-toggle[aria-pressed='false'] .motion-toggle-mark {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.motion-toggle-label { line-height: 1; }
@media (max-width: 1100px) {
  .motion-toggle { width: 40px; padding-inline: 10px; }
  .motion-toggle-label { display: none; }
}
.motion-toggle[aria-pressed='true'] { color: var(--color-accent, #0052cc); }
.motion-toggle[aria-disabled='true'] { cursor: default; }
.motion-toggle:focus-visible { outline: 2px solid var(--color-accent, #0052cc); outline-offset: 3px; }

.motion-clip { overflow: hidden; }
.motion-image { transition: transform 250ms var(--ease-out, ease-out); }
.motion-button { transition: transform 140ms var(--ease-out, ease-out), background 160ms ease; }
.motion-button:active { transform: scale(0.98); }

@media (hover: hover) and (pointer: fine) {
  html:not([data-motion='off']) .motion-image:hover { transform: scale(1.035); }
  html:not([data-motion='off']) .motion-button:hover { transform: translateY(-2px); }
  .motion-toggle:not([aria-disabled='true']):hover { background: var(--color-bg-alt, #eff3f8); }
}

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }

html[data-motion='off'] { scroll-behavior: auto !important; }
html[data-motion='off'] *,
html[data-motion='off'] *::before,
html[data-motion='off'] *::after { animation: none !important; transition-duration: 0s !important; }
html[data-motion='off'] .motion-progress { display: none; }
html[data-motion='off'] .motion-image,
html[data-motion='off'] .motion-button { transition: none; transform: none; }
html[data-motion='off']::view-transition-old(root),
html[data-motion='off']::view-transition-new(root) { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .motion-progress { display: none; }
  .motion-image, .motion-button { transition: none; transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

html:not([data-motion='off']) .motion-button:active { transform: scale(0.98); }