:root {
  --crm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --crm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --crm-fast: 0.2s;
  --crm-med: 0.36s;
}

@keyframes crm-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes crm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes crm-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes crm-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes crm-msg-their {
  from { opacity: 0; transform: translate(-14px, 10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes crm-msg-mine {
  from { opacity: 0; transform: translate(14px, 10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes crm-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

body.sidebar-as-drawer .main,
body.sidebar-as-drawer .board-main,
body.sidebar-as-drawer .cs-card-host {
  animation: crm-page-in 0.48s var(--crm-ease) both;
}

.stat,
.panel,
.tools-list article,
.funnel-row,
.school-card,
.learn-card {
  animation: crm-rise 0.46s var(--crm-ease) both;
}
.stats-grid > :nth-child(1), .stats-grid-6 > :nth-child(1) { animation-delay: 0.02s; }
.stats-grid > :nth-child(2), .stats-grid-6 > :nth-child(2) { animation-delay: 0.06s; }
.stats-grid > :nth-child(3), .stats-grid-6 > :nth-child(3) { animation-delay: 0.1s; }
.stats-grid > :nth-child(4), .stats-grid-6 > :nth-child(4) { animation-delay: 0.14s; }
.stats-grid > :nth-child(5), .stats-grid-6 > :nth-child(5) { animation-delay: 0.18s; }
.stats-grid > :nth-child(6), .stats-grid-6 > :nth-child(6) { animation-delay: 0.22s; }
.desk-grid > :nth-child(1) { animation-delay: 0.08s; }
.desk-grid > :nth-child(2) { animation-delay: 0.14s; }

.btn,
.ghost,
.cal-nav,
.cal-chip,
.cal-today,
.composer-ico,
.chat-back,
.chat-thread,
.tt-choice,
.tt-slot.is-free,
.tt-card,
.tt-window,
.cal-person,
.stat,
.cselect-btn {
  transition:
    transform var(--crm-med) var(--crm-ease),
    background-color var(--crm-fast) ease,
    box-shadow var(--crm-fast) ease,
    border-color var(--crm-fast) ease,
    color var(--crm-fast) ease,
    opacity var(--crm-fast) ease,
    filter var(--crm-fast) ease;
}
.btn:hover,
.ghost:hover,
.stat:hover,
.tt-choice:hover,
.cal-person:hover {
  transform: translateY(-2px);
}
.btn:active,
.ghost:active,
.composer-ico:active,
.chat-thread:active {
  transform: translateY(0) scale(0.98);
}

.modal:not([hidden]) { animation: crm-scrim-in 0.22s ease both; }
.modal:not([hidden]) .modal-card { animation: crm-pop-in 0.42s var(--crm-ease) both; }

.table-wrap tbody tr,
.board-table tbody tr {
  animation: crm-rise 0.4s var(--crm-ease) both;
}
.page-head .hand { animation: crm-fade-up 0.5s var(--crm-ease) both; }
.page-head p { animation: crm-rise 0.46s var(--crm-ease) 0.06s both; }
.tt-card:hover,
.tt-window:hover { transform: translateY(-2px); filter: brightness(0.98); }
.chat-list,
.chat-window { animation: crm-rise 0.42s var(--crm-ease) both; }
.login-card { animation: crm-pop-in 0.5s var(--crm-ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}