/* Motion uses existing colors, small distances and no idle decoration. */
@media(prefers-reduced-motion:no-preference){
  button,.button,.animal-card,.animal-row,.bottom-nav a,#main-nav a,.mobile-menu a,input,select,textarea{
    transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,translate .16s ease,scale .12s ease;
  }
  button:active:not(:disabled),.button:active,.bottom-nav a:active{scale:.975}
  input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent)}
  .bottom-nav a.active>span{animation:nav-settle .26s cubic-bezier(.22,1,.36,1)}
  .mobile-menu:not([hidden]){transform-origin:bottom right;animation:menu-arrive .2s cubic-bezier(.22,1,.36,1)}
  .mobile-menu-backdrop:not([hidden]){animation:veil-arrive .18s ease-out}
  dialog[open],.app-confirm[open]{animation:panel-arrive .23s cubic-bezier(.22,1,.36,1)}
  dialog[open]::backdrop{animation:veil-arrive .2s ease-out}
  .toast:not([hidden]){animation:toast-arrive .25s cubic-bezier(.22,1,.36,1)}
  .form-error,.field-error{animation:feedback-arrive .2s ease-out}
  form[data-saving] button[type=submit]::before{content:"";width:13px;height:13px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:save-spin .7s linear infinite}
  @media(hover:hover) and (pointer:fine){
    .animal-card:hover{translate:0 -3px;box-shadow:0 9px 24px #00000018}
    .animal-row:hover{translate:2px 0}
    .button:hover,button:hover:not(:disabled):not(.pg-node-main):not(.pg-child):not(.pg-search-item){translate:0 -1px}
  }
}
@keyframes nav-settle{from{scale:.88;translate:0 2px}to{scale:1;translate:0 0}}
@keyframes menu-arrive{from{opacity:0;translate:0 8px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes panel-arrive{from{opacity:0;translate:0 10px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes toast-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes feedback-arrive{from{opacity:.3;translate:0 -3px}to{opacity:1;translate:0 0}}
@keyframes veil-arrive{from{opacity:0}to{opacity:1}}
@keyframes save-spin{to{rotate:360deg}}
/* Override existing component motion too, including an OS setting changed live. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}