/* assets/css/effects.css */

/* Dynamic Gradient Background */
.dynamic-gradient-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Behind all content */
    pointer-events: none; /* Allows interaction with elements below */
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 50%, rgba(236, 72, 153, 0.1) 100%);
    filter: blur(180px); /* Increased blur for a soft glow */
    opacity: 0.8;
    transition: background 2s ease, filter 2s ease; /* Smooth transitions */
}

/* Section Entrance Animations */
.dashboard-section {
    opacity: 0;
    transform: translateY(30px); /* Start slightly below */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.dashboard-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* Card Hover Glow - Controlled by JS, but CSS provides base */
.card-shadow-glass,
.db-menu-item,
.service-card-placeholder,
.ticket-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Subtle animation for icons in menu */
.db-menu-item i {
    transition: transform 0.2s ease-in-out;
}

/* Placeholder for other potential JS-driven animations */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

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

/* Example for neon accent on active elements */
.db-menu-item.active {
    /* Glow effect could be added here if JS doesn't handle it sufficiently */
}