/* Shared input feedback. /op links this same file explicitly. */
:root {
  --motion-feedback: 180ms;
  --motion-content: 200ms;
  --motion-panel: 220ms;
  --motion-easing: cubic-bezier(.2,.8,.2,1);
}
/* Artwork can pass behind the fixed nav while scrolling. Keep its text
   readable on content pages; the two 3D scenes retain their existing header. */
body:not(.home-reading):not(.editorial-web-page) .site-header {
  background: var(--bg, #111110);
}

:where(.site-header a, .menu-btn, .project-card, .op-filter-button,
  .archive-card, .featured-panel-link, .archive-scroll-buttons button,
  .featured-panel-pager button, .detail-panel-close, .detail-panel-full-link,
  .work-table-row--header button, .work-table-row):focus-visible {
  outline: 2px solid var(--link-blue);
  outline-offset: var(--sp-1);
}
:where(.menu-btn, .op-filter-button, .archive-scroll-buttons button,
  .featured-panel-pager button, .detail-panel-close):active:not(:disabled) {
  transform: translateY(1px);
}
:where(.project-card, .work-table-row, .featured-panel-link):active {
  color: var(--link-blue);
}
:where(.archive-scroll-buttons button, .featured-panel-pager button):disabled {
  opacity: .3;
  cursor: default;
}

/* Headers stay anchored during ordinary same-origin document navigation.
   Only the small incoming controls/title receive a change-of-context cue. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .op-filter-bar { view-transition-name: work-controls; }
  .project-title { view-transition-name: project-title; }
  ::view-transition { pointer-events: none; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(site-header), ::view-transition-new(site-header) {
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-new(work-controls), ::view-transition-new(project-title) {
    animation: motion-context var(--motion-feedback) var(--motion-easing) both;
  }
  ::view-transition-old(work-controls), ::view-transition-old(project-title) {
    animation: none;
  }
  @keyframes motion-context {
    from { opacity: .65; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-btn span, .site-nav a, .project-card-extra-image,
  .archive-card, .featured-panel-body, .featured-panel-media img,
  .featured-panel-media video, .contact-form-submit-arrow {
    transition: none !important;
  }
}