/* Quiet tactile cues; all source artwork stays still and uncropped. */
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 180ms ease, border-color 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.22,1,.36,1); }
  .page a { transition: box-shadow 280ms ease, transform 280ms cubic-bezier(.22,1,.36,1); }
  details > summary { transition: color 180ms ease; }
  .page-open { transition: background-color 180ms ease; }
  .sample-viewer[open] .sample-viewer__panel { animation: viewer-settle 220ms cubic-bezier(.22,1,.36,1); }
  .sample-viewer[open]::backdrop { animation: viewer-backdrop 180ms ease; }
  @keyframes viewer-settle { from { opacity: .7; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes viewer-backdrop { from { opacity: .5; } to { opacity: 1; } }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:hover { transform: translateY(-1px); box-shadow: 0 5px 16px #00000018; }
  .button:active { transform: translateY(0); box-shadow: none; }
  .page a:hover { transform: translateY(-2px); }
}
@media (hover: none) {
  .page a:hover, .hero-m2 .hero-actions .button:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .button, .page a, .sample-viewer__panel, .sample-viewer::backdrop { animation: none !important; transition: none !important; }
  .button:hover, .page a:hover { transform: none !important; }
}