/* ========== FOOTER BACKGROUND ANIMATIONS ========== */

/* Animated gradient background */
.footer {
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
}

/* Sliding gradient wave */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 300%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(30, 144, 255, 0.04) 25%,
            rgba(0, 212, 255, 0.06) 50%,
            rgba(30, 144, 255, 0.04) 75%,
            transparent 100%);
    animation: gradientSlide 15s ease-in-out infinite;
    z-index: 0;
}

@keyframes gradientSlide {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(33.33%);
    }
}

/* Floating particles effect */
.footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(30, 144, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(30, 144, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 90% 20%, rgba(0, 212, 255, 0.09) 0%, transparent 50%);
    animation: particlesFloat 20s ease-in-out infinite;
    z-index: 0;
}

@keyframes particlesFloat {

    0%,
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-20px) scale(1.05);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-10px) scale(0.95);
        opacity: 0.7;
    }

    75% {
        transform: translateY(-30px) scale(1.02);
        opacity: 0.9;
    }
}

/* Ensure content is above background */
.footer .container-continut {
    position: relative;
    z-index: 1;
}

/* Disable background animations on mobile for performance */
@media (max-width: 768px) {

    .footer::before,
    .footer::after {
        animation: none;
        opacity: 0.3;
    }
}

/* Accessibility - Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .footer::before,
    .footer::after {
        animation: none !important;
    }
}