/* ==========================================================
   KUETx - Smooth 60 FPS Animations & Micro-interactions
   ========================================================== */

@keyframes kuetxPop {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes kuetxBounceIn {
    0% { transform: translateY(15px) scale(0.9); opacity: 0; }
    50% { transform: translateY(-3px) scale(1.02); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes kuetxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes kuetxSlideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes emojiBurst {
    0% { transform: scale(0.6); opacity: 1; }
    50% { transform: scale(1.4); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes particleFly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.anim-pop {
    animation: kuetxPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.anim-bounce {
    animation: kuetxBounceIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.anim-fade {
    animation: kuetxFadeIn 0.2s ease-out forwards;
}

.anim-slide-up {
    animation: kuetxSlideUp 0.3s ease-out forwards;
}

.reaction-burst-active {
    animation: emojiBurst 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Skeleton Loading Shimmer */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-sm);
}

/* Facebook-Style Reaction Animations */
@keyframes reactionBubblePop {
    0% { transform: scale(0.65) translateY(12px); opacity: 0; }
    65% { transform: scale(1.03) translateY(-2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes reactionOptionPop {
    0% { transform: translateY(16px) scale(0.2); opacity: 0; }
    60% { transform: translateY(-5px) scale(1.25); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes reactionTooltipPop {
    0% { transform: translate(-50%, 6px) scale(0.85); opacity: 0; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}