/* Custom CSS for Portfolio Website */

/* Section Transitions */
section {
    position: relative;
    z-index: 1;
}

section:not(:first-child) {
    margin-top: -1px;
}

/* Dark Section Background Texture */
.section-bg-texture-dark {
    position: relative;
    overflow: hidden;
}

.section-bg-texture-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.03) 0%, transparent 50%);
    background-size: 200px 200px, 300px 300px, 400px 400px;
    animation: texture-float 20s ease-in-out infinite;
    z-index: 0;
}

.section-bg-texture-dark::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, transparent 40%, rgba(59, 130, 246, 0.03) 50%, transparent 60%),
        linear-gradient(-45deg, transparent 40%, rgba(139, 92, 246, 0.03) 50%, transparent 60%);
    background-size: 100px 100px;
    animation: texture-shift 15s ease-in-out infinite reverse;
    z-index: 0;
}

/* Light Section Background Texture */
.section-bg-texture-light {
    position: relative;
    overflow: hidden;
}

.section-bg-texture-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(245, 158, 11, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(239, 68, 68, 0.04) 0%, transparent 50%);
    background-size: 250px 250px, 350px 350px, 450px 450px;
    animation: texture-float-light 25s ease-in-out infinite;
    z-index: 0;
}

.section-bg-texture-light::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(30deg, transparent 40%, rgba(16, 185, 129, 0.03) 50%, transparent 60%),
        linear-gradient(-30deg, transparent 40%, rgba(245, 158, 11, 0.03) 50%, transparent 60%);
    background-size: 120px 120px;
    animation: texture-shift-light 18s ease-in-out infinite reverse;
    z-index: 0;
}

@keyframes texture-float {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translateX(10px) translateY(-10px) scale(1.05);
        opacity: 0.8;
    }
}

@keyframes texture-shift {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
        opacity: 0.3;
    }
    50% {
        transform: translateX(-5px) translateY(5px);
        opacity: 0.6;
    }
}

@keyframes texture-float-light {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translateX(15px) translateY(-15px) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes texture-shift-light {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
        opacity: 0.2;
    }
    50% {
        transform: translateX(-8px) translateY(8px);
        opacity: 0.7;
    }
}

/* Ensure content stays above background effects */
.section-bg-texture-dark > *,
.section-bg-texture-light > * {
    position: relative;
    z-index: 1;
}

/* Simple texture overlay */
.simple-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.01) 2px,
            rgba(255, 255, 255, 0.01) 4px
        );
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

/* Subtle Background Effects for Sections */
.section-bg-effect {
    position: relative;
    overflow: hidden;
}

.section-bg-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.02) 0%, transparent 50%);
    animation: bg-float 30s ease-in-out infinite;
    z-index: 0;
}

.section-bg-effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 40%, rgba(59, 130, 246, 0.01) 50%, transparent 60%);
    background-size: 200px 200px;
    animation: bg-shift 25s ease-in-out infinite reverse;
    z-index: 0;
}

@keyframes bg-float {
    0%, 100% {
        transform: translateX(0px) translateY(0px) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateX(10px) translateY(-10px) scale(1.1);
        opacity: 0.6;
    }
}

@keyframes bg-shift {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
        opacity: 0.2;
    }
    50% {
        transform: translateX(-5px) translateY(5px);
        opacity: 0.4;
    }
}

/* Ensure content stays above background effects */
.section-bg-effect > * {
    position: relative;
    z-index: 1;
}

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

@keyframes float-delayed {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

@keyframes float-more-delayed {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-6px); }
}

@keyframes dash {
    to { stroke-dashoffset: -10; }
}

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

.animate-float-delayed {
    animation: float-delayed 3s ease-in-out infinite 0.5s;
}

.animate-float-more-delayed {
    animation: float-more-delayed 3s ease-in-out infinite 1s;
}

.animate-dash {
    animation: dash 2s linear infinite;
}

/* New About Section Animations */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes progress {
    0% { width: 0%; }
    100% { width: var(--progress-width); }
}

@keyframes progress-delayed {
    0% { width: 0%; }
    100% { width: var(--progress-width); }
}

@keyframes progress-more-delayed {
    0% { width: 0%; }
    100% { width: var(--progress-width); }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-15px) translateX(5px); }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-progress {
    animation: progress 2s ease-out forwards;
}

.animate-progress-delayed {
    animation: progress-delayed 2s ease-out 0.5s forwards;
}

.animate-progress-more-delayed {
    animation: progress-more-delayed 2s ease-out 1s forwards;
}

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

