/**
 * ========================================
 * ANIMATIONS.CSS - Animações e Transições
 * ========================================
 * 
 * Animações Premium do Dashboard:
 * - Keyframes (slide, fade, pulse, bounce, glow)
 * - Transições suaves para componentes
 * - Efeitos de entrada e saída
 * - Ripple effects
 * - Loading estados
 * 
 * @author Dashboard Premium V3
 * @created 2025-10-01
 */

/* ========================================
   KEYFRAMES - Definições de Animações
   ======================================== */

/* Slide Animations */
@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromBottom {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade Animations */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse Animations */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes pulseSoft {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.02);
        opacity: 0.9;
    }
}

/* Glow Animations */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.6);
    }
}

@keyframes glowText {
    0%, 100% {
        text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 0 30px rgba(59, 130, 246, 0.8);
    }
}

/* Bounce Animations */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Rotate Animations */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/* Scale Animations */
@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

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

/* Ripple Effect */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Modal Animations */
@keyframes modalEnter {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Spinner Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Progress Animation */
@keyframes progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

/* Shimmer Loading Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ========================================
   COMPONENT ANIMATIONS - Aplicações
   ======================================== */

/* Alert Cards Animations */
.alert-card {
    animation: slideInFromRight 0.6s ease-out;
}

.alert-card:nth-child(1) { animation-delay: 0.1s; }
.alert-card:nth-child(2) { animation-delay: 0.2s; }
.alert-card:nth-child(3) { animation-delay: 0.3s; }
.alert-card:nth-child(4) { animation-delay: 0.4s; }
.alert-card:nth-child(5) { animation-delay: 0.5s; }

/* Alert Stat Cards */
.alert-stat-card {
    animation: fadeInUp 0.8s ease-out;
}

.alert-stat-card:nth-child(1) { animation-delay: 0.2s; }
.alert-stat-card:nth-child(2) { animation-delay: 0.4s; }
.alert-stat-card:nth-child(3) { animation-delay: 0.6s; }

/* Critical Alert Pulse */
.alert-card.critical .alert-icon {
    animation: pulse 2s infinite;
}

.alert-card.critical .alert-badge {
    animation: glow 1.5s infinite;
}

/* Warning Alert Pulse */
.alert-card.warning .alert-icon {
    animation: pulse 3s infinite;
}

/* Critical Stat Card Combined Animation */
.alert-stats-grid .alert-stat-card.critical {
    animation: fadeInUp 0.8s ease-out, pulse 2s infinite 1s;
}

/* Bouncy Icon */
.alert-icon.bouncy {
    animation: bounceIn 1s ease-out;
}

/* Alert Message Toast */
.alert-message {
    animation: slideInFromRight 0.5s ease-out;
}

.alert-message.fade-out {
    animation: slideInFromRight 0.5s ease-out reverse;
}

.alert-message.show {
    transform: translateX(0);
}

/* Alerts Loading Container */
.alerts-loading {
    opacity: 0;
    animation: fadeInUp 1s ease-out 0.3s forwards;
}

/* Modal Animations */
.table-fullscreen-modal.entering {
    animation: modalEnter 0.4s ease-out;
}

.table-fullscreen-modal.exiting {
    animation: modalExit 0.3s ease-in;
}

/* Summary Cards Stagger */
.summary-card {
    animation: fadeInUp 0.6s ease-out;
}

.summary-cards .summary-card:nth-child(1) { animation-delay: 0.1s; }
.summary-cards .summary-card:nth-child(2) { animation-delay: 0.2s; }
.summary-cards .summary-card:nth-child(3) { animation-delay: 0.3s; }
.summary-cards .summary-card:nth-child(4) { animation-delay: 0.4s; }

/* Loading Spinner */
.loading-spinner {
    animation: spin 1s linear infinite;
}

/* Shimmer Loading Effect */
.loading-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Ripple Effect Application */
.btn .ripple {
    animation: ripple 0.6s linear;
}

/* ========================================
   TRANSITION UTILITIES
   ======================================== */

/* Smooth Transitions */
.transition-all {
    transition: all var(--transition-base);
}

.transition-fast {
    transition: all var(--transition-fast);
}

.transition-slow {
    transition: all var(--transition-slow);
}

.transition-transform {
    transition: transform var(--transition-base);
}

.transition-opacity {
    transition: opacity var(--transition-base);
}

.transition-colors {
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

/* ========================================
   HOVER EFFECTS
   ======================================== */

.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(59, 130, 246, 0.3);
}

.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-brightness {
    transition: filter var(--transition-base);
}

.hover-brightness:hover {
    filter: brightness(1.1);
}

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

.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
    animation: pulse 1s ease-out;
}

/* ========================================
   LOADING STATES
   ======================================== */

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

@keyframes loadingDots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Progress Bar Animation */
.progress-bar {
    animation: progress 1.5s ease-out;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* GPU Acceleration for smooth animations */
.gpu-accelerated {
    transform: translateZ(0);
    will-change: transform;
}