/* Premium Footer Animation - Parallax Night Drive */

.footer-animation-wrapper {
    position: relative;
    width: 100%;
    height: 120px;
    background: linear-gradient(90deg, #0a1a3a 0%, #0047b3 50%, #0066ff 100%);
    overflow: hidden;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    /* Wider for seamless scrolling */
    height: 100%;
    background-repeat: repeat-x;
    background-position: bottom left;
}

/* Background: Distant City (Very Slow) */
.layer-bg {
    background-image: url('../images/footer-shape.png');
    background-size: auto 100%;
    opacity: 0.2;
    animation: parallax-scroll 80s linear infinite;
    z-index: 1;
}

/* Mid Layer: Street Lights & Trees (Medium Speed) */
.layer-mid {
    background-image: url('../images/footer-mid-layer.png');
    background-size: auto 100%;
    opacity: 0.3;
    animation: parallax-scroll 40s linear infinite;
    z-index: 2;
}

/* Front Layer: Road & Trucks (Fastest) */
.layer-front {
    z-index: 5;
}

.running-truck-container {
    position: absolute;
    bottom: 20px;
    width: 100%;
    height: 80px;
}

.truck-item {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.8));
}

/* Premium Truck 1 (Moving Left to Right) */
.truck-1-premium {
    width: 220px;
    height: 70px;
    background-image: url('../images/truck-1-premium.png');
    left: -300px;
    bottom: 5px;
    animation: drive-ltr 18s linear infinite, shake 0.5s ease-in-out infinite;
}

/* Premium Truck 2 (Moving Right to Left) */
.truck-2-premium {
    width: 180px;
    height: 60px;
    background-image: url('../images/truck-2-premium.png');
    right: -300px;
    bottom: 0px;
    animation: drive-rtl 22s linear infinite, shake 0.7s ease-in-out infinite;
}

/* Glow Effect for Headlights */
.truck-glow {
    position: absolute;
    width: 100px;
    height: 40px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(10px);
}

.truck-1-premium .truck-glow {
    left: 160px;
    bottom: 10px;
}

.truck-2-premium .truck-glow {
    right: 140px;
    bottom: 8px;
}

/* Atmosphere Overlay (Gradients & Fog) */
.atmosphere-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            rgba(5, 10, 20, 0.8) 0%,
            transparent 30%,
            transparent 70%,
            rgba(5, 10, 20, 0.9) 100%);
    pointer-events: none;
    z-index: 10;
}

/* Animations */

/* Continuous Background Scrolling */
@keyframes parallax-scroll {
    from {
        background-position-x: 0;
    }

    to {
        background-position-x: -100%;
    }
}

/* Driving LTR */
@keyframes drive-ltr {
    0% {
        left: -15%;
    }

    100% {
        left: 115%;
    }
}

/* Driving RTL */
@keyframes drive-rtl {
    0% {
        right: -15%;
    }

    100% {
        right: 115%;
    }
}

/* Engine Shake */
@keyframes shake {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-animation-wrapper {
        height: 80px;
    }

    .truck-1-premium {
        width: 140px;
        height: 45px;
    }

    .truck-2-premium {
        width: 120px;
        height: 40px;
    }
}