/* Custom animations and effects */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

.glow-neon {
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

.glow-neon:hover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.5);
}

.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

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

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

::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6a6a6a;
}

/* Code block styling */
pre {
    position: relative;
    overflow-x: auto;
}

pre code {
    display: block;
    padding: 0;
    background: transparent;
}

/* Pulse animation for online status */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Gradient text animation */
@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-gradient {
    background: linear-gradient(-45deg, #8B5CF6, #06B6D4, #EC4899, #8B5CF6);
    background-size: 400% 400%;
    animation: gradient 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Button hover effects */
button {
    transition: all 0.2s ease;
}

button:hover {
    transform: translateY(-1px);
}

/* Focus states for accessibility */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: 2px solid #06B6D4;
    outline-offset: 2px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .lg\:col-span-3 {
        grid-column: span 1;
    }
    
    .hidden.lg\:block {
        display: none;
    }
}

/* Loading states */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Syntax highlighting for code blocks */
.language-css .token.property { color: #06B6D4; }
.language-css .token.selector { color: #EC4899; }
.language-javascript .token.keyword { color: #8B5CF6; }
.language-javascript .token.function { color: #06B6D4; }
.language-javascript .token.string { color: #10B981; }

/* Easter egg konami code styles */
.konami-active {
    animation: rainbow 2s infinite;
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}