/* The portfolio shares the studio's persistent motion preference. */
html.motion-paused,
html:has(body.motion-paused),
body.motion-paused * {
  scroll-behavior: auto !important;
}
body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

.portfolio-motion-dock,
.portfolio-dialog-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 18px;
  border: 1px solid #96d6c77a;
  border-radius: 100px;
  background: #10241ff5;
  color: #d5f7ea;
  font: 600 10px/1.2 'Courier New', monospace;
  letter-spacing: .035em;
  white-space: nowrap;
  cursor: pointer;
}
.portfolio-motion-dock {
  position: fixed;
  z-index: 2000;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  box-shadow: 0 3px 18px #00191024;
  pointer-events: auto;
}
.portfolio-motion-dock .motion-icon,
.portfolio-dialog-motion .motion-icon { width: 12px; font-size: 14px; line-height: 1; }
.portfolio-motion-dock .motion-action { padding-left: 11px; border-left: 1px solid #98d8c246; font-size: 8px; color: #a3c7b8; }
.portfolio-motion-dock:hover,
.portfolio-dialog-motion:hover { background: #1c392f; border-color: #c1f7db; }
.portfolio-motion-dock:focus-visible,
.portfolio-dialog-motion:focus-visible { outline: 3px solid #3ba98e; outline-offset: 4px; }
.portfolio-motion-dock[aria-pressed="true"],
.portfolio-dialog-motion[aria-pressed="true"] { background: #e8eee7; color: #24473a; border-color: #8da896; }
.portfolio-motion-dock[aria-pressed="true"] .motion-action { color: #476757; border-color: #8cae9d66; }
.portfolio-page > .contact { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
.portfolio-page .skip { z-index: 2100; }

/* A native modal makes the page control inert, so it has a synchronized copy. */
.project-dialog__top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper, #eaf0e7);
}
.project-dialog__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.portfolio-dialog-motion { min-height: 44px; padding: 10px 13px; font-size: 9px; }

@media (max-width: 700px) {
  .portfolio-motion-dock { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); gap: 9px; padding: 12px 15px; }
  .project-dialog__top { flex-wrap: wrap; gap: 10px; }
  .project-dialog__top > .mono { flex: 1 0 100%; max-width: none; }
  .project-dialog__actions { width: 100%; justify-content: space-between; }
}
@media print {
  .portfolio-motion-dock,
  .portfolio-dialog-motion { display: none !important; }
}