/* ===============================================
   NEW MODERN BACKGROUND DESIGN
   =============================================== */

/* Enhanced Animated Background Shapes */
.animated-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: linear-gradient(45deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.05));
    top: 10%;
    left: 10%;
    animation: floatShape1 15s ease-in-out infinite;
}

.shape-2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(6, 182, 212, 0.05));
    top: 60%;
    right: 15%;
    animation: floatShape2 20s ease-in-out infinite;
}

.shape-3 {
    width: 150px;
    height: 150px;
    background: linear-gradient(225deg, rgba(6, 182, 212, 0.1), rgba(249, 115, 22, 0.05));
    top: 30%;
    right: 40%;
    animation: floatShape3 18s ease-in-out infinite;
}

.shape-4 {
    width: 250px;
    height: 250px;
    background: linear-gradient(315deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.05));
    bottom: 20%;
    left: 30%;
    animation: floatShape4 22s ease-in-out infinite;
}

.shape-5 {
    width: 180px;
    height: 180px;
    background: linear-gradient(45deg, rgba(249, 115, 22, 0.1), rgba(236, 72, 153, 0.05));
    top: 15%;
    right: 25%;
    animation: floatShape5 25s ease-in-out infinite;
}

@keyframes floatShape1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(50px, -30px) rotate(90deg) scale(1.1); }
    50% { transform: translate(30px, 40px) rotate(180deg) scale(0.9); }
    75% { transform: translate(-20px, -10px) rotate(270deg) scale(1.05); }
}

@keyframes floatShape2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-40px, 20px) rotate(120deg) scale(1.15); }
    66% { transform: translate(20px, -35px) rotate(240deg) scale(0.85); }
}

@keyframes floatShape3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    20% { transform: translate(25px, 30px) rotate(72deg) scale(1.1); }
    40% { transform: translate(-15px, -20px) rotate(144deg) scale(0.9); }
    60% { transform: translate(35px, 10px) rotate(216deg) scale(1.05); }
    80% { transform: translate(-25px, 15px) rotate(288deg) scale(0.95); }
}

@keyframes floatShape4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    30% { transform: translate(-30px, -25px) rotate(108deg) scale(1.2); }
    60% { transform: translate(40px, 30px) rotate(216deg) scale(0.8); }
}

@keyframes floatShape5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(-20px, 40px) rotate(90deg) scale(0.9); }
    50% { transform: translate(30px, -15px) rotate(180deg) scale(1.1); }
    75% { transform: translate(10px, 25px) rotate(270deg) scale(1.05); }
}

/* Geometric Background Elements */
.geometric-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.geo-shape {
    position: absolute;
    opacity: 0.6;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid rgba(99, 102, 241, 0.1);
    top: 25%;
    left: 75%;
    animation: rotateGeo 30s linear infinite;
}

.circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.08) 0%, transparent 70%);
    border: 2px solid rgba(6, 182, 212, 0.2);
    top: 70%;
    left: 20%;
    animation: pulseGeo 8s ease-in-out infinite;
}

.square {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.1), rgba(249, 115, 22, 0.05));
    border: 1px solid rgba(99, 102, 241, 0.3);
    top: 40%;
    left: 5%;
    animation: rotateGeo 20s linear infinite reverse;
    transform-origin: center;
}

.hexagon {
    width: 80px;
    height: 46px;
    background: rgba(6, 182, 212, 0.1);
    border: 2px solid rgba(236, 72, 153, 0.2);
    position: relative;
    top: 15%;
    right: 10%;
    animation: floatGeo 12s ease-in-out infinite;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    left: 0;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 23px solid rgba(6, 182, 212, 0.1);
}

.hexagon:after {
    top: 100%;
    border-top: 23px solid rgba(6, 182, 212, 0.1);
}

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

@keyframes pulseGeo {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

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

/* Enhanced SVG Blob Animations */
.background-svg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.4;
    pointer-events: none;
}

.svg-blob {
    position: absolute;
    width: 500px;
    height: 500px;
    animation: blobFloat 25s ease-in-out infinite;
    filter: blur(1px);
}

.svg-blob:nth-child(1) {
    top: 5%;
    left: 5%;
    animation-delay: 0s;
    animation-duration: 25s;
}

.svg-blob:nth-child(2) {
    bottom: 5%;
    right: 5%;
    animation-delay: 12s;
    animation-duration: 30s;
}

@keyframes blobFloat {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: blur(1px);
    }
    25% { 
        transform: translate(30px, -40px) rotate(90deg) scale(1.1);
        filter: blur(2px);
    }
    50% { 
        transform: translate(-20px, 30px) rotate(180deg) scale(0.9);
        filter: blur(1.5px);
    }
    75% { 
        transform: translate(40px, -20px) rotate(270deg) scale(1.05);
        filter: blur(2.5px);
    }
}

/* Responsive Background Adjustments */
@media (max-width: 1024px) {
    .shape-1, .shape-4 {
        width: 250px;
        height: 250px;
    }
    
    .shape-2, .shape-5 {
        width: 150px;
        height: 150px;
    }
    
    .shape-3 {
        width: 120px;
        height: 120px;
    }
    
    .svg-blob {
        width: 400px;
        height: 400px;
    }
}

@media (max-width: 768px) {
    .shape-1, .shape-4 {
        width: 200px;
        height: 200px;
    }
    
    .shape-2, .shape-5 {
        width: 120px;
        height: 120px;
    }
    
    .shape-3 {
        width: 100px;
        height: 100px;
    }
    
    .geo-shape {
        opacity: 0.4;
    }
    
    .triangle {
        border-left-width: 30px;
        border-right-width: 30px;
        border-bottom-width: 50px;
    }
    
    .circle {
        width: 80px;
        height: 80px;
    }
    
    .square {
        width: 40px;
        height: 40px;
    }
    
    .hexagon {
        width: 60px;
        height: 35px;
    }
    
    .svg-blob {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 480px) {
    .animated-shapes .shape {
        filter: blur(3px);
        opacity: 0.6;
    }
    
    .shape-1, .shape-4 {
        width: 150px;
        height: 150px;
    }
    
    .shape-2, .shape-5 {
        width: 100px;
        height: 100px;
    }
    
    .shape-3 {
        width: 80px;
        height: 80px;
    }
    
    .geometric-bg {
        opacity: 0.5;
    }
    
    .svg-blob {
        width: 250px;
        height: 250px;
        opacity: 0.3;
    }
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
    .shape,
    .geo-shape,
    .svg-blob {
        animation: none;
    }
}

/* GPU Acceleration for smooth animations */
.shape,
.geo-shape,
.svg-blob {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}