/* Heartbeat Dot Animations */
@keyframes heartbeat-dot {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

@keyframes heartbeat-dot-delayed {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

@keyframes heartbeat-dot-more-delayed {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

@keyframes heartbeat-dot-most-delayed {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

.animate-heartbeat-dot {
    animation: heartbeat-dot 3s linear infinite;
}

.animate-heartbeat-dot-delayed {
    animation: heartbeat-dot-delayed 3s linear infinite 0.75s;
}

.animate-heartbeat-dot-more-delayed {
    animation: heartbeat-dot-more-delayed 3s linear infinite 1.5s;
}

.animate-heartbeat-dot-most-delayed {
    animation: heartbeat-dot-most-delayed 3s linear infinite 2.25s;
}

/* 3D Cube Styles */
.cube-container {
    perspective: 1000px;
    width: 100%;
    height: 100%;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(-15deg);
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.front  { transform: rotateY(0deg) translateZ(8px); }
.back   { transform: rotateY(180deg) translateZ(8px); }
.right  { transform: rotateY(90deg) translateZ(8px); }
.left   { transform: rotateY(-90deg) translateZ(8px); }
.top    { transform: rotateX(90deg) translateZ(8px); }
.bottom { transform: rotateX(-90deg) translateZ(8px); }

/* Cube Animations */
@keyframes cube-1 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    25% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(90deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(180deg); }
    75% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(270deg); }
}

@keyframes cube-2 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    25% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-90deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-180deg); }
    75% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-270deg); }
}

@keyframes cube-3 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    33% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(120deg); }
    66% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(240deg); }
}

@keyframes cube-4 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    33% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-120deg); }
    66% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-240deg); }
}

@keyframes cube-5 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(180deg); }
}

@keyframes cube-6 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-180deg); }
}

@keyframes cube-7 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    25% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(90deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(180deg); }
    75% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(270deg); }
}

@keyframes cube-8 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    25% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-90deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-180deg); }
    75% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-270deg); }
}

@keyframes cube-9 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    33% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(120deg); }
    66% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(240deg); }
}

@keyframes cube-10 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    33% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-120deg); }
    66% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-240deg); }
}

@keyframes cube-11 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(180deg); }
}

@keyframes cube-12 {
    0%, 100% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(0deg); }
    50% { transform: rotateX(-15deg) rotateY(-15deg) rotateZ(-180deg); }
}

.animate-cube-1 { animation: cube-1 4s linear infinite; }
.animate-cube-2 { animation: cube-2 4s linear infinite 0.5s; }
.animate-cube-3 { animation: cube-3 3s linear infinite 1s; }
.animate-cube-4 { animation: cube-4 3s linear infinite 1.5s; }
.animate-cube-5 { animation: cube-5 2s linear infinite 2s; }
.animate-cube-6 { animation: cube-6 2s linear infinite 2.5s; }
.animate-cube-7 { animation: cube-7 4s linear infinite 3s; }
.animate-cube-8 { animation: cube-8 4s linear infinite 3.5s; }
.animate-cube-9 { animation: cube-9 3s linear infinite 4s; }
.animate-cube-10 { animation: cube-10 3s linear infinite 4.5s; }
.animate-cube-11 { animation: cube-11 2s linear infinite 5s; }
.animate-cube-12 { animation: cube-12 2s linear infinite 5.5s; }

