/* Experience Section with Moving Truck */
.experience-section {
    background: linear-gradient(180deg, #001a3d 0%, #010e2a 50%, #001a3d 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Moving City Skyline Background */
.experience-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background-image: 
        /* Sky gradient */
        linear-gradient(to bottom, #001a3d 0%, #010e2a 100%),
        /* Repeating building silhouettes */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 60px,
            rgba(0, 10, 30, 0.8) 60px,
            rgba(0, 10, 30, 0.8) 70px,
            rgba(255, 94, 20, 0.1) 70px,
            rgba(255, 94, 20, 0.1) 72px,
            rgba(0, 10, 30, 0.8) 72px,
            rgba(0, 10, 30, 0.8) 90px,
            transparent 90px,
            transparent 150px
        );
    animation: moveBuildings 30s linear infinite;
    z-index: 0;
}

/* Realistic Asphalt Road */
.experience-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    /* Asphalt texture */
    background: 
        /* Road surface */
        linear-gradient(180deg, 
            #2a2a2a 0%, 
            #1a1a1a 20%, 
            #0f0f0f 50%, 
            #1a1a1a 80%, 
            #2a2a2a 100%
        );
    background-image: 
        /* White center dashed line */
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 20px,
            rgba(255, 255, 255, 0.9) 20px,
            rgba(255, 255, 255, 0.9) 60px,
            transparent 60px,
            transparent 80px
        ),
        /* Yellow side lines */
        linear-gradient(
            to bottom,
            transparent 0%,
            transparent 8%,
            rgba(255, 200, 50, 0.8) 8%,
            rgba(255, 200, 50, 0.8) 11%,
            transparent 11%,
            transparent 89%,
            rgba(255, 200, 50, 0.8) 89%,
            rgba(255, 200, 50, 0.8) 92%,
            transparent 92%
        ),
        /* Asphalt texture noise */
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.1) 0px,
            transparent 1px,
            transparent 2px
        );
    animation: moveRoad 1.5s linear infinite;
    z-index: 1;
    box-shadow: inset 0 15px 30px rgba(0, 0, 0, 0.4);
}

@keyframes moveBuildings {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -150px 0;
    }
}

@keyframes moveRoad {
    0% {
        background-position: 0 0, 0 0, 0 0;
    }
    100% {
        background-position: -80px 0, 0 0, -2px -2px;
    }
}

.truck-container {
    position: relative;
    z-index: 3;
    padding: 0;
    margin-left: -50px;
    margin-top: 45px;
}

.truck-wrapper {
    position: relative;
    max-width: 350px;
    margin: 0;
    padding: 20px 0;
}

.truck-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(255, 94, 20, 0.5));
}

/* Realistic Truck Bounce */
.shake-truck {
    animation: truckBounce 1s ease-in-out infinite;
}

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

/* Engine Vibration Shadow */
.truck-wrapper::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 8px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, transparent 70%);
    filter: blur(8px);
    animation: shadowPulse 1s ease-in-out infinite;
}

@keyframes shadowPulse {
    0%, 100% {
        transform: scaleX(1);
        opacity: 0.6;
    }
    50% {
        transform: scaleX(1.1);
        opacity: 0.8;
    }
}

/* Realistic Dual Headlight Beams */
.truck-image::before,
.truck-image::after {
    content: '';
    position: absolute;
    top: 52%;
    width: 150px;
    height: 70px;
    background: radial-gradient(ellipse at left, rgba(255, 240, 150, 0.7) 0%, rgba(255, 240, 150, 0.4) 50%, transparent 100%);
    transform: translateY(-50%) skewX(-8deg);
    pointer-events: none;
    z-index: 5;
    animation: headlightPulse 2s ease-in-out infinite;
    filter: blur(4px);
}

.truck-image::before {
    left: 100%;
    margin-left: -15px;
    margin-top: -8px;
}

.truck-image::after {
    left: 100%;
    margin-left: -5px;
    margin-top: 8px;
    animation-delay: 0.15s;
    opacity: 0.85;
}

