/* ============================================================
   MOTION LAYER — Smartsheet-exact (4th pass, live-measured)
   Easings: cubic-bezier(0.3,0.3,0.2,1) [standard], (0.8,0,0.2,1) [emphatic]
   Durations: 0.2s micro, 0.25s fades, 0.4s panels, 150ms grid chrome
   ============================================================ */
:root {
  --ease-sm: cubic-bezier(0.3, 0.3, 0.2, 1);
  --ease-emph: cubic-bezier(0.8, 0, 0.2, 1);
}

/* rail: color+bg transitions on every item (real: 0.2s std easing) */
.rail-btn, .rail-create, .side-item, .tree-node, .launcher-item {
  transition: color 0.2s var(--ease-sm), background-color 0.2s var(--ease-sm),
    opacity 0.2s var(--ease-sm), border-color 0.2s var(--ease-sm);
}

/* buttons: real pattern = bg+color 0.2s + subtle lift on hover */
.btn-primary, .btn-sec, .grid-toolbar button, .profile-btn, .pm-item {
  transition: background-color 0.2s var(--ease-sm), color 0.2s var(--ease-sm),
    box-shadow 0.2s var(--ease-sm), transform 0.15s var(--ease-sm);
}
.btn-primary:hover { background: #2558c4; box-shadow: 0 1px 4px rgba(13,52,145,.35); }
.btn-primary:active { transform: scale(0.98); }
.grid-toolbar button:hover { background: #f0f0f0; }

/* grid: row hover + selection (real: 150ms ease-in-out / 500ms cell flash) */
.ss-grid tbody tr, .ss-grid tr { transition: background-color 150ms ease-in-out; }
.ss-grid tr.sel td { transition: background-color 500ms ease; }

/* menus + modals: fade+scale in (0.25s std) */
.overlay, .modal-veil { animation: fadeIn 0.25s var(--ease-sm); }
.modal { animation: modalIn 0.25s var(--ease-emph); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* launcher flyout + profile menu: slide+fade (0.2s emphatic) */
.profile-menu, .flyout { animation: flyoutIn 0.2s var(--ease-emph); transform-origin: top right; }
@keyframes flyoutIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* view transitions: only content rendered through the skeleton path animates */
main.loading > * { animation: viewIn 0.25s var(--ease-sm); }
@keyframes viewIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }

/* tree arrows rotate */
.tree-node .arrow { transition: transform 150ms var(--ease-sm); }
.tree-node.open .arrow { transform: rotate(90deg); }
.tree-kids { animation: viewIn 0.2s var(--ease-sm); }

/* pills + cards */
.pill, .card { transition: background-color 0.2s var(--ease-sm), box-shadow 0.2s var(--ease-sm); }
.card:hover { box-shadow: 0 2px 10px rgba(20,30,60,.08); }
.program-row { transition: background-color 0.15s var(--ease-sm), box-shadow 0.2s var(--ease-sm); }
.program-row:hover { background: #f2f6fb; box-shadow: 0 1px 5px rgba(13,52,145,.10); }

/* toast */
#toast { animation: toastIn 0.25s var(--ease-emph); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* checkbox flash on approve (real: 500ms bg flash) */
@keyframes cellFlash { 0% { background-color: #fff3c2 } 100% { background-color: transparent } }
.flash { animation: cellFlash 500ms ease; }

/* skeleton shimmer for async loads (real pattern) */
.skeleton { background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite; border-radius: 4px; }
@keyframes shimmer { from { background-position: 200% 0 } to { background-position: -200% 0 } }

/* loading spinner (real: logo bar) */
.spinner { width: 18px; height: 18px; border: 2px solid #d0d3e2; border-top-color: #2d60d7;
  border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg) } }

/* link + input focus rings */
a { transition: color 0.15s var(--ease-sm); }
input, select, textarea { transition: border-color 0.2s var(--ease-sm), box-shadow 0.2s var(--ease-sm); }
input:focus, select:focus, textarea:focus { outline: none; border-color: #2d60d7;
  box-shadow: 0 0 0 3px rgba(45,96,215,.15); }

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