/* ===== ANIMATIONS ===== */

/* ===== KEYFRAMES ===== */

/* Basic fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal slide in animation */
@keyframes modalSlideIn {
    from { 
        opacity: 0; 
        transform: translateY(-20px) scale(0.95); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* Slide in from different directions */
@keyframes slideInFromLeft {
    from { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

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

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

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

/* Pulse animation for loading states */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.5; 
    }
}

/* Rotate animation for loading spinners */
@keyframes rotate {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

/* Glow effect */
@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 5px rgba(102, 126, 234, 0.5); 
    }
    50% { 
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.8); 
    }
}

/* Bounce effect */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { 
        transform: translateY(0); 
    }
    40%, 43% { 
        transform: translateY(-15px); 
    }
    70% { 
        transform: translateY(-7px); 
    }
    90% { 
        transform: translateY(-3px); 
    }
}

/* Shake effect */
@keyframes shake {
    0%, 100% { 
        transform: translateX(0); 
    }
    10%, 30%, 50%, 70%, 90% { 
        transform: translateX(-5px); 
    }
    20%, 40%, 60%, 80% { 
        transform: translateX(5px); 
    }
}

/* Loading dots animation */
@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* ===== ANIMATION CLASSES ===== */

/* Basic animations */
.fade-in {
    animation: fadeIn 0.5s ease-out both;
}

.slide-in-left {
    animation: slideInFromLeft var(--transition-normal) ease-out;
}

.slide-in-right {
    animation: slideInFromRight var(--transition-normal) ease-out;
}

.slide-in-top {
    animation: slideInFromTop var(--transition-normal) ease-out;
}

.slide-in-bottom {
    animation: slideInFromBottom var(--transition-normal) ease-out;
}

/* Modal animations */
.modal-enter {
    animation: modalSlideIn var(--transition-slow) ease-out;
}

/* Loading animations */
.loading-pulse {
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-primary);
    border-top: 4px solid var(--primary-600);
    border-radius: 50%;
    animation: rotate 1s linear infinite;
    margin: 0 auto;
}

.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

/* Hover effects */
.hover-glow:hover {
    animation: glow 2s infinite;
}

.hover-bounce:hover {
    animation: bounce 1s;
}

.hover-shake:hover {
    animation: shake 0.5s;
}

/* ===== TRANSITION CLASSES ===== */

/* Standard transitions for interactive elements */
.btn,
.form-input,
.form-select,
.form-textarea,
.nav-item,
.list-item,
.card,
.stat-card {
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), border-color var(--transition-fast);
}

/* Hover transform effects */
.btn:hover {
    transform: translateY(-1px);
}

.nav-item:hover {
    transform: translateX(2px);
}

/* Focus transitions */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    transform: translateY(-1px);
}

/* ===== DARK THEME ANIMATIONS ===== */

[data-theme="dark"] .loading-spinner {
    border-color: var(--border-primary);
    border-top-color: var(--primary-500);
}

[data-theme="dark"] .hover-glow:hover {
    animation: glow 2s infinite;
}

/* ===== RESPONSIVE ANIMATIONS ===== */

@media (max-width: 768px) {
    /* Reduce animation intensity on mobile */
    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .slide-in-top,
    .slide-in-bottom,
    .modal-enter {
        animation-duration: var(--transition-normal);
    }
    
    /* Disable hover transforms on touch devices */
    .btn:hover,
    .stat-card:hover,
    .nav-item:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Respect user preference for reduced motion */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-pulse,
    .loading-spinner,
    .hover-glow,
    .hover-bounce,
    .hover-shake {
        animation: none;
    }
}