/* Shared 5S motion: short, compositor-friendly, no layout animation. */
:root { --motion-fast: 140ms; --motion-enter: 240ms; --motion-ease: cubic-bezier(.2,.75,.25,1); }
button, a, input, select, textarea {
  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
  transition-duration: var(--motion-fast);
  transition-timing-function: var(--motion-ease);
}
button:not(:disabled):active { transform: scale(.98); }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid #218852; outline-offset: 3px; }
@keyframes five-s-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes five-s-dialog { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes five-s-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .screen:not([hidden]), .view:not(.hidden), [data-motion-view]:not([hidden]):not(.hidden) { animation: five-s-enter var(--motion-enter) var(--motion-ease); }
  dialog[open], .modal:not([hidden]) > article, .modal:not([hidden]) > .modal-card,
  .photo-viewer:not([hidden]) > div { animation: five-s-dialog var(--motion-enter) var(--motion-ease); }
  dialog[open]::backdrop { animation: five-s-fade 180ms ease-out; }
  .toast.show { transition: opacity 180ms ease-out, transform 180ms var(--motion-ease); }
}
@media (hover: hover) and (pointer: fine) {
  .source-btn:hover, .create-card:hover { box-shadow: 0 8px 24px rgba(15,65,36,.09); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { *, *::before, *::after { animation: none !important; transition: none !important; } }