/* Motion is progressive enhancement. Content stays visible without JavaScript. */
.compass-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.compass { animation: none; }
.compass-stage.is-ready .compass { visibility: hidden; }
.compass-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.compass-stage:not(.is-ready) .compass-canvas { visibility: hidden; }
.hero-art .art-label { left: 28px; bottom: 10px; }
.hero-art .art-caption { right: 30px; bottom: 2px; }
.compass-replay {
  background: none;
  color: var(--blue);
  font-size: 10px;
  padding: 9px 0;
  margin-left: 19px;
}
.compass-replay:hover { color: #e1f5ff; }
.compass-replay:disabled { color: #a4b3c7; cursor: default; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: #a4b3c7;
  border: 0;
  padding: 9px 0;
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.5;
}
.motion-toggle:hover { color: #d7f2ff; }
.motion-toggle:disabled { cursor: default; color: #a4b3c7; }
.motion-toggle svg { width: 11px; height: 11px; fill: currentColor; }
.motion-enabled .reveal-pending {
  opacity: 0;
  transform: translateY(23px);
}
.motion-enabled .reveal-ready {
  transition: opacity 650ms ease var(--reveal-delay, 0ms), transform 750ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms);
}
.reveal-ready:focus-within { opacity: 1 !important; transform: none !important; }
.service-item.is-animating { overflow: hidden; }
.motion-enabled .button .icon,
.motion-enabled .project-link .icon,
.motion-enabled .text-link .icon,
.motion-enabled .nav-contact .icon {
  transition: transform 250ms cubic-bezier(.2,.7,.2,1);
}
.motion-enabled :is(.button, .project-link, .text-link, .nav-contact):hover .icon {
  transform: translate(2px, -2px);
}
.motion-enabled .project-dialog[open] {
  animation: project-arrive 320ms cubic-bezier(.2,.7,.2,1) both;
}
.motion-enabled .project-dialog[open]::backdrop { animation: backdrop-arrive 220ms ease both; }
.motion-enabled .principle-number { transition: color 250ms ease; }
.motion-enabled .principles article:hover .principle-number { color: var(--blue); }
@keyframes project-arrive {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 620px) {
  .motion-toggle { font-size: 9px; margin-top: 2px; }
  .motion-enabled .reveal-pending { transform: translateY(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1 !important; transform: none !important; }
}