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

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Code block styles */
code {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Gradient text animation */
.gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Card hover effect */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Card hover effect in dark mode */
.dark .card-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Sidebar animation */
.sidebar-item {
    position: relative;
    transition: all 0.2s ease;
}

.sidebar-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 0.3s ease;
}

.sidebar-item:hover::before {
    width: 4px;
}

/* Background gradient animation */
body {
    background-attachment: fixed;
    animation: gradient-bg 10s ease infinite;
}

@keyframes gradient-bg {
    0%, 100% {
        background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 50%, #f3e8ff 100%);
    }
    50% {
        background: linear-gradient(135deg, #eff6ff 0%, #ddd6fe 50%, #fae8ff 100%);
    }
}

/* Dark mode background */
.dark body {
    animation: gradient-bg-dark 10s ease infinite;
}

@keyframes gradient-bg-dark {
    0%, 100% {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e1b4b 100%);
    }
    50% {
        background: linear-gradient(135deg, #020617 0%, #1e1b4b 50%, #1c1917 100%);
    }
}

/* Glass effect */
.glass-effect {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass-effect {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Button animation */
.btn-animated {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-animated:hover::before {
    left: 100%;
}

/* Code block syntax highlighting */
.language-javascript {
    color: #f8f8f2;
}

.language-javascript .keyword {
    color: #66d9ef;
}

.language-javascript .string {
    color: #e6db74;
}

.language-javascript .comment {
    color: #75715e;
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a6fd8, #6a4190);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-effect {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .gradient-text {
        background-size: 100% 100%;
        animation: none;
    }
}

/* Loading animation */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add delay for different elements */
.fade-in:nth-child(1) { animation-delay: 0.1s; }
.fade-in:nth-child(2) { animation-delay: 0.2s; }
.fade-in:nth-child(3) { animation-delay: 0.3s; }
.fade-in:nth-child(4) { animation-delay: 0.4s; }
.fade-in:nth-child(5) { animation-delay: 0.5s; }

/* Theme toggle animation */
* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Special effects - rainbow border */
.rainbow-border {
    position: relative;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
    background-size: 400% 400%;
    animation: rainbow 4s ease infinite;
    padding: 2px;
    border-radius: 8px;
}

.rainbow-border::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: white;
    border-radius: 6px;
    z-index: -1;
}

.dark .rainbow-border::before {
    background: #1e293b;
}

@keyframes rainbow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}