/* Project Section Background Animations - Enhanced Version */

/* Add background patterns to the projects section */
.projects {
    position: relative;
    overflow: hidden;
}

/* Base background with tech-themed elements */
.projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%234361ee' fill-opacity='0.04' d='M0 0h120v120H0z'/%3E%3Cpath d='M30 60c0-16.569 13.431-30 30-30 16.569 0 30 13.431 30 30 0 16.569-13.431 30-30 30-16.569 0-30-13.431-30-30zm15 0c0 8.284 6.716 15 15 15s15-6.716 15-15-6.716-15-15-15-15 6.716-15 15z' fill='%234361ee' fill-opacity='0.06'/%3E%3Cpath d='M95 30l-10 10h20z' fill='%234361ee' fill-opacity='0.08'/%3E%3Cpath d='M15 80l10 10H5z' fill='%234361ee' fill-opacity='0.08'/%3E%3Crect x='40' y='5' width='5' height='5' fill='%234361ee' fill-opacity='0.07'/%3E%3Crect x='80' y='95' width='7' height='7' fill='%234361ee' fill-opacity='0.07'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='%234361ee' fill-opacity='0.03'%3E%3Cpath d='M8 16v32h48V16H8zm44 28H12V20h40v24z'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Ccircle cx='48' cy='16' r='4'/%3E%3Ccircle cx='16' cy='48' r='4'/%3E%3Ccircle cx='48' cy='48' r='4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 64 64' fill='%234361ee' fill-opacity='0.04'%3E%3Cpath d='M32 0 L16 32 L32 64 L48 32 Z'/%3E%3C/svg%3E");
    background-size: 120px, 64px, 48px;
    background-position: 
        center center,
        10% 20%,
        90% 80%;
    opacity: 0.6;
    z-index: -1;
}

[data-theme="dark"] .projects::before {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath fill='%234361ee' fill-opacity='0.06' d='M0 0h120v120H0z'/%3E%3Cpath d='M30 60c0-16.569 13.431-30 30-30 16.569 0 30 13.431 30 30 0 16.569-13.431 30-30 30-16.569 0-30-13.431-30-30zm15 0c0 8.284 6.716 15 15 15s15-6.716 15-15-6.716-15-15-15-15 6.716-15 15z' fill='%234361ee' fill-opacity='0.08'/%3E%3Cpath d='M95 30l-10 10h20z' fill='%234361ee' fill-opacity='0.1'/%3E%3Cpath d='M15 80l10 10H5z' fill='%234361ee' fill-opacity='0.1'/%3E%3Crect x='40' y='5' width='5' height='5' fill='%234361ee' fill-opacity='0.09'/%3E%3Crect x='80' y='95' width='7' height='7' fill='%234361ee' fill-opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='%234361ee' fill-opacity='0.07'%3E%3Cpath d='M8 16v32h48V16H8zm44 28H12V20h40v24z'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3Ccircle cx='48' cy='16' r='4'/%3E%3Ccircle cx='16' cy='48' r='4'/%3E%3Ccircle cx='48' cy='48' r='4'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 64 64' fill='%234361ee' fill-opacity='0.08'%3E%3Cpath d='M32 0 L16 32 L32 64 L48 32 Z'/%3E%3C/svg%3E");
    opacity: 0.4;
}

/* Add colorful glowing orbs in background - reduced gradients and made static for performance */
.projects::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(67, 97, 238, 0.15) 0%, transparent 25%),
        radial-gradient(circle at 80% 20%, rgba(72, 149, 239, 0.1) 0%, transparent 20%);
    /* No animation for better performance */
}

[data-theme="dark"] .projects::after {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(67, 97, 238, 0.25) 0%, transparent 25%),
        radial-gradient(circle at 80% 20%, rgba(72, 149, 239, 0.2) 0%, transparent 20%);
}

/* Add floating project-related tech icons with connection lines */
.projects .container {
    position: relative;
}

.projects .container::after {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background-image: 
        /* GitHub icon */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22'%3E%3C/path%3E%3C/svg%3E"),
        
        /* Code icon */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='45' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'%3E%3C/polyline%3E%3Cpolyline points='8 6 2 12 8 18'%3E%3C/polyline%3E%3C/svg%3E"),
        
        /* Server/Database icon */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'%3E%3C/ellipse%3E%3Cpath d='M21 12c0 1.66-4 3-9 3s-9-1.34-9-3'%3E%3C/path%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'%3E%3C/path%3E%3C/svg%3E"),
        
        /* Browser/App icon */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55' height='55' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='3' y1='9' x2='21' y2='9'%3E%3C/line%3E%3Cline x1='9' y1='21' x2='9' y2='9'%3E%3C/line%3E%3C/svg%3E");
    
    background-position: 
        15% 20%,  /* GitHub */
        85% 30%,  /* Code */
        35% 50%,  /* Database */
        70% 70%;  /* Browser */
        
    background-repeat: no-repeat;
    opacity: 0.12;
    z-index: -1;
    background-size: contain;
    /* Remove filter for better performance */
    /* Slow down animation considerably */
    animation: float-project-icons 60s ease-in-out infinite;
}

[data-theme="dark"] .projects .container::after {
    opacity: 0.25;
    /* Remove filter for better performance */
}

@keyframes float-project-icons {
    0% {
        background-position: 
            15% 20%,  /* GitHub */
            85% 30%,  /* Code */
            35% 50%,  /* Database */
            70% 70%;  /* Browser */
    }
    50% {
        background-position: 
            17% 22%,  /* GitHub */
            83% 32%,  /* Code */
            37% 52%,  /* Database */
            68% 72%;  /* Browser */
    }
    100% {
        background-position: 
            15% 20%,  /* GitHub */
            85% 30%,  /* Code */
            35% 50%,  /* Database */
            70% 70%;  /* Browser */
    }
}

/* Simplified connection pattern (static instead of animated) */
.projects .container::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    z-index: -3;
    opacity: 0.3;
    background-image:
        linear-gradient(to right, rgba(67, 97, 238, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(67, 97, 238, 0.02) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px;
    /* No animation for better performance */
    will-change: opacity;
}

[data-theme="dark"] .projects .container::before {
    opacity: 0.15;
    background-image: 
        linear-gradient(to right, rgba(67, 97, 238, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(67, 97, 238, 0.04) 1px, transparent 1px);
}

@keyframes grid-movement {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0;
    }
    100% {
        background-position: 60px 60px, 60px 60px, 20px 20px, 20px 20px;
    }
}

/* Add a highlight when a project is clicked */
.project-item.clicked-active::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    background: radial-gradient(circle at center, rgba(67, 97, 238, 0.15) 0%, transparent 70%);
    z-index: -1;
    opacity: 0;
    animation: project-pulse 2s ease-in-out infinite;
}

@keyframes project-pulse {
    0% { opacity: 0; }
    50% { opacity: 0.8; }
    100% { opacity: 0; }
}