/* =========================================================
   Subtle Motion
   (Replaces the old full-page animated gradient background —
   distracting on a production auth screen. Kept minimal:
   a gentle entrance + hover lift.)
========================================================= */

@keyframes fadeSlideUp{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
}

.auth-card{
    animation:fadeSlideUp .35s ease both;
}

.stat-card:hover, .panel:hover{
    box-shadow:var(--shadow-md);
}

.btn{ transition:background-color .15s ease, box-shadow .15s ease, transform .1s ease; }
.btn:active{ transform:translateY(1px); }

/* Icon-only buttons (topbar bell, sidebar toggle) get a light lift +
   scale on hover so they feel clickable without a heavy background. */
.icon-btn, .sidebar-toggle{ transition:background-color .15s ease, color .15s ease, transform .15s ease; }
.icon-btn:hover{ transform:translateY(-1px); }

.avatar-circle{ transition:box-shadow .2s ease, transform .2s ease; }
.user-menu:hover .avatar-circle{ box-shadow:0 0 0 3px var(--color-primary-soft); }

/* App shell main content — a light settle-in on first paint so pages
   don't feel like they "pop" once the preloader clears. */
.app-main{ animation:fadeSlideUp .4s var(--ease-premium) both; }

/* =========================================================
   Dashboard panels — Earnings chart / Calendar / Trade Mix
   doughnut all fade + rise in on load, staggered via the
   --panel-delay custom property set inline per panel.
========================================================= */
.panel-animate{
    animation:fadeSlideUp .5s cubic-bezier(.16,1,.3,1) both;
    animation-delay:var(--panel-delay, 0ms);
}

/* Calendar day cells: soft staggered pop-in every time a month
   is (re)rendered. Delay is set per-cell via --cell-delay. */
@keyframes calendarCellIn{
    from{ opacity:0; transform:scale(.82); }
    to{ opacity:1; transform:scale(1); }
}
#calendar .day, #calendar .day-name{
    animation:calendarCellIn .32s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay:var(--cell-delay, 0ms);
}

/* Crossfade the whole grid while swapping months so the change
   never feels like a hard jump-cut. */
#calendar{
    transition:opacity .16s ease;
}
#calendar.is-swapping{
    opacity:0;
}

/* Trade Mix doughnut: center total counts up + gently pops in
   once Chart.js finishes animating the arcs. */
@keyframes doughnutCenterIn{
    from{ opacity:0; transform:translate(-50%,-50%) scale(.7); }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.doughnut-center.is-ready{
    animation:doughnutCenterIn .4s cubic-bezier(.34,1.56,.64,1) both;
}

/* =========================================================
   Reduced motion
   Every decorative animation/transition above is switched off
   for users who've asked the OS for less motion — content still
   appears, it just doesn't move to get there. Functional
   micro-interactions (e.g. Chart.js's own animations, calendar
   month swap) are left to those libraries'/scripts' own handling.
========================================================= */
@media (prefers-reduced-motion:reduce){
    .auth-card,
    .app-main,
    .panel-animate,
    #calendar .day, #calendar .day-name,
    .doughnut-center.is-ready{
        animation:none;
    }
    .btn, .btn-primary::before, .icon-btn, .sidebar-toggle, .avatar-circle,
    .form-control, .stat-card, .panel, #calendar{
        transition:none;
    }
}