/* === Client Animations === */

/* --- Like Heart Pulse --- */
@keyframes likePulse {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.4); }
    40%  { transform: scale(0.9); }
    65%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.feed-like-btn.animating i {
    animation: likePulse 280ms ease-out;
}

/* --- Like Counter Slide --- */
@keyframes counterSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.feed-like-count.updating {
    animation: counterSlideUp 200ms ease-out;
}

/* --- Mascot Float --- */
@keyframes mascotFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.feed-empty-mascot {
    animation: mascotFloat 3s ease-in-out infinite;
}

/* --- Card Entry (staggered cascade — composes with the wheel) ---
   FeedWheel owns transform/opacity via inline styles; keyframes animating those
   OVERRIDE it while running (full-size pile, then a snap — item #17). Entry is now:
   mount invisible (.pre-enter outranks the inline opacity), let the wheel fan the
   cards out, then fade each one to its wheel-computed opacity. .fade-in is removed
   right after the fade so drags aren't smeared by a lingering transition. */
.feed-card.pre-enter { opacity: 0 !important; }
.feed-card.fade-in { transition: opacity 0.3s ease; }

/* --- Card Exit (filter switch) — opacity-only, and no `from`: the fade starts at
   whatever opacity the wheel last painted (edge cards sit at 0.3, not 1). --- */
@keyframes cardExit {
    to { opacity: 0; }
}

.feed-card.exiting {
    animation: cardExit 0.15s ease-in forwards;
}

/* --- Page Load: Background Fade --- */
@keyframes bgFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.client-bg {
    animation: bgFadeIn 0.4s ease-out;
}

/* --- Page Load: Top Bar Slide Down --- */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feed-topbar {
    animation: slideDown 0.3s ease-out 0.1s both;
}

/* --- Page Load: Bottom Nav Slide Up --- */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.client-bottom-nav {
    animation: slideUp 0.3s ease-out 0.4s both;
}

/* --- Search Bar Collapse --- */
@keyframes searchCollapse {
    from { opacity: 1; transform: scaleX(1); }
    to   { opacity: 0; transform: scaleX(0.5); transform-origin: right; }
}

.feed-search-bar.collapsing {
    animation: searchCollapse 0.2s ease forwards;
}