/* ====== Motion System (add at end of dashboard.css) ====== */

/* Page fade-in */
body { opacity: 0; animation: pageFade 420ms ease-out forwards; }
@keyframes pageFade { to { opacity: 1; } }

/* Card 3D pop-in (triggered by .inview) */
.card, .kpi {
  transform: translateY(8px) scale(.98) rotateX(2deg);
  opacity: 0;
  will-change: transform, opacity;
}
.card.inview, .kpi.inview {
  animation: pop3d 520ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes pop3d {
  0%   { opacity:0; transform: translateY(16px) scale(.96) rotateX(6deg) }
  60%  { opacity:1; transform: translateY(-4px) scale(1.01) rotateX(0deg) }
  100% { opacity:1; transform: translateY(0)    scale(1)    rotateX(0deg) }
}

/* KPI number counter style (mono-ish look while counting) */
.kpi .value { font-variant-numeric: tabular-nums; }

/* 3D hover tilt + depth */
.tilt, .card, .kpi {
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
  transform-style: preserve-3d;
}
.tilt:hover, .card:hover, .kpi:hover {
  box-shadow: 0 18px 60px rgba(92,59,255,.20);
}

/* Glowing gradient halo on hover */
.card::after, .kpi::after {
  content:""; position:absolute; inset:-1px; border-radius: inherit; z-index:-1;
  background: conic-gradient(from 180deg at 50% 50%, rgba(113,89,245,.0), rgba(113,89,245,.25), rgba(255,167,116,.18), rgba(113,89,245,.0));
  filter: blur(18px); opacity:0; transition: opacity .25s ease;
}
.card:hover::after, .kpi:hover::after { opacity:.9 }

/* Gradient bottom-border reveal */
.card, .kpi { position: relative; }
.card::before, .kpi::before{
  content:""; position:absolute; left:10%; right:10%; bottom:-1px; height:2px; border-radius:2px;
  background: linear-gradient(90deg,var(--primary),#ff9b66,var(--primary));
  background-size: 0% 100%; transition: background-size .35s ease;
}
.card:hover::before, .kpi:hover::before { background-size: 100% 100%; }

/* Subtle glass on hover */
.card:hover, .kpi:hover { backdrop-filter: saturate(120%) blur(6px); }

/* Background gradient orbs (very subtle) */
.main::before, .main::after{
  content:""; position:fixed; width:580px; height:580px; border-radius:50%;
  filter: blur(80px); opacity:.12; pointer-events:none; z-index:0;
  background: radial-gradient(closest-side, var(--primary), transparent 60%);
}
.main::before{ left:-160px; top:160px; animation: floatOrb 18s ease-in-out infinite; }
.main::after { right:-160px; bottom:80px; animation: floatOrb 22s ease-in-out infinite reverse; }
@keyframes floatOrb {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-40px) }
}

/* Pulsing icons (sidebar icons & KPI spark icons) */
.nav-item span.nav-icon, .popular-item .rank {
  animation: floatPulse 3.8s ease-in-out infinite;
}
@keyframes floatPulse {
  0%,100% { transform: translateY(0) scale(1) }
  50%     { transform: translateY(-3px) scale(1.04) }
}

/* Shimmer skeleton (for any .shimmer cell) */
.shimmer {
  position: relative; overflow: hidden; background: rgba(255,255,255,.06);
}
.shimmer::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-100%); animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Table: staggered row reveal */
.table tbody tr { opacity:0; transform: translateY(6px); }
.table tbody tr.show { animation: rowIn .35s ease forwards; }
@keyframes rowIn { to { opacity:1; transform: none; } }
.table tbody tr:hover { background: linear-gradient(90deg, rgba(113,89,245,.06), transparent); }

/* Tab bar: animated underline slider */
.tabbar { position: relative; }
.tabbar .slider {
  position:absolute; bottom:-2px; height:3px; border-radius:3px;
  background: linear-gradient(90deg,var(--primary),#ff9b66);
  transition: left .25s ease, width .25s ease;
}

/* Buttons: 3D press + ripple/shine */
.pill-mini, .pill, #dateRangeBtn, #themeToggle, #logout, .nav-item {
  position:relative; overflow:hidden; transform: translateZ(0);
}
.pill-mini:active, .pill:active, #dateRangeBtn:active, .nav-item:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 6px 26px rgba(0,0,0,.18) inset;
}
.pill-mini:hover::after, .pill:hover::after, .nav-item:hover::after {
  content:""; position:absolute; top:0; left:-120%; width:120%; height:100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transform: skewX(-20deg); animation: shine .8s ease;
}
@keyframes shine { to { left:120%; } }

/* Icons micro-interactions */
.nav-item:hover .nav-icon { transform: rotate(-3deg) scale(1.06); }

/* “View all payments” arrow nudge */
#viewAllPaymentsBtn { display:inline-flex; gap:6px; align-items:center; font-weight:700; }
#viewAllPaymentsBtn::after { content:"↗"; transition: transform .2s ease; }
#viewAllPaymentsBtn:hover::after { transform: translate(2px,-2px); }

/* Pagination buttons pop */
.pager .pill-mini { box-shadow: 0 6px 16px rgba(2,6,23,.25); }
.pager .pill-mini:active { transform: translateY(2px); box-shadow:none; }