@keyframes float {
    0%, 100% {
        transform: translateY(0) rotateX(0) rotateY(0);
    }
    50% {
        transform: translateY(-20px) rotateX(5deg) rotateY(5deg);
    }
}

.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1; /* Added z-index to ensure shapes are below the profile image */
}


.shape {
    position: absolute;
    background: linear-gradient(45deg, rgba(42, 42, 114, 0.1), rgba(0, 159, 253, 0.1));
    border-radius: 50%;
    animation: floatShape infinite;
    z-index: 1; /* Added z-index to ensure shapes are below the profile image */
}

/* 
.shape-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 20%;
    animation-duration: 15s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 20%;
    animation-duration: 18s;
}

.shape-3 {
    width: 80px;
    height: 80px;
    bottom: 20%;
    left: 50%;
    animation-duration: 12s;
} */

@keyframes floatShape {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(50px, 50px) rotate(90deg);
    }
    50% {
        transform: translate(0, 100px) rotate(180deg);
    }
    75% {
        transform: translate(-50px, 50px) rotate(270deg);
    }
}

/* Card Hover Animations */
.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(80, 120, 255, 0.3), rgba(100, 220, 255, 0.3));
    opacity: 0;
    transition: var(--transition);
}

.project-card:hover::before {
    opacity: 1;
}

/* Section Entrance Animations */
.about, .projects, .contact {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Text Gradient Animation */
.gradient-text {
    background-size: 200% auto;
    background-image: linear-gradient(90deg, 
        rgba(0, 180, 255, 0.9) 0%,
        rgba(100, 220, 255, 0.9) 25%, 
        rgba(140, 180, 255, 0.9) 50%,
        rgba(100, 220, 255, 0.9) 75%, 
        rgba(0, 180, 255, 0.9) 100%);
    -webkit-background-clip: text;
    background-clip: text; /* Added for compatibility */

    -webkit-text-fill-color: transparent;
    animation: textGradient 5s linear infinite;
    filter: drop-shadow(0 0 8px rgba(0, 180, 255, 0.4)); /* Reduced shadow intensity */
}

@keyframes textGradient {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }