/* Motion changes paint/compositing only; existing geometry and colors stay put. */
:root {
  --motion-quick: 180ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:where(.btn-primary, .btn-secondary, .report-btn, button) {
  transition: transform var(--motion-quick) var(--motion-ease),
    background-color var(--motion-quick) ease,
    color var(--motion-quick) ease,
    border-color var(--motion-quick) ease,
    box-shadow var(--motion-quick) ease;
}

nav a {
  position: relative;
  transition: color var(--motion-quick) ease;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-quick) var(--motion-ease);
}
nav a:focus-visible::after,
nav a:active::after { transform: scaleX(1); }

:where(a, button, [role="button"]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.dropzone:focus-visible { outline-color: #fff; }

:where(.btn-primary, .btn-secondary, .report-btn, button):focus-visible {
  box-shadow: 0 5px 14px rgba(26, 26, 26, 0.16);
}
.research-card { transition: box-shadow var(--motion-quick) ease; }
.research-card:focus-within {
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.09);
}

@media (hover: hover) and (pointer: fine) {
  :where(.btn-primary, .btn-secondary, .report-btn, button):not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(26, 26, 26, 0.16);
  }
  .btn-primary:hover, #resultBox2 .report-btn:hover { background-color: var(--brand-dark); }
  .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.08); }
  nav a:hover::after { transform: scaleX(1); }
}

:where(.btn-primary, .btn-secondary, .report-btn, button):not(:disabled):active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 1px 4px rgba(26, 26, 26, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(.btn-primary, .btn-secondary, .report-btn, button, nav a, .research-card, .dropzone),
  nav a::after { transition: none; }
  :where(.btn-primary, .btn-secondary, .report-btn, button):not(:disabled):is(:hover, :active) {
    transform: none;
  }
}