/* Education Section Background Animations - Enhanced Version */

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

/* Background base layer with educational theme elements - simplified for performance */
.education::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='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%234361ee' fill-opacity='0.04' d='M0 0h100v100H0z'/%3E%3Cpath d='M35 50c0-8.284 6.716-15 15-15 8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15zm5 0c0 5.523 4.477 10 10 10s10-4.477 10-10-4.477-10-10-10-10 4.477-10 10z' fill='%234361ee' fill-opacity='0.06'/%3E%3Cpath d='M30 30c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10zm50 0c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10z' fill='%234361ee' fill-opacity='0.05'/%3E%3C/svg%3E");
    background-position: center center;
    background-repeat: repeat;
    opacity: 0.6;
    z-index: -1;
    will-change: opacity;
}

[data-theme="dark"] .education::before {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%234361ee' fill-opacity='0.06' d='M0 0h100v100H0z'/%3E%3Cpath d='M35 50c0-8.284 6.716-15 15-15 8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-8.284 0-15-6.716-15-15zm5 0c0 5.523 4.477 10 10 10s10-4.477 10-10-4.477-10-10-10-10 4.477-10 10z' fill='%234361ee' fill-opacity='0.08'/%3E%3Cpath d='M30 30c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10zm50 0c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10-10-4.477-10-10z' fill='%234361ee' fill-opacity='0.07'/%3E%3C/svg%3E");
    opacity: 0.4;
}

/* Simplified glowing orbs - fewer gradients and static (no animation) for better performance */
.education::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.12) 0%, transparent 20%);
    /* No animation for better performance */
}

[data-theme="dark"] .education::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 fewer floating icons (reduced from 7 to 2) - visible in both modes */
.education .container::after {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    z-index: -1;
    background-image: 
        /* Book icon */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'%3E%3C/path%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'%3E%3C/path%3E%3C/svg%3E"),
        
        /* Graduation cap icon */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24' fill='none' stroke='%234361ee' stroke-width='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'%3E%3C/path%3E%3C/svg%3E");
        
    background-position: 
        65% 35%,  /* Book */
        20% 75%;  /* Graduation cap */
        
    background-repeat: no-repeat;
    opacity: 0.12;
    /* Remove filter for better performance */
    /* Slow down animation considerably */
    animation: float-edu-icons 60s ease-in-out infinite;
}

[data-theme="dark"] .education .container::after {
    opacity: 0.25;
}

@keyframes float-edu-icons {
    0% {
        background-position: 
            65% 35%,  /* Book */
            20% 75%;  /* Graduation cap */
    }
    50% {
        background-position: 
            62% 38%,  /* Book */
            23% 72%;  /* Graduation cap */
    }
    100% {
        background-position: 
            65% 35%,  /* Book */
            20% 75%;  /* Graduation cap */
    }
}

/* Enhance the timeline items with educational theme */
.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: -60px;
    top: 25px;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.timeline-item:hover::before {
    opacity: 0.8;
    transform: scale(1.1);
}

.timeline-item:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40' height='40' stroke='%234361ee' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10v6M2 10l10-5 10 5-10 5z'%3E%3C/path%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'%3E%3C/path%3E%3C/svg%3E");
}

.timeline-item:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='40' height='40' stroke='%234361ee' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'%3E%3C/path%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'%3E%3C/path%3E%3C/svg%3E");
}

/* Additional decorative elements for timeline */
.timeline::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, 
        rgba(67, 97, 238, 0.1) 0%,
        rgba(67, 97, 238, 0.3) 20%, 
        rgba(67, 97, 238, 0.5) 50%,
        rgba(67, 97, 238, 0.3) 80%,
        rgba(67, 97, 238, 0.1) 100%);
    border-radius: 5px;
    z-index: 1;
}

[data-theme="dark"] .timeline::before {
    background: linear-gradient(to bottom, 
        rgba(67, 97, 238, 0.1) 0%,
        rgba(67, 97, 238, 0.5) 20%, 
        rgba(67, 97, 238, 0.8) 50%,
        rgba(67, 97, 238, 0.5) 80%,
        rgba(67, 97, 238, 0.1) 100%);
    box-shadow: 0 0 10px rgba(67, 97, 238, 0.2);
}