src/index.css

/* Base Font Definitions */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

.font-orbitron { font-family: 'Orbitron', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }

/* NEW: Quantum Flux Animation for Header (Professional, Dynamic Motion, Deep Neon Gradient) */
@keyframes quantum-flux {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 15px #00FFFF, 0 0 30px #FF00FF, 0 0 45px #00FFFF; /* Deep Cyan, Deep Magenta */
        transform: translateY(0px) scale(1);
    }
    25% {
        background-position: 25% 75%;
        text-shadow: 0 0 18px #FF00FF, 0 0 35px #00FFFF, 0 0 50px #FF00FF;
        transform: translateY(-3px) scale(1.008); /* More pronounced lift */
    }
    50% {
        background-position: 50% 100%;
        text-shadow: 0 0 20px #00FF00, 0 0 40px #A020F0, 0 0 60px #00FF00; /* Deep Green, Deep Purple */
        transform: translateY(0px) scale(1);
    }
    75% {
        background-position: 75% 25%;
        text-shadow: 0 0 18px #A020F0, 0 0 35px #00FF00, 0 0 50px #A020F0;
        transform: translateY(3px) scale(0.992); /* More pronounced dip */
    }
    100% {
        background-position: 100% 50%;
        text-shadow: 0 0 15px #00FFFF, 0 0 30px #FF00FF, 0 0 45px #00FFFF;
        transform: translateY(0px) scale(1);
    }
}
.animate-quantum-flux {
    /* Define the gradient that will be clipped to text and animated */
    background-image: linear-gradient(90deg, #00FFFF, #FF00FF, #00FF00, #A020F0, #00FFFF);
    background-size: 400% 400%; /* Larger background size for smoother shift */
    animation: quantum-flux 10s ease infinite; /* Quicker, more dynamic shift */
}

/* Light theme header glow (using a lighter version of the quantum-flux idea) */
@keyframes quantum-flux-light {
    0% {
        background-position: 0% 50%;
        text-shadow: 0 0 8px rgba(0, 180, 180, 0.6), 0 0 15px rgba(180, 0, 180, 0.4);
        transform: translateY(0px) scale(1);
    }
    50% {
        background-position: 100% 50%;
        text-shadow: 0 0 12px rgba(180, 0, 180, 0.7), 0 0 20px rgba(0, 180, 180, 0.5);
        transform: translateY(-1.5px) scale(1.004);
    }
    100% {
        background-position: 0% 50%;
        text-shadow: 0 0 8px rgba(0, 180, 180, 0.6), 0 0 15px rgba(180, 0, 180, 0.4);
        transform: translateY(0px) scale(1);
    }
}
.animate-quantum-flux-light {
    background-image: linear-gradient(90deg, #00CCCC, #CC00CC, #00CC00, #AA00AA, #00CCCC);
    background-size: 400% 400%;
    animation: quantum-flux-light 10s ease infinite; /* Quicker */
}


/* Subtle pulse glow for UI elements */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3), 0 0 10px rgba(0, 255, 255, 0.1); }
    50% { box-shadow: 0 0 8px rgba(0, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.2); }
}
.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite alternate;
}

/* Scan line effect for QR preview */
@keyframes scan {
    0% { top: 0%; }
    50% { top: calc(100% - 5px); }
    100% { top: 0%; }
}
.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, transparent, rgba(0, 255, 255, 0.8), transparent);
    animation: scan 3s infinite linear;
    transform-origin: top;
}

/* Custom scrollbar styles */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* Custom style for select dropdown arrow */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
}

/* Animated background gradient - Cyberpunk style for general background */
@keyframes cyberpunk-gradient-shift {
    0% { background-position: 0% 0%; background-color: #1a0033; }
    25% { background-position: 25% 50%; background-color: #001a33; }
    50% { background-position: 50% 100%; background-color: #33001a; }
    75% { background-position: 75% 50%; background-color: #003333; }
    100% { background-position: 100% 0%; background-color: #1a0033; }
}
.animate-gradient-shift {
    background-size: 400% 400%;
    animation: cyberpunk-gradient-shift 20s ease infinite;
}

/* Light theme animated background gradient */
@keyframes gradient-shift-light {
    0% { background-position: 0% 0%; }
    25% { background-position: 25% 50%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 75% 50%; }
    100% { background-position: 100% 0%; }
}
.animate-gradient-shift-light {
    background-size: 400% 400%;
    animation: gradient-shift-light 15s ease infinite;
}

/* Custom fade-in-up animation for alert modal */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
}