/* Silver signal trails follow the same quiet geometry as the portfolio. */
#site-motion-toggle,
.motion-toggle { visibility: hidden; }
html.motion-ready #site-motion-toggle,
html.motion-ready .motion-toggle { visibility: visible; }

#site-motion-toggle {
  min-height: 44px;
  padding: 0 14px;
  font: 10px var(--mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
#site-motion-toggle:disabled { cursor: default; opacity: .7; }

.project::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(360px circle at var(--light-x, 50%) var(--light-y, 50%), #e2eaf515, transparent 74%);
  transition: opacity .3s;
}
.project:focus-visible::after { opacity: .65; }
@media (hover: hover) and (pointer: fine) {
  .project[data-light-active]::after { opacity: 1; }
  .project { transition: background .2s, border-color .2s, transform .3s; }
  .project:hover { transform: translateY(-3px); }
  .project:hover img { transform: none; }
}

html.motion-inactive *,
html.motion-inactive *::before,
html.motion-inactive *::after,
body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused { scroll-behavior: auto; }
body.motion-paused *,
body.motion-paused *::before,
body.motion-paused *::after { transition: none !important; }
body.motion-paused .project:hover,
body.motion-paused .project:hover img { transform: none; }
body.motion-paused .project::after { opacity: 0; }
body.motion-paused .cell::after { opacity: 0; }
body.motion-paused .intro { animation: none !important; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .project:hover,
  .project:hover img { transform: none; }
  .project::after { display: none; }
}
@media (max-width: 600px) {
  #site-motion-toggle { padding: 0 10px; font-size: 9px; }
}