/* Responses to a person's action, with native controls and reduced-motion fallback. */
:root { --motion-fast: 150ms; --motion-ui: 220ms; --motion-ease: cubic-bezier(.22,.8,.25,1); }
[data-motion-state="closing"] { pointer-events: none; }
:where(button, a, summary, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
:where(button, summary, .gallery__upload-fab-label) { transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast); }
:where(button, .gallery__upload-fab-label):active { transform: translateY(1px); }
.gallery__item-image { overflow: hidden; }
.gallery__item-image img { transition: transform var(--motion-ui) var(--motion-ease); }
@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover .gallery__item-image img { transform: scale(1.015); }
  .gallery__item:hover .gallery__item-title { text-decoration: underline; text-underline-offset: .2em; }
}
.gallery__item:active .gallery__item-image img { transform: scale(.99); }
.modal__image-thumb, .upload-form__thumb { transition: border-color var(--motion-fast), opacity var(--motion-fast); }
.modal__heart-btn { transition: color var(--motion-fast), background-color var(--motion-fast), transform var(--motion-ui); }
.modal__heart-btn:active { transform: scale(.9); }
details > summary { cursor: pointer; }
details[open] > :not(summary) { animation: disclosure-enter var(--motion-ui) var(--motion-ease); }
@keyframes disclosure-enter { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.page-footer__links { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.page-footer__more summary { min-height: var(--touch); display: flex; align-items: center; gap: .4rem; }
.page-footer__more summary::after { content: '+'; }
.page-footer__more[open] summary::after { content: '−'; }
.page-footer__more-links { display: flex; gap: .5rem 1rem; flex-wrap: wrap; padding-bottom: .75rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .gallery__item:hover .gallery__item-image img, .gallery__item:active .gallery__item-image img { transform: none; }
}