/* Animated Gradient Background Effect */
.gradient-bg {
    position: relative;
    overflow: hidden;
}

.gradient-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(28, 155, 239, 0.2),
        rgba(28, 155, 239, 0.15),
        rgba(28, 155, 239, 0.25),
        rgba(30, 200, 165, 0.1),
        rgba(28, 155, 239, 0.18),
        rgba(28, 155, 239, 0.2)
    );
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
    pointer-events: none;
    z-index: 0;
    will-change: transform, background-position;
}

.gradient-bg > * {
    position: relative;
    z-index: 1;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    25% {
        background-position: 100% 50%;
        transform: translate3d(-50%, -50%, 0) rotate(90deg);
    }
    50% {
        background-position: 100% 100%;
        transform: translate3d(-50%, -50%, 0) rotate(180deg);
    }
    75% {
        background-position: 0% 100%;
        transform: translate3d(-50%, -50%, 0) rotate(270deg);
    }
    100% {
        background-position: 0% 50%;
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

/* Floating orbs for additional effect */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: float 20s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);
}

.floating-orb-1 {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, #1C9BEF, #1EC8A5);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-orb-2 {
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #1C9BEF, #0EA5E9);
    top: 60%;
    right: 10%;
    animation-delay: -7s;
}

.floating-orb-3 {
    width: 250px;
    height: 250px;
    background: linear-gradient(225deg, #1C9BEF, #1EC8A5);
    bottom: 20%;
    left: 50%;
    animation-delay: -14s;
}

@keyframes float {
    0%, 100% {
        transform: translate3d(0px, 0px, 0) scale(1);
    }
    33% {
        transform: translate3d(20px, -30px, 0) scale(1.1);
    }
    66% {
        transform: translate3d(-15px, 20px, 0) scale(0.9);
    }
}

/* Performance optimizations for mobile */
@media (pointer: coarse) {
    .floating-orb {
        display: none;
    }
    
    .gradient-bg::before {
        animation: none;
        background-position: 0% 50%;
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .floating-orb,
    .gradient-bg::before {
        animation: none;
    }
    
    .floating-orb {
        transform: translate3d(0, 0, 0) scale(1);
    }
}