/* ============================================================
   ✨ Animations — Keyframes, Transitions, Micro-animations
   ============================================================ */

/* ===== Fade & Slide ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* ===== Glow & Pulse ===== */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
    50% { box-shadow: 0 0 24px var(--accent-glow), 0 0 48px rgba(183, 148, 246, 0.2); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 currentColor; }
    50% { box-shadow: 0 0 0 8px transparent; }
}

/* ===== Loading ===== */
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

@keyframes dotPulse {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; }
    40% { transform: scale(1.3); opacity: 1; }
}

/* ===== Float ===== */
@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(10px) translateX(-15px); }
    75% { transform: translateY(-10px) translateX(5px); }
}

/* ===== Chat ===== */
@keyframes msgSlide {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-8px); opacity: 1; }
}

/* ===== Hover Effects ===== */
.hover-lift {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.hover-glow {
    transition: all 0.25s;
}
.hover-glow:hover {
    box-shadow: 0 0 20px var(--accent-glow);
}

/* ===== Stagger Animation ===== */
.stagger > * {
    animation: fadeIn 0.4s ease-out backwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.3s; }