/* Pause-animations toggle (see /js/motion-pref.js) */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.motion-toggle:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.05); }
.motion-toggle:focus-visible { outline: 2px solid #5B9BF8; outline-offset: 3px; }
.motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle .icon-play { display: none; }
html[data-motion="reduce"] .motion-toggle .icon-pause { display: none; }
html[data-motion="reduce"] .motion-toggle .icon-play { display: block; }

/* Paused: every CSS animation and transition jumps straight to its end state */
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

/* Nav logo draws itself in on every homepage load, and on the first page of a visit elsewhere (js/logo-draw.js) */
html.logo-draw .cp-logo .cp-arc { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cp-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; }
html.logo-draw .cp-logo .cp-chevron { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cp-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.75s forwards; }
html.logo-draw .cp-logo .cp-dot { transform: scale(0); transform-box: fill-box; transform-origin: center; animation: cp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards; }
@keyframes cp-draw { to { stroke-dashoffset: 0; } }
@keyframes cp-pop { to { transform: scale(1); } }