/* Professional Glassmorphism - Harmonious Color System */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 
        0 2px 4px -1px rgba(15, 23, 42, 0.04),
        0 4px 12px -2px rgba(17, 82, 212, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

:is(.dark .glass-card) {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.6);
    box-shadow: 
        0 2px 4px -1px rgba(0, 0, 0, 0.3),
        0 4px 12px -2px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.glass-card:hover {
    transform: translateY(-4px) translateZ(0);
    border-color: rgba(17, 82, 212, 0.3);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 4px 12px -2px rgba(17, 82, 212, 0.1),
        0 8px 24px -4px rgba(17, 82, 212, 0.08),
        0 12px 32px -6px rgba(17, 82, 212, 0.06),
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(17, 82, 212, 0.08);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

:is(.dark .glass-card:hover) {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(30, 41, 59, 0.7);
    box-shadow: 
        0 4px 12px -2px rgba(0, 0, 0, 0.4),
        0 8px 24px -4px rgba(96, 165, 250, 0.15),
        0 12px 32px -6px rgba(96, 165, 250, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(96, 165, 250, 0.1);
}

/* Premium Glass Cards - Professional Foggy/Frosted - Light Mode Enhanced */
.glass-card-premium {
    /* Professional Light Mode: Clean white with subtle gradient */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.9) 100%);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    
    /* Elegant harmonious border */
    border: 1px solid rgba(226, 232, 240, 0.9);
    
    /* Professional harmonious shadows */
    box-shadow: 
        0 2px 4px -1px rgba(15, 23, 42, 0.05),
        0 4px 12px -2px rgba(17, 82, 212, 0.08),
        0 8px 24px -4px rgba(17, 82, 212, 0.06),
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
        
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform, box-shadow;
    transform: translateZ(0); /* GPU acceleration */
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(30px)) {
    .glass-card-premium {
        background: rgba(255, 255, 255, 0.98);
    }
    
    .dark .glass-card-premium {
        background: rgba(30, 41, 59, 0.85);
    }
}

:is(.dark .glass-card-premium) {
    /* Dark Mode - Harmonious dark gradient */
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.65) 0%, rgba(15, 23, 42, 0.55) 100%);
    border: 1px solid rgba(51, 65, 85, 0.7);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 
        0 2px 4px -1px rgba(0, 0, 0, 0.35),
        0 4px 12px -2px rgba(0, 0, 0, 0.3),
        0 8px 24px -4px rgba(96, 165, 250, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.glass-card-premium:hover {
    transform: translateY(-6px) translateZ(0);
    /* Enhanced harmonious glass effect on hover */
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 250, 252, 0.97) 100%);
    border-color: rgba(17, 82, 212, 0.3);
    box-shadow: 
        0 4px 8px -2px rgba(17, 82, 212, 0.12),
        0 8px 16px -4px rgba(17, 82, 212, 0.1),
        0 16px 32px -8px rgba(17, 82, 212, 0.08),
        0 24px 48px -12px rgba(17, 82, 212, 0.06),
        inset 0 1px 0 0 rgba(255, 255, 255, 1),
        0 0 0 1px rgba(17, 82, 212, 0.1) inset,
        0 0 0 1px rgba(59, 130, 246, 0.05);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

:is(.dark .glass-card-premium:hover) {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.75) 0%, rgba(15, 23, 42, 0.65) 100%);
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 
        0 4px 8px -2px rgba(0, 0, 0, 0.45),
        0 8px 16px -4px rgba(96, 165, 250, 0.15),
        0 16px 32px -8px rgba(96, 165, 250, 0.12),
        0 24px 48px -12px rgba(96, 165, 250, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(96, 165, 250, 0.12);
}

/* CODE EDITOR CARD - Dark Theme */
.glass-card-editor {
    /* Always dark background like a text editor */
    background: linear-gradient(145deg, #1e1e1e 0%, #0d1117 100%);
    color: #c9d1d9; /* Light text for readability */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid #30363d;
    box-shadow: 
        0 20px 50px -10px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.glass-card-editor h3 {
    color: #ffffff !important;
}

.glass-card-editor p {
    color: #8b949e !important;
}

.glass-card-editor:hover {
    transform: translateY(-6px) scale(1.005);
    border-color: #58a6ff; /* VS Code blue accent */
    box-shadow: 
        0 30px 60px -12px rgba(0, 0, 0, 0.7),
        0 0 30px -5px rgba(88, 166, 255, 0.15); /* Blue glow */
}

/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Code Font */
.font-mono-code {
    font-family: 'Space Grotesk', monospace;
}

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Tech Network Animations */
@keyframes drawLine {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0.8;
    }
}

.tech-line {
    animation: drawLine 3s ease-in-out infinite;
}

.tech-node {
    animation: float 4s ease-in-out infinite;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tech-node:hover {
    animation: none;
    z-index: 40 !important;
}

/* Tech Node Glow Effect */
.tech-node::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(45deg, transparent, rgba(17, 82, 212, 0.3), transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tech-node:hover::before {
    opacity: 1;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    to { transform: rotate(360deg); }
}

/* Enhanced Tech Card Hover */
.glass-card-premium:hover .tech-node {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* RTL Specific Flip */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}