/* === TSH MOTION LAYER — shared UI motion/polish, loaded via /static/motion.css ===
   Purely additive: entrance animations (keyframes, run once) + hover/active micro-interactions.
   Does not touch the sidebar open/close transform mechanism or existing toast show/hide. */

/* ---- keyframes ---- */
@keyframes tshFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tshFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tshScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tshSlideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- page load fade-in ---- */
body { animation: tshFade .4s ease both; }

/* ---- cards / stats / metrics : subtle lift on hover ---- */
.card, .stat-card, .metric, .form-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover, .stat-card:hover, .metric:hover, .form-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
/* staggered entrance for card grids */
.cards > .card, .cards > .stat-card, .stats > .stat-card, .metrics > .metric {
  animation: tshFadeUp .4s ease both;
}
.cards > .card:nth-child(1), .cards > .stat-card:nth-child(1), .stats > .stat-card:nth-child(1), .metrics > .metric:nth-child(1) { animation-delay: .02s; }
.cards > .card:nth-child(2), .cards > .stat-card:nth-child(2), .stats > .stat-card:nth-child(2), .metrics > .metric:nth-child(2) { animation-delay: .06s; }
.cards > .card:nth-child(3), .cards > .stat-card:nth-child(3), .stats > .stat-card:nth-child(3), .metrics > .metric:nth-child(3) { animation-delay: .10s; }
.cards > .card:nth-child(4), .cards > .stat-card:nth-child(4), .stats > .stat-card:nth-child(4), .metrics > .metric:nth-child(4) { animation-delay: .14s; }
.cards > .card:nth-child(5), .cards > .stat-card:nth-child(5), .stats > .stat-card:nth-child(5), .metrics > .metric:nth-child(5) { animation-delay: .18s; }
.cards > .card:nth-child(6), .cards > .stat-card:nth-child(6), .stats > .stat-card:nth-child(6), .metrics > .metric:nth-child(6) { animation-delay: .22s; }

/* ---- buttons : press feedback + smooth (covers .btn variants, .menu-btn, .filter-btn, pagination) ---- */
.btn, .menu-btn, .filter-btn, .page-btns button, .page button, .action-bar button, .modal-actions button, .modal-footer button {
  transition: transform .12s ease, filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover, .filter-btn:hover { filter: brightness(1.06); }
.btn:active, .filter-btn:active, .page-btns button:active, .page button:active { transform: translateY(1px); }
.btn:disabled { filter: none; }

/* ---- nav items : hover slide ---- */
.nav-item, .nav-sub {
  transition: background .12s ease, transform .12s ease, border-left-color .12s ease, color .12s ease;
}
.nav-item:hover, .nav-sub:hover { transform: translateX(2px); }

/* ---- tables : row hover fade + body fade-in ---- */
.table-wrap table tbody tr, .table-scroll table tbody tr, .sheet-table-wrap table tbody tr {
  transition: background .12s ease;
}
.table-wrap, .table-scroll, .sheet-table-wrap { animation: tshFade .35s ease both; }

/* ---- modals : scale-in entrance (works for display:none->flex toggles across variants) ---- */
.modal, .modal-box { animation: tshScaleIn .22s cubic-bezier(.22,1,.36,1) both; }

/* ---- empty states ---- */
.empty-state { animation: tshFadeUp .3s ease both; }

/* ---- section headers : gentle slide-in ---- */
.section-header { animation: tshSlideDown .3s ease both; }

/* ---- inputs : focus ring (additive to existing focus border) ---- */
input:focus, select:focus, textarea:focus, .inline-input:focus, .search-box input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.14);
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* ---- links inside content ---- */
.content a, .content-wrap a { transition: color .12s ease; }

/* ---- legend dots ---- */
.legend .dot, .legend-dot { transition: transform .15s ease; }
.legend .dot:hover, .legend-dot:hover { transform: scale(1.25); }

/* ---- accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}