/* AbhiLeads — motion inside the signed-in app. CSS only: React owns these
   nodes, so everything here animates on mount or on interaction and never
   changes content. Kept quiet: short, transform/opacity only. */

:root { --am-ease: cubic-bezier(.2, .7, .1, 1); }

/* page change: the header and the first blocks of a page rise in */
main .page-header { animation: am-rise .45s var(--am-ease) both; }
main .page-header + * > * { animation: am-rise .55s var(--am-ease) both; }
main .page-header + * > *:nth-child(2) { animation-delay: 60ms; }
main .page-header + * > *:nth-child(3) { animation-delay: 120ms; }
main .page-header + * > *:nth-child(4) { animation-delay: 180ms; }
main .page-header + * > *:nth-child(n+5) { animation-delay: 220ms; }

/* dashboard figures: each tile lifts in turn */
main .grid.grid-cols-4 > .card { animation: am-rise .5s var(--am-ease) both; }
main .grid.grid-cols-4 > .card:nth-child(2) { animation-delay: 70ms; }
main .grid.grid-cols-4 > .card:nth-child(3) { animation-delay: 140ms; }
main .grid.grid-cols-4 > .card:nth-child(4) { animation-delay: 210ms; }

/* result rows fade in as they arrive (no movement, so a re-render never jumps) */
main table tbody tr { animation: am-fade .35s ease both; }

/* sidebar: the active item settles in, hovers slide */
aside.sidebar nav button { transition: background-color .2s ease, color .2s ease, translate .2s var(--am-ease) !important; }
aside.sidebar nav button:hover { translate: 2px 0; }
aside.sidebar nav button.bg-accent\/12 { animation: am-pop .35s var(--am-ease); }

/* presses feel physical */
main button:not(:disabled):active, aside.sidebar button:active, #al-upgrade:active { scale: .97; }
main button, #al-upgrade { transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .15s var(--am-ease); }

/* cards answer the pointer with a hairline, not a shadow */
main .card { transition: border-color .2s ease; }
main .card:hover { border-color: var(--rule-strong, #c9ccd3) !important; }

/* overlays from abhi-ui.js */
#al-planbar { animation: am-bar .5s var(--am-ease) both; }
#al-fb { animation: am-fade .2s ease both; }
#al-fb .al-fb-box { animation: am-dialog .35s var(--am-ease) both; }
#al-fb-fab { animation: am-rise .5s var(--am-ease) .4s both; }
#root .fixed.bottom-6.right-6 > * { animation: am-toast .4s var(--am-ease) both; }

@keyframes am-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes am-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes am-pop { 0% { scale: .96; } 100% { scale: 1; } }
@keyframes am-bar { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes am-dialog { from { opacity: 0; scale: .97; translate: 0 8px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes am-toast { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  main *, aside.sidebar *, #al-planbar, #al-fb, #al-fb *, #al-fb-fab, #root .fixed > * { animation: none !important; transition: none !important; }
}