/* Data Stream Animations */
@keyframes data-stream-1 {
    0%, 100% { height: 20%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-2 {
    0%, 100% { height: 30%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-3 {
    0%, 100% { height: 40%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-4 {
    0%, 100% { height: 25%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-5 {
    0%, 100% { height: 35%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-6 {
    0%, 100% { height: 45%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-7 {
    0%, 100% { height: 20%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-8 {
    0%, 100% { height: 30%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-9 {
    0%, 100% { height: 40%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-10 {
    0%, 100% { height: 25%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-11 {
    0%, 100% { height: 35%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

@keyframes data-stream-12 {
    0%, 100% { height: 45%; opacity: 0.5; }
    50% { height: 100%; opacity: 1; }
}

.animate-data-stream-1 { animation: data-stream-1 2s ease-in-out infinite; }
.animate-data-stream-2 { animation: data-stream-2 2s ease-in-out infinite 0.2s; }
.animate-data-stream-3 { animation: data-stream-3 2s ease-in-out infinite 0.4s; }
.animate-data-stream-4 { animation: data-stream-4 2s ease-in-out infinite 0.6s; }
.animate-data-stream-5 { animation: data-stream-5 2s ease-in-out infinite 0.8s; }
.animate-data-stream-6 { animation: data-stream-6 2s ease-in-out infinite 1s; }
.animate-data-stream-7 { animation: data-stream-7 2s ease-in-out infinite 1.2s; }
.animate-data-stream-8 { animation: data-stream-8 2s ease-in-out infinite 1.4s; }
.animate-data-stream-9 { animation: data-stream-9 2s ease-in-out infinite 1.6s; }
.animate-data-stream-10 { animation: data-stream-10 2s ease-in-out infinite 1.8s; }
.animate-data-stream-11 { animation: data-stream-11 2s ease-in-out infinite 2s; }
.animate-data-stream-12 { animation: data-stream-12 2s ease-in-out infinite 2.2s; }

/* Audio Visualizer Animations */
@keyframes audio-bar-1 {
    0%, 100% { height: 20%; opacity: 0.7; }
    25% { height: 60%; opacity: 1; }
    50% { height: 90%; opacity: 0.9; }
    75% { height: 40%; opacity: 0.8; }
}

@keyframes audio-bar-2 {
    0%, 100% { height: 30%; opacity: 0.7; }
    25% { height: 70%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 50%; opacity: 0.8; }
}

@keyframes audio-bar-3 {
    0%, 100% { height: 25%; opacity: 0.7; }
    25% { height: 65%; opacity: 1; }
    50% { height: 95%; opacity: 0.9; }
    75% { height: 45%; opacity: 0.8; }
}

@keyframes audio-bar-4 {
    0%, 100% { height: 35%; opacity: 0.7; }
    25% { height: 75%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 55%; opacity: 0.8; }
}

@keyframes audio-bar-5 {
    0%, 100% { height: 20%; opacity: 0.7; }
    25% { height: 60%; opacity: 1; }
    50% { height: 90%; opacity: 0.9; }
    75% { height: 40%; opacity: 0.8; }
}

@keyframes audio-bar-6 {
    0%, 100% { height: 40%; opacity: 0.7; }
    25% { height: 80%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 60%; opacity: 0.8; }
}

@keyframes audio-bar-7 {
    0%, 100% { height: 15%; opacity: 0.7; }
    25% { height: 55%; opacity: 1; }
    50% { height: 85%; opacity: 0.9; }
    75% { height: 35%; opacity: 0.8; }
}

@keyframes audio-bar-8 {
    0%, 100% { height: 30%; opacity: 0.7; }
    25% { height: 70%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 50%; opacity: 0.8; }
}

@keyframes audio-bar-9 {
    0%, 100% { height: 25%; opacity: 0.7; }
    25% { height: 65%; opacity: 1; }
    50% { height: 95%; opacity: 0.9; }
    75% { height: 45%; opacity: 0.8; }
}

@keyframes audio-bar-10 {
    0%, 100% { height: 35%; opacity: 0.7; }
    25% { height: 75%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 55%; opacity: 0.8; }
}

@keyframes audio-bar-11 {
    0%, 100% { height: 20%; opacity: 0.7; }
    25% { height: 60%; opacity: 1; }
    50% { height: 90%; opacity: 0.9; }
    75% { height: 40%; opacity: 0.8; }
}

@keyframes audio-bar-12 {
    0%, 100% { height: 30%; opacity: 0.7; }
    25% { height: 70%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 50%; opacity: 0.8; }
}

@keyframes audio-bar-13 {
    0%, 100% { height: 25%; opacity: 0.7; }
    25% { height: 65%; opacity: 1; }
    50% { height: 95%; opacity: 0.9; }
    75% { height: 45%; opacity: 0.8; }
}

@keyframes audio-bar-14 {
    0%, 100% { height: 35%; opacity: 0.7; }
    25% { height: 75%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 55%; opacity: 0.8; }
}

@keyframes audio-bar-15 {
    0%, 100% { height: 20%; opacity: 0.7; }
    25% { height: 60%; opacity: 1; }
    50% { height: 90%; opacity: 0.9; }
    75% { height: 40%; opacity: 0.8; }
}

@keyframes audio-bar-16 {
    0%, 100% { height: 30%; opacity: 0.7; }
    25% { height: 70%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 50%; opacity: 0.8; }
}

@keyframes audio-bar-17 {
    0%, 100% { height: 25%; opacity: 0.7; }
    25% { height: 65%; opacity: 1; }
    50% { height: 95%; opacity: 0.9; }
    75% { height: 45%; opacity: 0.8; }
}

@keyframes audio-bar-18 {
    0%, 100% { height: 35%; opacity: 0.7; }
    25% { height: 75%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 55%; opacity: 0.8; }
}

@keyframes audio-bar-19 {
    0%, 100% { height: 20%; opacity: 0.7; }
    25% { height: 60%; opacity: 1; }
    50% { height: 90%; opacity: 0.9; }
    75% { height: 40%; opacity: 0.8; }
}

@keyframes audio-bar-20 {
    0%, 100% { height: 30%; opacity: 0.7; }
    25% { height: 70%; opacity: 1; }
    50% { height: 100%; opacity: 0.9; }
    75% { height: 50%; opacity: 0.8; }
}

.animate-audio-bar-1 { animation: audio-bar-1 1.5s ease-in-out infinite; }
.animate-audio-bar-2 { animation: audio-bar-2 1.5s ease-in-out infinite 0.1s; }
.animate-audio-bar-3 { animation: audio-bar-3 1.5s ease-in-out infinite 0.2s; }
.animate-audio-bar-4 { animation: audio-bar-4 1.5s ease-in-out infinite 0.3s; }
.animate-audio-bar-5 { animation: audio-bar-5 1.5s ease-in-out infinite 0.4s; }
.animate-audio-bar-6 { animation: audio-bar-6 1.5s ease-in-out infinite 0.5s; }
.animate-audio-bar-7 { animation: audio-bar-7 1.5s ease-in-out infinite 0.6s; }
.animate-audio-bar-8 { animation: audio-bar-8 1.5s ease-in-out infinite 0.7s; }
.animate-audio-bar-9 { animation: audio-bar-9 1.5s ease-in-out infinite 0.8s; }
.animate-audio-bar-10 { animation: audio-bar-10 1.5s ease-in-out infinite 0.9s; }
.animate-audio-bar-11 { animation: audio-bar-11 1.5s ease-in-out infinite 1s; }
.animate-audio-bar-12 { animation: audio-bar-12 1.5s ease-in-out infinite 1.1s; }
.animate-audio-bar-13 { animation: audio-bar-13 1.5s ease-in-out infinite 1.2s; }
.animate-audio-bar-14 { animation: audio-bar-14 1.5s ease-in-out infinite 1.3s; }
.animate-audio-bar-15 { animation: audio-bar-15 1.5s ease-in-out infinite 1.4s; }
.animate-audio-bar-16 { animation: audio-bar-16 1.5s ease-in-out infinite 1.5s; }
.animate-audio-bar-17 { animation: audio-bar-17 1.5s ease-in-out infinite 1.6s; }
.animate-audio-bar-18 { animation: audio-bar-18 1.5s ease-in-out infinite 1.7s; }
.animate-audio-bar-19 { animation: audio-bar-19 1.5s ease-in-out infinite 1.8s; }
.animate-audio-bar-20 { animation: audio-bar-20 1.5s ease-in-out infinite 1.9s; }

/* Frequency Line Animations */
@keyframes frequency-1 {
    0%, 100% { height: 4px; opacity: 0.5; }
    50% { height: 16px; opacity: 1; }
}

@keyframes frequency-2 {
    0%, 100% { height: 3px; opacity: 0.5; }
    50% { height: 12px; opacity: 1; }
}

@keyframes frequency-3 {
    0%, 100% { height: 5px; opacity: 0.5; }
    50% { height: 20px; opacity: 1; }
}

@keyframes frequency-4 {
    0%, 100% { height: 4px; opacity: 0.5; }
    50% { height: 16px; opacity: 1; }
}

.animate-frequency-1 { animation: frequency-1 2s ease-in-out infinite; }
.animate-frequency-2 { animation: frequency-2 2s ease-in-out infinite 0.5s; }
.animate-frequency-3 { animation: frequency-3 2s ease-in-out infinite 1s; }
.animate-frequency-4 { animation: frequency-4 2s ease-in-out infinite 1.5s; }

/* Pulse Dot Animations */
@keyframes pulse-dot-1 {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

@keyframes pulse-dot-2 {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

@keyframes pulse-dot-3 {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

@keyframes pulse-dot-4 {
    0% { transform: translateX(0px) scale(1); opacity: 1; }
    25% { transform: translateX(50px) scale(1.2); opacity: 0.8; }
    50% { transform: translateX(100px) scale(1); opacity: 1; }
    75% { transform: translateX(150px) scale(1.2); opacity: 0.8; }
    100% { transform: translateX(200px) scale(1); opacity: 1; }
}

.animate-pulse-dot-1 { animation: pulse-dot-1 3s linear infinite; }
.animate-pulse-dot-2 { animation: pulse-dot-2 3s linear infinite 0.75s; }
.animate-pulse-dot-3 { animation: pulse-dot-3 3s linear infinite 1.5s; }
.animate-pulse-dot-4 { animation: pulse-dot-4 3s linear infinite 2.25s; }

/* Skills Carousel Styles */
.skills-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.skill-item {
    position: absolute;
    white-space: nowrap;
    font-weight: 500;
    transition: all 0.3s ease;
    left: 50%;
    transform: translateX(-50%);
}

/* Carousel Animations */
@keyframes carousel-1 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-2 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-3 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-4 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-5 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-6 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-7 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-8 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-9 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-10 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-11 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-12 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-13 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-14 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-15 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

@keyframes carousel-16 {
    0% { transform: translateX(-50%) translateY(-100vh); opacity: 0; }
    5% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    25% { transform: translateX(-50%) translateY(-80vh); opacity: 1; }
    85% { transform: translateX(-50%) translateY(20vh); opacity: 1; }
    100% { transform: translateX(-50%) translateY(100vh); opacity: 0; }
}

.animate-carousel-1 { animation: carousel-1 10s linear infinite; }
.animate-carousel-2 { animation: carousel-2 10s linear infinite 0.6s; }
.animate-carousel-3 { animation: carousel-3 10s linear infinite 1.2s; }
.animate-carousel-4 { animation: carousel-4 10s linear infinite 1.8s; }
.animate-carousel-5 { animation: carousel-5 10s linear infinite 2.4s; }
.animate-carousel-6 { animation: carousel-6 10s linear infinite 3s; }
.animate-carousel-7 { animation: carousel-7 10s linear infinite 3.6s; }
.animate-carousel-8 { animation: carousel-8 10s linear infinite 4.2s; }
.animate-carousel-9 { animation: carousel-9 10s linear infinite 4.8s; }
.animate-carousel-10 { animation: carousel-10 10s linear infinite 5.4s; }
.animate-carousel-11 { animation: carousel-11 10s linear infinite 6s; }
.animate-carousel-12 { animation: carousel-12 10s linear infinite 6.6s; }
.animate-carousel-13 { animation: carousel-13 10s linear infinite 7.2s; }
.animate-carousel-14 { animation: carousel-14 10s linear infinite 7.8s; }
.animate-carousel-15 { animation: carousel-15 10s linear infinite 8.4s; }
.animate-carousel-16 { animation: carousel-16 10s linear infinite 9s; }

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #3b82f6, #8b5cf6);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #2563eb, #7c3aed);
}

/* Hero Background Image */
.hero-bg-collage {
    /* background-image: url('Hero-bg.png'); */
    background-image: url('assets/Hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: hero-complex 25s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform;
}

/* Skills Section Background - Similar to hero but with different animation timing */
.skills-bg-collage {
    background-image: url('assets/Hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    animation: skills-complex 20s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform;
}

/* Glass Morphism Effect for Skills Container */
.glass-container {
    background: rgba(31, 41, 55, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .glass-container {
        background: rgba(31, 41, 55, 0.9);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
}

.glass-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    pointer-events: none;
}

/* Glass effect for individual skill cards */
.glass-card {
    background: rgba(55, 65, 81, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 4px 16px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(75, 85, 99, 0.3);
    transform: translateY(-5px) scale(1.02);
    box-shadow: 
        0 8px 25px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

/* Minimalist Modern Card for About Section */
.minimalist-card {
    background: rgba(31, 41, 55, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 4px 20px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.minimalist-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Skill Tag Styles */
.skill-tag {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.skill-tag:hover {
    transform: translateY(-1px);
    border-color: currentColor;
    opacity: 0.8;
}

/* Google Badge Styles */
.google-badge {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

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

.google-badge:hover::before {
    left: 100%;
}

.google-badge:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Google Badge Icon Animation */
.google-badge .w-12 {
    transition: all 0.3s ease;
}

.google-badge:hover .w-12 {
    transform: scale(1.1);
}

/* Google Badge Text Animation */
.google-badge h5 {
    transition: all 0.3s ease;
}

.google-badge:hover h5 {
    transform: translateY(-1px);
}

/* Simple Social Link */
.simple-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.simple-social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.simple-social-link:hover::before {
    opacity: 1;
}

.simple-social-link:hover {
    transform: translateY(-2px);
}

/* Clean Avatar Animation */
.minimalist-card .w-28 {
    transition: all 0.3s ease;
}

.minimalist-card:hover .w-28 {
    transform: scale(1.05);
}

/* Stats Animation */
.minimalist-card .text-2xl {
    transition: all 0.3s ease;
}

.minimalist-card:hover .text-2xl {
    transform: scale(1.1);
}

/* Code Background Image */
.code-bg-image {
    background-image: url('assets/Code-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    animation: code-bg-parallax 20s ease-in-out infinite;
    transform: translateZ(0);
    will-change: transform;
}

@keyframes code-bg-parallax {
    0% { 
        background-position: center top; 
        transform: scale(1.05) rotate(0deg); 
    }
    25% { 
        background-position: center center; 
        transform: scale(1.1) rotate(0.2deg); 
    }
    50% { 
        background-position: center bottom; 
        transform: scale(1.05) rotate(0deg); 
    }
    75% { 
        background-position: center center; 
        transform: scale(1.1) rotate(-0.2deg); 
    }
    100% { 
        background-position: center top; 
        transform: scale(1.05) rotate(0deg); 
    }
}

/* Responsive adjustments for code background */
@media (max-width: 768px) {
    .code-bg-image {
        background-attachment: scroll;
        background-size: cover;
        animation: none;
    }
}

/* Testimonials Carousel Styles */
.testimonials-carousel {
    position: relative;
    max-width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.carousel-slide:hover {
    transform: translateY(-5px);
}





/* Responsive Carousel */
@media (max-width: 768px) {
    .carousel-slide {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .carousel-slide {
        width: 50%;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .code-bg-image {
        animation: none;
        background-position: center center;
        transform: scale(1) rotate(0deg);
    }
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(15px)) {
    .glass-card {
        background: rgba(55, 65, 81, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .glass-card:hover {
        background: rgba(75, 85, 99, 0.9);
        border-color: rgba(59, 130, 246, 0.5);
    }
}

@keyframes skills-complex {
    0% {
        background-position: center center;
        transform: scale(1.05) rotate(0deg);
    }
    25% {
        background-position: right center;
        transform: scale(1.1) rotate(0.2deg);
    }
    50% {
        background-position: center center;
        transform: scale(1.05) rotate(0deg);
    }
    75% {
        background-position: left center;
        transform: scale(1.1) rotate(-0.2deg);
    }
    100% {
        background-position: center center;
        transform: scale(1.05) rotate(0deg);
    }
}

@keyframes hero-complex {
    0% {
        background-position: left center;
        transform: scale(1.1) rotate(0deg);
    }
    12.5% {
        background-position: center center;
        transform: scale(1.2) rotate(0.3deg);
    }
    25% {
        background-position: right center;
        transform: scale(1.3) rotate(0.5deg);
    }
    37.5% {
        background-position: center center;
        transform: scale(1.2) rotate(0.3deg);
    }
    50% {
        background-position: left center;
        transform: scale(1.1) rotate(0deg);
    }
    62.5% {
        background-position: center center;
        transform: scale(1.2) rotate(-0.3deg);
    }
    75% {
        background-position: right center;
        transform: scale(1.3) rotate(-0.5deg);
    }
    87.5% {
        background-position: center center;
        transform: scale(1.2) rotate(-0.3deg);
    }
    100% {
        background-position: left center;
        transform: scale(1.1) rotate(0deg);
    }
}

/* Parallax effect for hero background */
.hero-bg-collage {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: translateZ(0);
    will-change: transform;
}

/* Additional overlay for better text readability */
.hero-bg-collage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);
    animation: overlay-pulse 8s ease-in-out infinite;
}

@keyframes overlay-pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.5;
    }
}

/* Floating shapes animation (kept for compatibility) */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.floating-shapes::before,
.floating-shapes::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
    animation: float 6s ease-in-out infinite;
}

.floating-shapes::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-shapes::after {
    top: 60%;
    right: 10%;
    animation-delay: 3s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
    }
}

/* Skill bars animation */
.skill-item {
    margin-bottom: 1rem;
}

.skill-item span {
    display: block;
    margin-bottom: 0.5rem;
}

.skill-item .bg-blue-400,
.skill-item .bg-purple-400,
.skill-item .bg-green-400 {
    transition: width 1.5s ease-in-out;
    width: 0% !important;
}

.skill-item.animate .bg-blue-400,
.skill-item.animate .bg-purple-400,
.skill-item.animate .bg-green-400 {
    width: var(--skill-width) !important;
}

/* Skill cards styling */
.skill-card {
    transition: all 0.3s ease;
}

.skill-card:hover {
    transform: translateY(-5px);
}

/* Simple hover effect for skill cards */
.skill-card .bg-gray-700:hover {
    background-color: #4b5563 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Project cards hover effect */
.project-card {
    transition: all 0.3s ease;
}

.project-card:hover {
    transform: translateY(-10px);
}

/* Timeline animations */
/* Mountain Climbing Journey Styles */
.mountain-journey {
    position: relative;
    min-height: 800px;
    padding: 2rem 0;
}

.mountain-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mountain-peak {
    animation: mountain-float 8s ease-in-out infinite;
}

@keyframes mountain-float {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-20px) scale(1.05);
        opacity: 0.4;
    }
}

.climbing-path {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
}

.checkpoint {
    position: relative;
    width: 100%;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.checkpoint-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.marker-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    animation: marker-pulse 2s ease-in-out infinite;
}

@keyframes marker-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    }
}

.marker-line {
    width: 4px;
    height: 80px;
    border-radius: 2px;
    margin-top: 1rem;
    animation: line-glow 3s ease-in-out infinite;
}

@keyframes line-glow {
    0%, 100% {
        opacity: 0.6;
        box-shadow: 0 0 10px currentColor;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 20px currentColor;
    }
}

.checkpoint-content {
    flex: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.checkpoint:hover .checkpoint-content {
    transform: translateX(10px);
}

/* Tech Badge Styles */
.tech-badge {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tech-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tech-badge:hover::before {
    opacity: 1;
}

.tech-badge:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Experience Section Styles */
.experience-card {
    position: relative;
    transition: all 0.3s ease;
}

.experience-card:hover {
    transform: translateY(-5px);
}

.glass-container {
    background: rgba(31, 41, 55, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(75, 85, 99, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.glass-container:hover {
    background: rgba(31, 41, 55, 0.9);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2);
}

/* Achievement Items */
.achievement-item {
    position: relative;
    overflow: hidden;
}

.achievement-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.achievement-item:hover::before {
    transform: translateX(100%);
}

/* Technology Radar */
.tech-radar {
    position: relative;
}

.tech-item {
    position: relative;
    overflow: hidden;
}

.tech-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tech-item:hover::before {
    opacity: 1;
}

/* Animated Progress Bars */
@keyframes progress-fill {
    0% { width: 0%; }
    100% { width: var(--progress-width); }
}

.progress-bar {
    position: relative;
    overflow: hidden;
}

.progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, currentColor, transparent);
    animation: progress-fill 2s ease-out forwards;
    width: var(--progress-width);
}

/* Animated Background Elements */
@keyframes float-glow {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 0.6;
    }
}

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

/* Performance Metrics Animation */
@keyframes metric-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.metric-value {
    animation: metric-pulse 2s ease-in-out infinite;
}

/* Responsive adjustments for glass container */
@media (max-width: 768px) {
    .glass-container {
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
    
    .tech-radar .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .climbing-person {
        display: none;
    }
    
    .checkpoint {
        flex-direction: column;
        text-align: center;
    }
    
    .checkpoint-content {
        transform: none !important;
    }
}

/* Timeline styles for backward compatibility */
.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item:nth-child(odd) {
    margin-left: 0;
}

.timeline-item:nth-child(even) {
    margin-left: 50%;
}

@media (max-width: 768px) {
    .timeline-item:nth-child(even) {
        margin-left: 0;
    }
}

/* Navigation active state */
.nav-link.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

/* Mobile menu animations */
#mobile-menu {
    transition: all 0.3s ease;
}

#mobile-menu.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button hover effects */
.btn-gradient {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    transition: all 0.3s ease;
}

.btn-gradient:hover {
    background: linear-gradient(45deg, #2563eb, #7c3aed);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

/* Text gradient animation */
.text-gradient-animate {
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease infinite;
}

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

/* Form input focus effects */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

/* Social media icons hover */
.social-icon {
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-3px) scale(1.1);
}

/* Loading animation for skill bars */
@keyframes skillLoad {
    from {
        width: 0%;
    }
    to {
        width: var(--skill-width);
    }
}

/* Parallax effect for hero section */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Typing animation for hero text */
.typing-animation {
    overflow: hidden;
    border-right: 2px solid #3b82f6;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: #3b82f6;
    }
}

/* Card hover effects */
.hover-card {
    transition: all 0.3s ease;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Glow effect for important elements */
.glow-effect {
    position: relative;
}

.glow-effect::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glow-effect:hover::before {
    opacity: 1;
}

/* Pulse animation for call-to-action buttons */
.pulse-animation {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* Responsive design improvements */
@media (max-width: 768px) {
    .floating-shapes::before,
    .floating-shapes::after {
        width: 100px;
        height: 100px;
    }
    
    .timeline-item {
        margin-left: 0 !important;
    }
    
    /* Mobile hero optimizations */
    .hero-bg-collage {
        background-attachment: scroll; /* Disable fixed attachment on mobile for better performance */
        background-size: cover;
    }
    
    .hero-bg-collage::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.8) 100%);
    }
    
    /* Mobile skills background optimizations */
    .skills-bg-collage {
        background-attachment: scroll;
        background-size: cover;
        animation: none;
    }
    
    /* Mobile glass effect optimizations */
    .glass-container {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .glass-card {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Hero section responsive improvements */
@media (max-width: 640px) {
    #home {
        min-height: 100vh;
        padding: 2rem 1rem;
    }
    
    #home h1 {
        font-size: 2.5rem;
        line-height: 1.2;
    }
    
    #home p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .hero-bg-collage {
        background-size: cover;
    }
    
    .hero-bg-collage::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    #home h1 {
        font-size: 3.5rem;
    }
    
    #home p {
        font-size: 1.25rem;
    }
    
    .hero-bg-collage {
        background-size: cover;
    }
    
    .hero-bg-collage::before {
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.7) 100%);
    }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    .bg-gray-800 {
        background-color: #1f2937;
    }
    
    .bg-gray-900 {
        background-color: #111827;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Custom selection color */
::selection {
    background: rgba(59, 130, 246, 0.3);
    color: white;
}

/* Enhanced hero section effects */
#home {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

/* Hero text glow effect */
#home h1 span {
    text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    animation: text-glow 3s ease-in-out infinite alternate;
}

@keyframes text-glow {
    from {
        text-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
    to {
        text-shadow: 0 0 40px rgba(139, 92, 246, 0.7), 0 0 60px rgba(236, 72, 153, 0.5);
    }
}

/* Hero button hover effects */
#home button {
    position: relative;
    overflow: hidden;
}

#home button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

#home button:hover::before {
    left: 100%;
}

/* Stats animation */
#home .grid > div {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

#home .grid > div:nth-child(1) { animation-delay: 0.2s; }
#home .grid > div:nth-child(2) { animation-delay: 0.4s; }
#home .grid > div:nth-child(3) { animation-delay: 0.6s; }
#home .grid > div:nth-child(4) { animation-delay: 0.8s; }

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

/* Parallax scroll effect enhancement */
.hero-bg-collage {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Mobile performance optimizations */
@media (prefers-reduced-motion: reduce) {
    .hero-bg-collage {
        animation: none;
        background-position: center center;
        transform: scale(1) rotate(0deg);
    }
    
    .hero-bg-collage::before {
        animation: none;
        opacity: 0.7;
    }
    
    .skills-bg-collage {
        animation: none;
        background-position: center center;
        transform: scale(1) rotate(0deg);
    }
    
    #home h1 span {
        animation: none;
    }
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Skills Tab Buttons */
.skill-tab-btn {
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(75, 85, 99, 0.5);
    color: #9ca3af;
    cursor: pointer;
}

.skill-tab-btn:hover {
    background: rgba(75, 85, 99, 0.7);
    border-color: rgba(59, 130, 246, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
}

.skill-tab-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(139, 92, 246, 0.3));
    border-color: rgba(59, 130, 246, 0.8);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Skill Card Filtering */
.skill-card.hidden {
    display: none;
}

/* Remove ALL animations/movements from skill cards */
.skill-card {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
}

.skill-card * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
}

.skill-card:hover * {
    transform: none !important;
}

/* Disable AOS animations for skill cards */
.skill-card[data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
}

.skill-card[data-aos].aos-animate {
    transform: none !important;
    opacity: 1 !important;
}

/* Only keep border and shadow transitions */
.skill-card > div {
    transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Keep text color transitions */
.skill-card h4 {
    transition: color 0.3s ease !important;
}

/* Interactive Particle System */
.particle-system {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
    opacity: 0.6;
    animation: particle-float 8s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

@keyframes particle-float {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-20px) scale(1.1);
        opacity: 1;
    }
}

/* Magnetic hover effect for interactive elements */
/* .magnetic-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.magnetic-hover:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
} */

/* Glowing text effect */
.glow-text {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transition: text-shadow 0.3s ease;
}

.glow-text:hover {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(139, 92, 246, 0.6);
}

/* Ripple effect for buttons */
.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple-animation 0.6s linear;
    pointer-events: none;
}

@keyframes ripple-animation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Floating elements animation */
.floating-element {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Gradient border animation */
.gradient-border {
    position: relative;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
    padding: 2px;
    border-radius: 8px;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #3b82f6, #8b5cf6, #ec4899);
    border-radius: 8px;
    animation: gradient-rotate 3s linear infinite;
}

@keyframes gradient-rotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .particle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .particle-system {
        display: none;
    }
    
    .floating-element {
        animation: none;
    }
    
    .gradient-border::before {
        animation: none;
    }
}

/* Line clamp utility for text truncation */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modern Bento Grid Styles */
@media (min-width: 1024px) {
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:row-span-2 {
        grid-row: span 2 / span 2;
    }
}

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

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(17, 24, 39, 0.5);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgb(59, 130, 246), rgb(147, 51, 234));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgb(96, 165, 250), rgb(168, 85, 247));
}

/* Glass morphism effect enhancement */
.backdrop-blur-xl {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Enhanced hover states for project cards */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
}

/* Responsive grid fixes */
@media (max-width: 768px) {
    .min-h-\[500px\] {
        min-height: 400px !important;
    }

    .min-h-\[240px\] {
        min-height: 200px !important;
    }
}