/* Short, compositor-friendly motion; content remains usable without animations. */
:root {
  --motion-ease: cubic-bezier(.2,.75,.25,1);
  --motion-fast: 160ms;
}
.btn,.icon-btn,.nav-link,.bottom-nav a,.bottom-nav button,.menu-grid a,.tab {
  transition: transform var(--motion-fast) var(--motion-ease),
    background-color 180ms ease,color 180ms ease,box-shadow 180ms ease;
}
.btn:active:not(:disabled),.icon-btn:active:not(:disabled),.menu-grid a:active {
  transform: scale(.97);
}
.bottom-nav a:active,.bottom-nav button:active { transform: scale(.94); }
.btn:disabled { transform: none; }
input,select,textarea { transition: border-color 180ms ease,box-shadow 180ms ease; }
.stat,.group-card,.template-card { transition: border-color 200ms ease,box-shadow 200ms ease; }
.contact-card,tbody tr,.conversation { transition: background-color 160ms ease; }
.nav-link .icon,.bottom-nav .icon,.link .icon { transition: transform 180ms var(--motion-ease); }
@media(hover:hover) and (pointer:fine) {
  .nav-link:hover .icon { transform: translateX(2px); }
  .link:hover .icon { transform: translateX(3px); }
  .stat:hover,.group-card:hover,.template-card:hover {
    border-color: #cee0d3;
    box-shadow: 0 8px 24px #174c2d08;
  }
  .menu-grid a:hover { background: var(--green-soft); }
}
@media(hover:none) {
  .btn:hover { transform: none; }
  .btn:active:not(:disabled) { transform: scale(.97); }
}
@media(prefers-reduced-motion:no-preference) {
  #content > .page-heading { animation: one-reveal 260ms var(--motion-ease) backwards; }
  #content > :not(.page-heading):not(.loading) {
    animation: one-reveal 340ms var(--motion-ease) 35ms backwards;
  }
  .stats-grid > .stat,.group-grid > .group-card,.template-grid > .template-card {
    animation: one-reveal 340ms var(--motion-ease) backwards;
  }
  .stats-grid > :nth-child(2),.group-grid > :nth-child(2),.template-grid > :nth-child(2) { animation-delay: 40ms; }
  .stats-grid > :nth-child(3),.group-grid > :nth-child(3),.template-grid > :nth-child(3) { animation-delay: 80ms; }
  .stats-grid > :nth-child(n+4),.group-grid > :nth-child(n+4),.template-grid > :nth-child(n+4) { animation-delay: 120ms; }
  #transfer-import > .card { animation: one-reveal 260ms var(--motion-ease) backwards; }
  .modal-overlay { animation: one-fade 180ms ease backwards; }
  .modal { animation: one-dialog 260ms var(--motion-ease) backwards; }
  .modal-overlay.is-closing { animation: one-fade-out 160ms ease forwards; }
  .modal-overlay.is-closing .modal { animation: one-dialog-out 160ms ease forwards; }
  .toast { animation: one-toast 260ms var(--motion-ease) backwards; }
  .menu-grid a { animation: one-reveal 280ms var(--motion-ease) 60ms backwards; }
  .menu-grid a:nth-child(n+3) { animation-delay: 100ms; }
  .menu-grid a:nth-child(n+5) { animation-delay: 140ms; }
  .bottom-nav .active .icon { animation: one-nav 240ms var(--motion-ease); }
  .loading { animation: one-fade 180ms ease 120ms backwards; }
  @media(max-width:760px) {
    .modal { animation-name: one-sheet; animation-duration: 300ms; }
    .modal-overlay.is-closing .modal { animation-name: one-sheet-out; animation-duration: 160ms; }
  }
}
@keyframes one-reveal { from { opacity:0;transform:translateY(9px); } to { opacity:1;transform:none; } }
@keyframes one-fade { from { opacity:0; } to { opacity:1; } }
@keyframes one-fade-out { to { opacity:0; } }
@keyframes one-dialog { from { opacity:0;transform:translateY(12px) scale(.985); } to { opacity:1;transform:none; } }
@keyframes one-dialog-out { to { opacity:0;transform:translateY(8px) scale(.99); } }
@keyframes one-sheet { from { transform:translateY(36px); } to { transform:none; } }
@keyframes one-sheet-out { to { transform:translateY(28px); } }
@keyframes one-toast { from { opacity:0;transform:translateY(-10px); } to { opacity:1;transform:none; } }
@keyframes one-nav { from { transform:translateY(3px) scale(.92); } to { transform:none; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; }
  .btn:active,.icon-btn:active,.menu-grid a:active,.bottom-nav a:active,.bottom-nav button:active,
  .nav-link:hover .icon,.link:hover .icon { transform:none!important; }
}