@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap');

@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.5); }
    100% { box-shadow: 0 0 20px rgba(139, 92, 246, 0.8); }
}

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

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #581c87, #1e3a8a, #374151);
    min-height: 100vh;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #8b5cf6, #3b82f6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7c3aed, #2563eb);
}

/* Custom glow effects */
.glow-purple {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

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

/* Mobile responsiveness */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .grid {
        gap: 1rem;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-pulse-glow,
    .animate-float,
    .animate-breathe {
        animation: none;
    }
}

/* Focus states for keyboard navigation */
button:focus,
.cursor-pointer:focus {
    outline: 2px solid #8b5cf6;
    outline-offset: 2px;
}