/* Token values are installed by tokens.js. :active responds on pointer-down. */
button, .choice-face, .photo-picker { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:not(.card-open), .choice-face, .photo-picker {
  transition: scale var(--motion-instant) var(--ease-subtle), opacity var(--motion-instant) var(--ease-subtle);
}
button:not(:disabled):is(:active, .is-pressed), .choice:is(:active, .is-pressed) .choice-face, .photo-picker:is(:active, .is-pressed) { scale: .97; }
.favorite-button:is(:active, .is-pressed) svg { scale: .9; }
.card-open { transition: scale var(--motion-instant) var(--ease-subtle); transform-origin: center; }
button.card-open:is(:active, .is-pressed) { scale: 1.02; }
.wardrobe-card:has(.card-open:is(:active, .is-pressed)) { z-index: 3; }
.place-switch::before { transition: transform var(--motion-short) var(--ease-move); }
.motion-photo { position: fixed; z-index: 50; pointer-events: none; margin: 0; object-fit: contain; border-radius: 12px; transform-origin: top left; }
@media (prefers-reduced-motion: reduce) {
  button, .choice-face, .photo-picker, .card-open, .place-switch::before { transition: none; }
  button:not(:disabled):is(:active, .is-pressed), .choice:is(:active, .is-pressed) .choice-face, .photo-picker:is(:active, .is-pressed), button.card-open:is(:active, .is-pressed), .favorite-button:is(:active, .is-pressed) svg { scale: 1; }
  button:is(:active, .is-pressed), .choice:is(:active, .is-pressed) .choice-face, .photo-picker:is(:active, .is-pressed) { opacity: .85; }
}