@keyframes headlightPulse {
    0%, 100% {
        opacity: 0.7;
        transform: translateY(-50%) skewX(-8deg) scaleX(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) skewX(-8deg) scaleX(1.15);
    }
}

/* Main Headlight Glow Effect */
.truck-wrapper::after {
    content: '';
    position: absolute;
    top: 72%;
    right: -95px;
    width: 100px;
    height: 70px;
    background: linear-gradient(90deg, rgba(255, 245, 160, 0.6) 0%, rgba(255, 240, 150, 0.3) 50%, transparent 100%);
    clip-path: polygon(0 30%, 100% 10%, 100% 90%, 0 70%);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    animation: headlightFlicker 3s ease-in-out infinite;
}

@keyframes headlightFlicker {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

/* Rotating Front Tyre Only */
.tyre-image {
    position: absolute;
    width: 16%;
    height: auto;
    z-index: 2;
}

.tyre-front {
    bottom: 8%;
    right: 17%;
    animation: rotateWheel 0.5s linear infinite;
}

/* Fast Spinning Wheel */
@keyframes rotateWheel {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Smoke/Exhaust Effect */
.truck-container::before {
    content: '';
    position: absolute;
    bottom: 18%;
    left: 40px;
    width: 50px;
    height: 50px;
    background: radial-gradient(circle, rgba(100, 100, 100, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: smoke 2.5s ease-out infinite;
    z-index: 1;
}

@keyframes smoke {
    0% {
        transform: translateX(0) translateY(0) scale(0.3);
        opacity: 0.7;
    }
    100% {
        transform: translateX(-100px) translateY(-60px) scale(2);
        opacity: 0;
    }
}

.experience-content {
    position: relative;
    z-index: 3;
    padding: 0 50px;
    margin-top: -232px;
    text-align: right;
}

.experience-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.3;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}

.highlight-years {
    color: var(--primary-color);
    font-size: 3rem;
    text-shadow: 0 0 20px rgba(255, 94, 20, 0.8);
    animation: glow 2s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(255, 94, 20, 0.8);
    }
    50% {
        text-shadow: 0 0 30px rgba(255, 94, 20, 1), 0 0 40px rgba(255, 94, 20, 0.8);
    }
}

.btn-experience {
    background: var(--orange-gradient);
    color: white;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 10px 30px rgba(255, 94, 20, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-experience:hover {
    background: linear-gradient(135deg, #e54d0a 0%, #ff6b2b 100%);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 94, 20, 0.6);
    color: white;
}

.btn-experience i {
    font-size: 1.2rem;
}

/* Responsive for Experience Section */
@media (max-width: 992px) {
    .experience-content {
        padding: 30px 20px 0;
        text-align: center;
        margin-top: -50px;
    }
    
    .experience-title {
        font-size: 1.8rem;
    }
    
    .highlight-years {
        font-size: 2.2rem;
    }
    
    .truck-container {
        text-align: left;
        margin-bottom: 30px;
        margin-left: -40px;
        margin-top: 35px;
    }
    
    .truck-wrapper {
        display: block;
        max-width: 280px;
        margin: 0;
    }
    
    .truck-wrapper::after {
        width: 120px;
        right: -60px;
    }
}

@media (max-width: 576px) {
    .experience-section {
        padding: 50px 0;
    }
    
    .experience-content {
        margin-top: -20px;
    }
    
    .experience-title {
        font-size: 1.3rem;
    }
    
    .highlight-years {
        font-size: 1.8rem;
        display: block;
        margin: 10px 0;
    }
    
    .truck-container {
        margin-left: -30px;
        margin-top: 30px;
    }
    
    .truck-wrapper {
        max-width: 220px;
        padding: 15px 0;
        margin: 0;
    }
    
    .truck-wrapper::after {
        width: 100px;
        right: -50px;
        height: 70px;
    }
    
    .tyre-image {
        width: 18%;
    }
    
    .btn-experience {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
}