/* ============================================
   VIBRANT ANIMATIONS AND EFFECTS
   ============================================ */

/* Card entrance animation */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle glow pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(95, 95, 240, 0.08);
    }
    50% {
        box-shadow: 0 4px 20px rgba(95, 95, 240, 0.15);
    }
}

/* Accent glow pulse */
@keyframes accentGlowPulse {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(255, 46, 126, 0.08);
    }
    50% {
        box-shadow: 0 4px 20px rgba(255, 46, 126, 0.15);
    }
}

/* Bounce effect for icons */
@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

/* Color shift animation */
@keyframes colorShift {
    0%, 100% {
        color: #5f5ff0;
    }
    50% {
        color: #0db5ff;
    }
}

/* Apply animations to cards on hover */
html.light-mode .stat-card:hover,
body.light-mode .stat-card:hover,
html.light-mode .card:hover,
body.light-mode .card:hover {
    animation: glowPulse 0.6s ease-in-out;
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Enhance button hover with more energy */
html.light-mode .btn-report:hover i,
html.light-mode .view-more-btn:hover i,
body.light-mode .btn-report:hover i,
body.light-mode .view-more-btn:hover i {
    animation: iconBounce 0.4s ease-in-out infinite;
}

/* Menu link active state animation */
html.light-mode .menu-item.active .menu-link,
body.light-mode .menu-item.active .menu-link {
    animation: glowPulse 0.6s ease-in-out;
}

/* Enhanced chart container hover */
html.light-mode .chart-container:hover,
body.light-mode .chart-container:hover {
    transform: translateY(-1px);
    animation: glowPulse 0.6s ease-in-out;
}

/* Vibrant stat value animation */
html.light-mode .stat-value,
body.light-mode .stat-value {
    animation: colorShift 3s ease-in-out infinite;
}

/* Report card hover lift */
html.light-mode .report-card:hover,
body.light-mode .report-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(95, 95, 240, 0.2) !important;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon pulse on hover */
html.light-mode .report-icon:hover,
body.light-mode .report-icon:hover {
    animation: accentGlowPulse 0.6s ease-in-out;
}

/* Smooth table row hover */
html.light-mode tr:hover,
body.light-mode tr:hover {
    background: rgba(95, 95, 240, 0.08) !important;
    transform: scale(1.01);
    transition: all 0.3s ease;
}

/* Input focus glow */
html.light-mode input:focus,
html.light-mode textarea:focus,
body.light-mode input:focus,
body.light-mode textarea:focus {
    animation: glowPulse 0.6s ease-in-out;
}

/* Dropdown entrance animation */
@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.light-mode .dropdown-menu,
body.light-mode .dropdown-menu {
    animation: dropdownSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Badge pulse */
@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 56, 96, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 6px rgba(255, 56, 96, 0);
    }
}

html.light-mode .notification-badge,
body.light-mode .notification-badge {
    animation: badgePulse 2s infinite;
}

/* Success check bounce */
@keyframes checkBounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.15) rotate(5deg);
    }
}

html.light-mode .form-hint.success,
body.light-mode .form-hint.success {
    animation: checkBounce 0.6s ease-in-out;
}

/* Smooth page transitions */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html.light-mode .page-section,
body.light-mode .page-section {
    animation: fadeInUp 0.5s ease-out;
}

/* Success notification slide in */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

html.light-mode .notification.show,
body.light-mode .notification.show {
    animation: slideInRight 0.3s ease-out;
}

/* Enhanced loading spinner */
@keyframes spinnerRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#pageLoader .loader-spinner {
    animation: spinnerRotate 0.8s linear infinite;
}

/* Tab highlight animation */
@keyframes tabGlow {
    0%, 100% {
        border-bottom-color: #5f5ff0;
        box-shadow: none;
    }
    50% {
        border-bottom-color: #0db5ff;
        box-shadow: 0 2px 8px rgba(13, 181, 255, 0.3);
    }
}

/* Smooth reveal for stat numbers */
@keyframes numberReveal {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

html.light-mode .stat-number,
body.light-mode .stat-number {
    animation: numberReveal 0.5s ease-out;
}
