/* ---------------------------------------------------------------------------
   motion.css — the layer that makes the dashboard feel alive.
   Purely additive: only adds transitions/animations, never changes layout, so
   it can't break existing styling. Everything is disabled for users who ask for
   reduced motion.
   --------------------------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Entrance: content rises in, slightly staggered ------------------------ */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.dash-inner > *,
.mk-wrap > * {
  animation: rise-in .5s var(--ease-out) both;
}
.dash-inner > *:nth-child(1) { animation-delay: .02s }
.dash-inner > *:nth-child(2) { animation-delay: .07s }
.dash-inner > *:nth-child(3) { animation-delay: .12s }
.dash-inner > *:nth-child(4) { animation-delay: .17s }
.dash-inner > *:nth-child(5) { animation-delay: .22s }
.dash-inner > *:nth-child(n+6) { animation-delay: .26s }

/* Cards inside a grid stagger too, so dashboards assemble rather than blink in */
.d-grid > * { animation: rise-in .5s var(--ease-out) both; }
.d-grid > *:nth-child(2) { animation-delay: .06s }
.d-grid > *:nth-child(3) { animation-delay: .12s }
.d-grid > *:nth-child(4) { animation-delay: .18s }

/* --- Hover: lift + shadow -------------------------------------------------- */
.d-card, .d-card-dark, .mk-card, .stat-card, .d-table-wrap {
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out), border-color .28s ease;
}
.d-card:hover, .mk-card:hover, .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .38);
}
.d-card-dark:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px -20px rgba(15, 23, 42, .6);
}

/* Table rows highlight on hover */
.d-table tbody tr { transition: background-color .18s ease, transform .18s var(--ease-out); }
.d-table tbody tr:hover { background: #f8fafc; }

/* --- Buttons: press feedback + sheen -------------------------------------- */
.btn {
  transition: transform .16s var(--ease-spring), box-shadow .22s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .6s var(--ease-out);
}
.btn-primary:hover::after { left: 140%; }

/* --- Sidebar nav: sliding active indicator -------------------------------- */
.nav-item { position: relative; transition: background-color .2s ease, color .2s ease, padding-left .2s var(--ease-out); }
.nav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0;
  background: currentColor; border-radius: 0 3px 3px 0; opacity: .85;
  transform: translateY(-50%); transition: height .26s var(--ease-spring);
}
.nav-item:hover { padding-left: calc(var(--nav-pad, 14px) + 4px); }
.nav-item:hover::before, .nav-item.active::before { height: 62%; }

/* --- Status + badges ------------------------------------------------------- */
.status-live .dot { animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  50%      { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.mini-badge, .status-pill { transition: transform .18s var(--ease-spring); }
.mini-badge:hover, .status-pill:hover { transform: translateY(-1px) scale(1.03); }

/* --- Progress bars fill on load ------------------------------------------- */
.progress > div { transition: width .9s var(--ease-out); }

/* --- Flash messages slide in and breathe ---------------------------------- */
.form-success, .form-error, .form-warning, .form-info {
  animation: flash-in .45s var(--ease-spring) both;
}
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* --- Modals ---------------------------------------------------------------- */
.modal-overlay { transition: opacity .22s ease; }
.modal-overlay .modal { transition: transform .3s var(--ease-spring), opacity .22s ease; }
.modal-overlay:not(.open) .modal { transform: translateY(12px) scale(.97); opacity: 0; }
.modal-overlay.open .modal { transform: none; opacity: 1; }

/* --- Bot-protection / analytics bars grow in ------------------------------ */
@keyframes bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bar-chart > div > div { transform-origin: bottom; animation: bar-grow .7s var(--ease-out) both; }

/* --- Skeleton shimmer (available for async areas) ------------------------- */
.skeleton {
  background: linear-gradient(90deg, #eef2f6 25%, #f8fafc 37%, #eef2f6 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px;
}
@keyframes shimmer { from { background-position: 100% 50% } to { background-position: 0 50% } }

/* --- Focus visibility (accessibility, not decoration) --------------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- Respect the user's motion preference --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .d-card:hover, .d-card-dark:hover, .mk-card:hover, .stat-card:hover,
  .btn:hover, .btn:active, .mini-badge:hover, .status-pill:hover { transform: none; }
}