/* Codetrade motion: interaction feedback, readable content and reduced motion. */
:root { --motion-fast: 150ms; --motion-ui: 200ms; --motion-enter: 280ms; --motion-ease: cubic-bezier(.2,.7,.2,1); }
.reveal, .reveal.visible, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
.problem-item, .problem-item:hover { padding-left: 0; transition: border-color var(--motion-fast) ease; }
:is(a, button):focus-visible { outline: 2px solid var(--accent, #8b7cf6); outline-offset: 5px; }
:is(.button, .button-primary, .nav-cta, .nav-action, .text-action, .ctrl-btn) { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
:is(.button, .button-primary, .text-action) > span[aria-hidden] { display: inline-block; transition: transform var(--motion-fast) var(--motion-ease); }
:is(.button, .button-primary, .text-action):focus-visible > span[aria-hidden] { transform: translateX(3px); }
.project:focus-visible { border-color: var(--accent); }
.project:focus-visible .project-arrow { transform: translate(3px, -3px); }
:is(.button, .button-primary, .nav-cta, .nav-action, .ctrl-btn):active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  :is(.button, .button-primary, .text-action):hover > span[aria-hidden] { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-enter { animation: ct-enter var(--motion-enter) var(--motion-ease) both; }
  .method-panel:not([hidden]) { animation: ct-panel 180ms var(--motion-ease); }
  .signal-map.motion-map .signal-flow::before { transform-origin: top; animation: ct-line 520ms var(--motion-ease) both; }
  .signal-map.motion-map .signal-index { animation: ct-node 240ms var(--motion-ease) both; }
  .signal-map.motion-map .signal-row:nth-child(2) .signal-index { animation-delay: 80ms; }
  .signal-map.motion-map .signal-row:nth-child(3) .signal-index { animation-delay: 160ms; }
  .signal-map.motion-map .signal-row:nth-child(4) .signal-index { animation-delay: 240ms; }
}
@keyframes ct-enter { from { opacity: .7; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ct-panel { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes ct-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ct-node { from { transform: scale(.94); } to { transform: scale(1); } }
@media (max-width: 900px) {
  .site-header .nav-links { display: grid; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); max-height: calc(100dvh - 77px); overflow-y: auto; transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease), visibility 0s var(--motion-ui); }
  .site-header.open .nav-links { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
}
@media (max-width: 980px) {
  .site-header .nav-menu { display: grid; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); max-height: calc(100dvh - 68px); overflow-y: auto; transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--motion-ease), visibility 0s var(--motion-ui); }
  .site-header.is-open .nav-menu { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  :is(.button, .button-primary, .nav-cta, .nav-action, .ctrl-btn, .project, .project-arrow):is(:hover, :active, :focus-visible), :is(.button, .button-primary, .text-action) > span[aria-hidden] { transform: none !important; }
  .site-header .nav-links, .site-header .nav-menu { transform: none; }
}