/* Quiet continuity: short feedback, retained spatial relationships, faster exits. */
:root {
  --motion-out: cubic-bezier(.23, 1, .32, 1);
  --motion-move: cubic-bezier(.32, .72, 0, 1);
  --motion-feedback: 130ms;
  --motion-state: 180ms;
}
html { scrollbar-gutter: stable; }
body { transition: background-color 160ms ease, color 160ms ease; }
input { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.site-header { transition: background-color 160ms ease, border-color 160ms ease; }
.scroll-progress {
  width: 100%; transform: scaleX(0); transform-origin: right center;
}
.button, .icon-button, .filter, .process-tab, .dialog-close, .copy-button,
.back-top, .search-result, .case-next button, .tools-directory a {
  transition: transform var(--motion-feedback) var(--motion-out),
    color var(--motion-feedback) ease, background-color var(--motion-feedback) ease,
    border-color var(--motion-feedback) ease, opacity var(--motion-feedback) ease;
}
.button:active, .icon-button:active, .dialog-close:active, .copy-button:active,
.back-top:active, .case-next button:active { transform: scale(.97); }
.filter:active, .process-tab:active { transform: scale(.985); }
.desktop-nav a, .text-link, .contact-meta a {
  transition: color 130ms ease;
  text-underline-offset: .3em;
}
.text-link .ui-icon { transition: transform 160ms var(--motion-out); }
.project-grid { position: relative; isolation: isolate; }
.motion-exit-layer {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.filters, .process-tabs { position: relative; }
.motion-ink {
  position: absolute; bottom: -1px; left: 0; height: 2px;
  background: var(--accent); pointer-events: none; transform-origin: left center;
}
.filters.has-motion-ink .filter.active { border-bottom-color: transparent; }
.process-tabs.has-motion-ink .process-tab.active::after { display: none; }
.project-visual > img, .gallery-item img {
  transition: transform 240ms var(--motion-out);
}
.project-arrow {
  transition: background-color 130ms ease, color 130ms ease,
    transform 160ms var(--motion-out);
}
.archive-zoom {
  transition: opacity 130ms ease, transform 160ms var(--motion-out);
  transform: translateY(3px);
}
.archive-photo:focus-visible .archive-zoom { opacity: 1; transform: translateY(0); }
.archive-photo img { transition: none; }
.tool { transition: background-color 140ms ease; }
.tool-icon { transition: transform 160ms var(--motion-out); }
.toast {
  transition: opacity 160ms ease, transform 200ms var(--motion-out);
}
/* Native discrete transitions retain the top layer for the short exit phase. */
dialog {
  opacity: 0; transform: translateY(7px) scale(.985);
  transform-origin: center;
  transition: opacity 130ms ease, transform 150ms var(--motion-out),
    display 150ms allow-discrete, overlay 150ms allow-discrete,
    background-color 160ms ease, border-color 160ms ease;
}
dialog[open] {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 180ms ease, transform 240ms var(--motion-out),
    display 240ms allow-discrete, overlay 240ms allow-discrete,
    background-color 160ms ease, border-color 160ms ease;
}
dialog::backdrop {
  opacity: 0; backdrop-filter: blur(4px);
  transition: opacity 150ms ease, display 150ms allow-discrete,
    overlay 150ms allow-discrete;
}
dialog[open]::backdrop { opacity: 1; }
.search-dialog, .search-dialog[open] {
  transform: none;
  transition: opacity 100ms ease, display 100ms allow-discrete,
    overlay 100ms allow-discrete;
}
.lightbox, .lightbox[open] { transform: none; }
.lightbox img { transform-origin: center; }
.case-dialog { overscroll-behavior: contain; }
.mobile-nav { display: none; }
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(7px) scale(.985); }
  dialog[open]::backdrop { opacity: 0; }
  .search-dialog[open], .lightbox[open] { opacity: 0; transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-1px); }
  .button:active { transform: scale(.97); }
  .text-link:hover span { transform: translateX(-2px); }
  .project-open:hover .project-visual:not(.website) > img { transform: scale(1.025); }
  .project-open:hover .project-visual.website > img {
    transform: perspective(1000px) rotateX(3deg) scale(1.015);
  }
  .project-open:hover .project-arrow { transform: translateX(-2px); }
  .gallery-item:hover img { transform: scale(1.025); }
  .archive-photo:hover .archive-zoom { opacity: 1; transform: translateY(0); }
  .tool:hover .tool-icon { transform: translateY(-1px); }
}
@media (max-width: 760px) {
  .mobile-nav {
    position: absolute; top: 100%; left: -1px; right: -1px;
    background: var(--bg); border: 1px solid var(--line);
    box-shadow: 0 18px 34px #0003; transform-origin: top right;
  }
  .mobile-nav:not([hidden]) { display: block; }
}
/* Keyboard actions are immediate; focus remains fully visible. */
html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] *, html[data-input="keyboard"] *::before,
html[data-input="keyboard"] *::after, html[data-input="keyboard"] dialog::backdrop {
  transition-duration: 0s !important; animation-duration: 0s !important;
  transition-delay: 0s !important; animation-delay: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  dialog, dialog[open] {
    transform: none;
    transition: opacity 80ms ease, display 80ms allow-discrete,
      overlay 80ms allow-discrete;
  }
  dialog::backdrop { transition-duration: 80ms; }
  .button, .icon-button, .filter, .process-tab, .dialog-close, .back-top,
  .project-visual > img, .gallery-item img, .tool-icon, .project-arrow,
  .text-link .ui-icon, .archive-zoom {
    transition: color 80ms ease, background-color 80ms ease,
      border-color 80ms ease, opacity 80ms ease;
  }
  .button:hover, .button:active, .icon-button:active, .dialog-close:active,
  .copy-button:active, .back-top:active, .case-next button:active,
  .filter:active, .process-tab:active, .text-link:hover span,
  .project-open:hover .project-visual:not(.website) > img,
  .project-open:hover .project-arrow, .gallery-item:hover img,
  .tool:hover .tool-icon, .archive-zoom { transform: none; }
  .project-open:hover .project-visual.website > img {
    transform: none;
  }
  .toast, .toast.show {
    transform: translateX(-50%); transition: opacity 80ms ease;
  }
  @starting-style { dialog[open] { transform: none; } }
}