/* Restrained interaction layer. Loaded last; never hides reading content. */
:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-short: 240ms;
  --motion-open: 320ms;
}

/* Only paint properties: keyboard focus remains immediate, and nothing resizes. */
.site-header {
  transition: border-color var(--motion-short) var(--motion-ease),
    background-color var(--motion-short) var(--motion-ease);
}
.button, button, .nav-contact, .text-link, .editorial-link,
.poster-link, .topic-links a, .project-footer a, .project-contents a,
.project-continuation-learning a, .project-other-link h3,
.project-story-copy h3 a, .project-filters button, .method-tabs button,
.faq-list summary, .gallery-link, .gallery-link::after {
  transition: color var(--motion-short) var(--motion-ease),
    background-color var(--motion-short) var(--motion-ease),
    border-color var(--motion-short) var(--motion-ease),
    box-shadow var(--motion-short) var(--motion-ease);
}
.project-link, .course-card, .knowledge-card {
  transition: border-color var(--motion-short) var(--motion-ease),
    box-shadow var(--motion-short) var(--motion-ease);
}
.site-header #navigation a::after {
  transition: width var(--motion-short) var(--motion-ease);
}
.site-header #navigation a:focus-visible::after { transition: none; }
.project-form input, .project-form select, .project-form textarea,
.request-filters input, .request-filters select, .request-card select {
  transition: border-color var(--motion-short) var(--motion-ease),
    background-color var(--motion-short) var(--motion-ease);
}
.project-form input:focus, .project-form select:focus, .project-form textarea:focus,
.request-filters input:focus, .request-filters select:focus, .request-card select:focus {
  border-color: #775438;
}

/* These spans contain directional glyphs; no image zoom or image-specific filter. */
.editorial-link > span, .hero-project-link strong > span,
.project-footer .button-primary > span, .portfolio-page .project-read > span,
.project-continuation-read > span, .project-other-read > span {
  display: inline-block;
  transition: transform var(--motion-short) var(--motion-ease);
}
@media (hover: hover) and (pointer: fine) {
  .editorial-link:hover > span, .hero-project-link:hover strong > span,
  .project-footer .button-primary:hover > span,
  .portfolio-page .project-link:hover .project-read > span,
  .project-continuation-link:hover .project-continuation-read > span,
  .project-other-link:hover .project-other-read > span {
    transform: translate(2px, -2px);
  }
}
.editorial-link:focus-visible > span, .hero-project-link:focus-visible strong > span,
.project-footer .button-primary:focus-visible > span,
.portfolio-page .project-link:focus-visible .project-read > span,
.project-continuation-link:focus-visible .project-continuation-read > span,
.project-other-link:focus-visible .project-other-read > span {
  transform: translate(2px, -2px);
}

/* Opening only. Native display/inert/close behaviour is untouched. */
@media (max-width: 1050px) {
  .menu-button span {
    transform-origin: center;
    transition: transform var(--motion-short) var(--motion-ease),
      opacity 200ms var(--motion-ease);
  }
  .site-header.menu-open .menu-button span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .site-header.menu-open .menu-button span:nth-child(2) { opacity: 0; }
  .site-header.menu-open .menu-button span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 1050px) {
    .site-header.menu-open #navigation { animation: opale-open-six var(--motion-open) var(--motion-ease); }
  }
  .faq-list details[open] > :not(summary) {
    animation: opale-open-eight 280ms var(--motion-ease);
  }
  dialog.case-dialog[open], dialog.project-lightbox[open] {
    animation: opale-open-six var(--motion-open) var(--motion-ease);
  }
  dialog.case-dialog[open]::backdrop, dialog.project-lightbox[open]::backdrop {
    animation: opale-backdrop-in 240ms var(--motion-ease);
  }
}
.case-dialog::backdrop { backdrop-filter: none; }
@keyframes opale-open-six {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes opale-open-eight {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes opale-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Neutralise legacy mouse-hover rules on touch; active/selected/focus states stay. */
@media (hover: none), (pointer: coarse) {
  .site-header #navigation a:not([aria-current]):hover::after { width: 0; }
  .site-header #navigation a:focus-visible::after { width: 100%; }
  .nav-contact:hover { background: transparent; color: inherit; }
  .button-primary:not(:disabled):not([aria-disabled="true"]):hover { background: #775438; }
  .button-ghost:not(:disabled):not([aria-disabled="true"]):hover { background: transparent; color: #fff; }
  .button-light:not(:disabled):not([aria-disabled="true"]):hover { background: #fff; color: #111; }
  .project-link:hover, .course-card:hover, .knowledge-card:hover {
    transform: none; box-shadow: none; border-color: var(--line);
  }
  .portfolio-page .project-link:hover { border-color: #b9b1a4; }
  .portfolio-page .project-link:hover h3 { text-decoration: none; }
  .editorial-link:hover { color: inherit; border-color: currentColor; }
  .project-other-link:hover h3, .project-story-copy h3 a:hover { color: inherit; }
  .project-filters button:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):hover {
    background: transparent; border-color: var(--detail-line); color: var(--ink);
  }
  .project-filters button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover { background: var(--ink); }
  .portfolio-page .project-filters button:not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]):hover { border-color: transparent; }
  .portfolio-page .project-filters button[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"]):hover { background: transparent; }
  .method-tabs button:not(:disabled):not([aria-disabled="true"]):not([aria-selected="true"]):hover { background: transparent; border-color: transparent; }
  .gallery-link:hover { border-color: var(--line); }
  .gallery-link:hover::after { background: rgba(17,17,15,.9); }
  .gallery-link:focus-visible::after { background: #775438; }
  .project-lightbox button:not(:disabled):not([aria-disabled="true"]):hover { background: transparent; border-color: #9c9386; }
  .text-link:hover, .contact-privacy a:hover, .privacy-note a:hover, .poster-link:hover {
    text-decoration-thickness: 1px;
  }
  .project-contents a:not([aria-current="location"]):hover { color: #514e49; border-bottom-color: transparent; }
  .request-card button:not(:disabled):not([aria-disabled="true"]):hover, .request-filters button:not(:disabled):not([aria-disabled="true"]):hover, .request-watch button:not(:disabled):not([aria-disabled="true"]):hover { background: #775438; }
  .request-card button.danger:not(:disabled):not([aria-disabled="true"]):hover { background: #75392c; }
  .editorial-link:hover > span, .hero-project-link:hover strong > span,
  .project-footer .button-primary:hover > span,
  .portfolio-page .project-link:hover .project-read > span,
  .project-continuation-link:hover .project-continuation-read > span,
  .project-other-link:hover .project-other-read > span { transform: none; }
}

/* Reduced motion changes presentation, never the open/selected/disabled state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .editorial-link > span, .hero-project-link strong > span,
  .project-footer .button-primary > span, .portfolio-page .project-read > span,
  .project-continuation-read > span, .project-other-read > span { transform: none !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}